player가 움직이는지 여부에 따라 애니메이션 전환하기 이전 포스팅에서 player를 MainScene.js에서 분리시켰습니다. player가 충돌체에 충돌할 수 있게 수정하기 전에 player가 움직이는지 여부에 따라 애니메이션을 전환하도록 만들어주겠습니다. Player.js 파일 update()에 다음의 코드를 추가합니다. if (Math.abs(this.velocity.x) > 0.1 || Math.abs(this.velocity.y) > 0.1) { this.anims.play("princess_walk", true); } else { this.anims.play("princess_idle", true); } 움직임이 0.1보다 크면 걷기 애니메이션을 재생하고 아니면 서 있는 애니메이션을 재생합..
MainScene.js에서 player 분리하기 이전 포스팅에서 player가 충돌은 감지하지만, 충돌하는 순간 빙글빙글 돌아버리는 것을 확인할 수 있었습니다. 그것을 고치기 전에 일단 player를 MainScene.js에서 분리시키겠습니다. js 폴더에 Player.js 파일을 생성합니다. Player.js 파일 constructor 코드 작성하기 Player.js 파일에 Player라는 클래스가 Phaser.Physics.Matter.Sprite를 확장할 수 있도록 코드를 작성합니다. export default class Player extends Phaser.Physics.Matter.Sprite { } 이후 생성자를 만들어주고, 괄호 안에 data라고 작성합니다. export default cl..
Layer 하나 더 쌓기 이전 포스팅에서 Layer 하나만 보이게 하고 player가 움직일 수 있게 했습니다. 이번엔 Layer 하나를 더 쌓아서 나무 등과 같은 object들도 map에 보일 수 있게 해 보겠습니다. 아! 이전에 Tiled로 만들어 놓고 export 해서 JSON 파일로 내보내기 하셨어야지 Layer 하나 더 쌓기가 가능합니다💁 MainScene.js 파일의 create()에 코드 추가하기 저는 Tiled에서 Layer를 추가할 때 이름을 "Tile Layer 2"로 했습니다. 이제 Tile Layer 1을 생성했던 방식과 동일하게 Tile Layer 2도 추가해 줍니다. const layer2 = map.createLayer("Tile Layer 2", tileset, 0, 0); ..
MainScene.js 살짝 수정하기 이전 포스팅에서 player에 애니메이션을 적용했습니다. 이때 update() 부분에 아래의 코드를 작성했었는데요. this.player.anims.play("princess_walk", true); 그냥 player가 돌아다니게만 하겠다 하시면 내버려 두셔도 되는데, 만약 약간의 리팩터링을 수행하여 많은 것들을 처리하는 플레이어 클래스를 갖게 하고 싶다면 다음과 같이 바꿔줍니다. (아! 수행하는 건... 여러분이 알아서 잘해보시면 됩니다🤪 저 이거 끝내면 또 다른 거 공부해야 돼서...ㅎ.ㅎ 큼큼) this.player.anims.play("princess_idle", true); 프로젝트에 Tiled 적용하기 이제 player도 있으니 전에 만들어 두었던 Tile..
