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..
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를 쌓아서 예쁘게 맵을 구현 하시면 됩니다.
