MainScene.js 살짝 수정하기 이전 포스팅에서 player에 애니메이션을 적용했습니다. 이때 update() 부분에 아래의 코드를 작성했었는데요. this.player.anims.play("princess_walk", true); 그냥 player가 돌아다니게만 하겠다 하시면 내버려 두셔도 되는데, 만약 약간의 리팩터링을 수행하여 많은 것들을 처리하는 플레이어 클래스를 갖게 하고 싶다면 다음과 같이 바꿔줍니다. (아! 수행하는 건... 여러분이 알아서 잘해보시면 됩니다🤪 저 이거 끝내면 또 다른 거 공부해야 돼서...ㅎ.ㅎ 큼큼) this.player.anims.play("princess_idle", true); 프로젝트에 Tiled 적용하기 이제 player도 있으니 전에 만들어 두었던 Tile..
GAMMAFP 사이트에서 애니메이션 만들기 이제 한 단계 더 나아가 실제로 Sprite에 애니메이션을 적용해 보겠습니다. Atlas Packer를 만들었던 GAMMAFP 사이트에 다시 들어갑니다. https://gammafp.com/tools Tools Developer with web technologies, HTML5 video games, tools and tips that make your life easier gammafp.com:443 Animator Tool을 클릭합니다. X 버튼을 누릅니다. 다음 화면이 보입니다. Import Atlas 버튼을 클릭합니다. 각각의 버튼을 클릭하여 이전 포스팅에서 다운로드하였던 PNG 파일과 JSON 파일을 둘 다 Import 합니다. 이후 Animation..
프로젝트에 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 버튼 누르면 됩니다. 다운로드를 하고, 압축을 해제하면 여러 폴더들이 보입니다. 이 중..
