프로젝트에 assets\images 폴더 생성하기 이전 포스팅에서 player에 적용할 캐릭터를 골랐고, Atlas Packer를 통해 해당 캐릭터의 json 파일도 다운로드하였습니다. 이제 프로젝트에 적용해 보겠습니다. 먼저 root 폴더 바로 아래에 assets\images 폴더를 만들어줍니다. 이 폴더에 PNG 파일과 JSON 파일을 넣어줍니다. MainScene.js 파일에 PNG, JSON 넣어주기 assets\images 폴더에 PNG와 JSON 파일을 넣어주고 난 뒤 MainScene.js 파일을 엽니다. preload() preload()에서 Princess PNG와 Princess Atlas JSON을 불러옵니다. create() 이후에 create()의 new Phaser.Physics..
16 x 16 RPG Characters 생성 이전 포스팅에서 player 생성과 player를 keyboard 이벤트로 조작했습니다. 이번엔 player에 RPG Character를 입혀 보겠습니다. 아래의 링크를 타고 들어갑니다. https://superdark.itch.io/16x16-free-npc-pack 16x16 Fantasy RPG Characters by Superdark Another add-on to 0x72's Dungeon Tileset superdark.itch.io 아래로 스크롤을 내리면 Download 버튼이 보입니다. Download 버튼을 클릭하면, 무슨 팝업창이 뜨는데, 무시하고 OK 버튼 누르면 됩니다. 다운로드를 하고, 압축을 해제하면 여러 폴더들이 보입니다. 이 중..
MainScene.js의 create()에 player 추가하기 이전 포스팅에서 MainScene.js의 대략적인 구조를 잡았습니다. 이제 실제 움직이는 player를 생성해 보겠습니다. create()에 player 생성 및 키보드 이벤트 추가 create()에 아래의 코드를 추가시켜 player를 생성해 봅니다. 간단한 코드 설명 Phaser.Physics.Matter.Sprite는 Matter Physics Sprite 게임 오브젝트이며, 게임에서 정적 이미지와 애니메이션 이미지를 모두 표시하는 데 사용됩니다. Sprite는 입력 이벤트와 물리 몸체를 가질 수 있고, 또한 색조 지정 및 스크롤, 애니메이션을 적용할 수 있습니다. 이러한 Phaser.Physics.Matter.Sprite를 이용해 p..
MainScene.js 파일 생성하기 이전 포스팅에서 survival-game.js 파일을 작성했습니다. 이번 포스팅은 survival-game.js 파일에서 분리시킨 scene을 담당하는 MainScene.js를 작성해 보겠습니다. 먼저 survival-game.js 파일과 위치가 같은 곳에 MainScene.js 파일을 생성합니다. MainScene.js 코드 작성하기 먼저 MainScene.js 파일에서 MainScene의 클래스가 Phaser.Game 클래스를 확장할 수 있도록 합니다. 이후 슈퍼 클래스의 생성자를 호출합니다. 이 작업을 잊어버리면 런타임 예외 또는 이상한 동작이 발생할 수 있습니다. scene 추가하기 이제 생성된 게임에 scene을 추가하도록 하겠습니다. scene은 prelo..
Visual Studio Code에서 초기 설정 이전 포스팅에서 Map 구현하기가 끝났으면 이제 본격적으로 Phaser3로 게임을 만들어보겠습니다. Visual Studio Code를 실행하여 초기 설정을 진행합니다. 0. Live Server 설치 VS Code엔 Live Server라는 확장 프로그램이 있습니다. 이 확장 프로그램을 사용하면 코딩하고 있는 페이지를 확인할 수 있는 실시간 서버가 열립니다. 서버를 실행하기 위해 Live Server를 설치해 줍니다. 빨간색으로 표시된 버튼을 누른 뒤, 검색창에 주황색 박스에 표시된 것처럼 Live Server라고 검색해 줍니다. (또는 단축키로 Ctrl + Shift + X를 같이 누르고 Live Server라고 검색해도 됩니다.) 설치가 되어 있다면,..
Tileset에 물리 객체 선언하기 이전 포스팅에서 전체적인 맵을 구현 했습니다. 그런데 생각해 보면, 실제 캐릭터가 맵에서 돌아다닐 때, 어떤 이미지는 통과되어야 하고, 벽이나 나무 같은 이미지는 통과되지 않고 캐릭터와 충돌해야 합니다. 현재의 맵엔 그러한 설정이 없습니다. 따라서 벽 같은 통과할 수 없는 타일에 물리 객체라는 것을 선언해 보겠습니다. Tileset에서 Custom Properties를 통해 '여기는 충돌 나는 곳임. 못 감.'이라고 지정할 수 있습니다. collides라는 속성을 추가해서 물리 객체를 선언합니다. (물론 이 속성 이름은 자유롭게 지정 가능합니다.) 타일셋 아래를 보면 여러 가지 버튼들이 보입니다. 이 버튼들 중 다음의 버튼을 클릭합니다. 그러면 새 창이 생깁니다. 충돌..
Layer 쌓아서 Objects 올리기 Tiled를 사용해서 background를 구성한 이후에 나무, 표지판 같은 object를 올리고 싶을 수 있습니다. 그때는 Layer를 하나 더 만들고 Tileset을 찍으면 됩니다. 다음은 일단 완성된 background 맵을 준비합니다. 이후에 Layer 탭에서 우클릭을 합니다. 그 후에 New > Tile Layer를 선택합니다. 그러면 새로운 Tile Layer 2가 생성된 것을 확인할 수 있습니다. Tile Layer 2가 선택된 상태에서 background 맵에 나무나 표지판 Tileset을 찍어봅니다. 이런 식으로 Layer를 쌓아서 예쁘게 맵을 구현 하시면 됩니다.
Tiled Map Editor 사용하기 이전 포스팅에서 Tiled Map Editor 툴을 다운로드해서 설치했습니다. 이제 새로운 맵을 만들어보겠습니다. 새 프로젝트 설정 Tiled를 처음 실행하면 다음 창이 표시됩니다. Project → Save Project as... 를 선택하여 새 프로젝트 파일을 저장합니다. 권장 위치는 프로젝트의 루트이지만 원하는 위치에 배치할 수 있습니다. 새 Map 만들기 새 Map을 만들려면 New Map... 을 클릭합니다. 그러면 다음과 같은 팝업창이 뜹니다. 여기에서 초기 맵의 크기, 타일 크기, 방향, 타일 레이어 형식, 타일 렌더링 순서 및 맵이 무한인지 여부를 선택합니다. 저는 Tile layer format은 Base64(uncompressed)로 했고, Wi..
