🐣 일하면서 공부하기

🐣 일하면서 공부하기

[Phaser3] Survival Game(3) - Tileset에 물리 객체 선언하기

Tileset에 물리 객체 선언하기 이전 포스팅에서 전체적인 맵을 구현 했습니다. 그런데 생각해 보면, 실제 캐릭터가 맵에서 돌아다닐 때, 어떤 이미지는 통과되어야 하고, 벽이나 나무 같은 이미지는 통과되지 않고 캐릭터와 충돌해야 합니다. 현재의 맵엔 그러한 설정이 없습니다. 따라서 벽 같은 통과할 수 없는 타일에 물리 객체라는 것을 선언해 보겠습니다. Tileset에서 Custom Properties를 통해 '여기는 충돌 나는 곳임. 못 감.'이라고 지정할 수 있습니다. collides라는 속성을 추가해서 물리 객체를 선언합니다. (물론 이 속성 이름은 자유롭게 지정 가능합니다.) 타일셋 아래를 보면 여러 가지 버튼들이 보입니다. 이 버튼들 중 다음의 버튼을 클릭합니다. 그러면 새 창이 생깁니다. 충돌..

🐣 일하면서 공부하기

[Phaser3] Survival Game(2-2) - Tiled Map Editor 사용하기

Layer 쌓아서 Objects 올리기 Tiled를 사용해서 background를 구성한 이후에 나무, 표지판 같은 object를 올리고 싶을 수 있습니다. 그때는 Layer를 하나 더 만들고 Tileset을 찍으면 됩니다. 다음은 일단 완성된 background 맵을 준비합니다. 이후에 Layer 탭에서 우클릭을 합니다. 그 후에 New > Tile Layer를 선택합니다. 그러면 새로운 Tile Layer 2가 생성된 것을 확인할 수 있습니다. Tile Layer 2가 선택된 상태에서 background 맵에 나무나 표지판 Tileset을 찍어봅니다. 이런 식으로 Layer를 쌓아서 예쁘게 맵을 구현 하시면 됩니다.

🐣 일하면서 공부하기

[Phaser3] Survival Game(2-1) - Tiled Map Editor 사용하기

Tiled Map Editor 사용하기 이전 포스팅에서 Tiled Map Editor 툴을 다운로드해서 설치했습니다. 이제 새로운 맵을 만들어보겠습니다. 새 프로젝트 설정 Tiled를 처음 실행하면 다음 창이 표시됩니다. Project → Save Project as... 를 선택하여 새 프로젝트 파일을 저장합니다. 권장 위치는 프로젝트의 루트이지만 원하는 위치에 배치할 수 있습니다. 새 Map 만들기 새 Map을 만들려면 New Map... 을 클릭합니다. 그러면 다음과 같은 팝업창이 뜹니다. 여기에서 초기 맵의 크기, 타일 크기, 방향, 타일 레이어 형식, 타일 렌더링 순서 및 맵이 무한인지 여부를 선택합니다. 저는 Tile layer format은 Base64(uncompressed)로 했고, Wi..

🐣 일하면서 공부하기

[Phaser3] Survival Game(1) - Tiled Map Editor 설치하기

미리 보는 완성본 메타버스 프로젝트에 투입되면서 Phaser라는 게임 엔진을 사용하게 됐습니다. 하지만 저는 한 번도 사용해 본 적이 없어서...🥴 일단 공부 개념으로 제 마음 가는 대로 만들어 보았습니다. [Phaser3] Survival Game의 게시글은 이전에 만들었던 게임을 다시 한번 정리하는 회고록입니다. 완성본은 아래와 같습니다. 직접 꾸민 맵이 있고, 그 안에 캐릭터가 있고, 캐릭터는 맵 안에서 움직이며, 나무나 표지판, 돌, 빙판 등의 충돌체를 만나면 지나갈 수 없는 간단한 게임입니다. 개발 툴 선정 게임 엔진은 Phaser를 사용했고, 게임 Map은 Tiled Map Editor를 사용했습니다. Phaser란? Phaser는 데스크톱 및 모바일용 HTML5 게임을 만드는 데 사용되는 2..

개발자 린다씨
'🐣 일하면서 공부하기' 카테고리의 글 목록 (6 Page)