타일맵 기초 완벽 가이드

게임 개발에서 필수적인 타일맵 시스템을 Tiled 에디터부터 Phaser.js 구현까지 단계별로 배웁니다. 초급 개발자도 쉽게 따라할 수 있도록 실무 예제와 함께 설명합니다.

---

목차

1. Tiled_맵_에디터_소개
2. 타일셋_만들기
3. 맵_JSON_로드
4. 레이어_렌더링
5. 충돌_레이어_설정
6. 오브젝트_레이어_활용

---

1. Tiled 맵 에디터 소개

김개발 씨는 2D 게임을 만들어보고 싶었습니다. 하지만 거대한 게임 맵을 어떻게 제작해야 할지 막막했습니다.

픽셀 하나하나 직접 그려야 하나요? 그때 선배가 말했습니다.

"타일맵을 써봐. 레고 블록처럼 조립하면 돼."

Tiled는 무료로 사용할 수 있는 2D 타일맵 에디터입니다. 마치 레고 블록을 조립하듯이, 작은 타일 조각들을 배치하여 거대한 게임 맵을 만들 수 있습니다.

제작된 맵은 JSON 형식으로 내보내어 Phaser.js 같은 게임 엔진에서 바로 사용할 수 있습니다.

다음 코드를 살펴봅시다.

// Tiled에서 내보낸 JSON 파일의 기본 구조
{
  "width": 20,           // 맵의 가로 타일 개수
  "height": 15,          // 맵의 세로 타일 개수
  "tilewidth": 32,       // 개별 타일의 가로 크기 (픽셀)
  "tileheight": 32,      // 개별 타일의 세로 크기 (픽셀)
  "layers": [],          // 레이어 배열 (배경, 오브젝트 등)
  "tilesets": []         // 사용된 타일셋 정보
}

김개발 씨는 어릴 적부터 RPG 게임을 좋아했습니다. 드넓은 초원, 신비로운 숲, 위험한 던전을 탐험하며 자랐죠.

어느 날 문득 이런 생각이 들었습니다. "나도 이런 세계를 직접 만들어보고 싶다." 하지만 현실의 벽은 높았습니다.

게임에 등장하는 거대한 맵을 어떻게 만들어야 할까요? 포토샵으로 한 픽셀씩 그려야 할까요?

그렇게 하면 간단한 마을 하나 만드는 데도 몇 달이 걸릴 것입니다. 바로 이때 Tiled 맵 에디터가 등장합니다.

Tiled는 마치 레고 블록을 조립하는 것과 같습니다. 여러분이 어릴 적 레고를 가지고 놀았던 경험을 떠올려 보세요.

작은 블록들을 하나씩 끼워 맞추면 거대한 성이나 우주선이 완성되었죠. 타일맵도 정확히 같은 원리입니다.

32x32 픽셀 크기의 작은 타일 이미지들이 있습니다. 풀 타일, 흙 타일, 물 타일, 나무 타일...

이런 조각들을 격자 위에 하나씩 배치하면 넓은 초원이 되고, 깊은 숲이 되고, 거대한 성이 됩니다. Tiled는 이 작업을 직관적인 GUI 환경에서 할 수 있게 해주는 도구입니다.

드래그 앤 드롭으로 타일을 배치하고, 여러 레이어를 쌓아 깊이감을 표현하며, 충돌 영역이나 이벤트 지점도 설정할 수 있습니다. 무엇보다 좋은 점은 완전히 무료라는 것입니다.

오픈소스 프로젝트로 누구나 다운로드하여 사용할 수 있습니다. Windows, macOS, Linux 모두 지원합니다.

Tiled에서 맵을 완성하면 JSON 형식으로 내보낼 수 있습니다. 이 JSON 파일에는 맵의 크기, 타일 배치 정보, 레이어 구성 등 모든 데이터가 담겨 있습니다.

Phaser.js 같은 게임 엔진은 이 JSON을 읽어서 화면에 맵을 그려줍니다. 선배 개발자 박시니어 씨가 말합니다.

"Tiled를 쓰면 기획자나 디자이너도 직접 맵을 수정할 수 있어. 개발자가 코드를 건드릴 필요가 없지." 이것이 바로 데이터 드리븐 개발의 핵심입니다.

맵 데이터와 게임 로직을 분리하면, 각자의 영역에서 독립적으로 작업할 수 있습니다. 새로운 스테이지를 추가할 때도 JSON 파일만 만들면 됩니다.

김개발 씨는 Tiled 공식 사이트에서 프로그램을 다운로드했습니다. 설치는 간단했고, 인터페이스도 직관적이었습니다.

첫 번째 맵을 만들어볼 준비가 되었습니다.

실전 팁

💡 - Tiled는 mapeditor.org에서 무료로 다운로드할 수 있습니다

• 처음 시작할 때는 32x32 픽셀 타일 크기를 권장합니다
• 무료 타일셋은 OpenGameArt.org에서 찾을 수 있습니다

---

2. 타일셋 만들기

Tiled를 설치한 김개발 씨 앞에 첫 번째 관문이 나타났습니다. "타일셋을 먼저 만들어야 합니다." 선배의 말에 김개발 씨는 고개를 갸웃거렸습니다.

타일셋이 대체 뭘까요?

타일셋은 게임 맵을 구성하는 타일 이미지들의 모음입니다. 하나의 큰 이미지 안에 여러 타일이 격자 형태로 배치되어 있습니다.

Tiled에서 이 이미지를 불러와 개별 타일로 분리하면, 맵 제작에 사용할 수 있습니다.

다음 코드를 살펴봅시다.

// Phaser에서 타일셋 이미지 로드하기
function preload() {
  // 맵 JSON 파일 로드
  this.load.tilemapTiledJSON('map', 'assets/maps/level1.json');

  // 타일셋 이미지 로드 (32x32 타일이 격자로 배치된 이미지)
  this.load.image('tiles', 'assets/tilesets/terrain.png');

  // 여러 타일셋을 사용하는 경우
  this.load.image('objects', 'assets/tilesets/objects.png');
  this.load.image('buildings', 'assets/tilesets/buildings.png');
}

타일셋을 이해하려면 우표 수집을 떠올려 보세요. 어릴 적 우표 수집책을 본 적이 있으신가요?

한 장의 큰 종이에 여러 우표가 일정한 간격으로 붙어 있습니다. 필요할 때 원하는 우표 하나를 떼어 쓰죠.

타일셋도 정확히 이런 구조입니다. 하나의 PNG 이미지 안에 32x32 픽셀 크기의 타일들이 격자 형태로 배치되어 있습니다.

풀밭 타일, 흙길 타일, 물 타일, 바위 타일... 수십 가지 타일이 한 이미지에 모여 있습니다.

왜 이렇게 만들까요? 개별 이미지 파일로 만들면 안 될까요?

물론 기술적으로는 가능합니다. 하지만 수백 개의 작은 이미지 파일을 따로따로 로드하면 네트워크 요청이 급증합니다.

게임 로딩 시간이 길어지고, 메모리 관리도 복잡해집니다. 하나의 큰 이미지로 합치면 이런 문제가 사라집니다.

이것을 게임 개발에서는 스프라이트 시트 또는 텍스처 아틀라스라고 부릅니다. 타일셋도 같은 개념입니다.

Tiled에서 타일셋을 등록하는 방법을 알아봅시다. 먼저 상단 메뉴에서 Map > New Tileset을 선택합니다.

타일셋 이미지 파일을 지정하고, 타일 크기를 입력합니다. 대부분의 2D 게임은 16x16, 32x32, 또는 64x64 픽셀을 사용합니다.

타일셋이 등록되면 우측 패널에 개별 타일들이 분리되어 표시됩니다. 이제 원하는 타일을 클릭하고 맵 위에 배치할 수 있습니다.

Phaser.js에서는 preload 함수에서 타일셋 이미지를 로드합니다. this.load.image('tiles', 'assets/tilesets/terrain.png') 형태로 작성하죠.

첫 번째 인자는 나중에 참조할 키 이름이고, 두 번째 인자는 파일 경로입니다. 주의할 점이 있습니다.

Tiled에서 설정한 타일셋 이름과 Phaser에서 로드할 때 사용하는 키 이름이 일치해야 합니다. 이 부분에서 초보 개발자들이 자주 실수합니다.

박시니어 씨가 조언합니다. "타일셋 이미지는 2의 거듭제곱 크기로 만드는 게 좋아.

256x256, 512x512 같은 크기 말이야. GPU가 처리하기 효율적이거든." 김개발 씨는 무료 타일셋을 다운로드하여 Tiled에 등록했습니다.

초록빛 풀밭과 갈색 흙길이 화면에 나타났습니다. 드디어 맵을 그릴 준비가 되었습니다.

실전 팁

💡 - 타일셋 이미지는 PNG 형식을 권장합니다 (투명 배경 지원)

• 타일 사이에 1픽셀 간격을 두면 렌더링 시 이음새 문제를 방지할 수 있습니다
• Tiled에서 타일셋을 TSX 파일로 저장하면 여러 맵에서 재사용 가능합니다

---

3. 맵 JSON 로드

김개발 씨가 첫 번째 맵을 완성했습니다. 초원 위에 오솔길이 이어지고, 작은 연못도 있습니다.

이제 이 맵을 Phaser 게임에서 불러와야 합니다. 어떻게 해야 할까요?

Tiled에서 JSON 형식으로 내보낸 맵 파일을 Phaser에서 로드합니다. tilemapTiledJSON 메서드로 JSON을 읽어오고, makeTilemap으로 타일맵 객체를 생성합니다.

이후 타일셋 이미지를 연결하면 화면에 맵이 렌더링됩니다.

다음 코드를 살펴봅시다.

// Phaser Scene에서 타일맵 로드하기
function preload() {
  this.load.tilemapTiledJSON('level1', 'assets/maps/level1.json');
  this.load.image('terrain', 'assets/tilesets/terrain.png');
}

function create() {
  // 타일맵 객체 생성
  const map = this.make.tilemap({ key: 'level1' });

  // 타일셋 이미지 연결 (Tiled에서 설정한 이름, Phaser 로드 키)
  const tileset = map.addTilesetImage('terrain_tiles', 'terrain');

  // 레이어 생성
  const groundLayer = map.createLayer('Ground', tileset, 0, 0);
}

Tiled에서 맵을 완성했다면, 이제 Phaser에서 이 맵을 화면에 그려야 합니다. 이 과정은 마치 설계도를 가지고 실제 건물을 짓는 것과 같습니다.

Tiled에서 만든 JSON 파일은 설계도입니다. 어떤 위치에 어떤 타일이 배치되어 있는지, 레이어는 몇 개인지, 맵 크기는 얼마인지...

모든 정보가 담겨 있습니다. 하지만 설계도만으로는 건물이 세워지지 않죠.

Phaser가 이 설계도를 읽고, 실제로 화면에 맵을 렌더링합니다. 먼저 preload 함수에서 필요한 리소스를 로드합니다.

this.load.tilemapTiledJSON('level1', 'assets/maps/level1.json')은 JSON 맵 파일을 로드합니다. 첫 번째 인자 'level1'은 나중에 참조할 키 이름입니다.

타일셋 이미지도 함께 로드해야 합니다. JSON 파일은 "3번 타일을 여기에 배치해라"라는 정보만 가지고 있습니다.

실제로 3번 타일이 어떻게 생겼는지는 타일셋 이미지에서 가져옵니다. create 함수에서 실제 타일맵 객체를 생성합니다.

this.make.tilemap({ key: 'level1' })로 JSON 데이터를 기반으로 타일맵 객체를 만듭니다. 다음 단계가 중요합니다.

addTilesetImage 메서드로 타일셋 이미지를 연결해야 합니다. 첫 번째 인자는 Tiled에서 설정한 타일셋 이름이고, 두 번째 인자는 Phaser에서 로드할 때 사용한 키입니다.

김개발 씨가 자주 겪는 실수가 바로 여기서 발생합니다. Tiled에서 타일셋 이름을 "terrain_tiles"로 설정했는데, Phaser에서 "terrain"이라고 잘못 입력하면 에러가 발생합니다.

두 이름이 정확히 일치해야 합니다. 마지막으로 createLayer 메서드로 레이어를 생성합니다.

Tiled에서 만든 레이어 이름을 그대로 사용합니다. 'Ground' 레이어를 만들었다면 map.createLayer('Ground', tileset, 0, 0)처럼 작성합니다.

세 번째와 네 번째 인자는 레이어의 시작 위치입니다. 보통 (0, 0)으로 설정하여 화면 왼쪽 위부터 시작합니다.

박시니어 씨가 추가로 설명합니다. "createLayer가 null을 반환하면 레이어 이름이 틀렸거나 타일셋 연결에 문제가 있는 거야.

콘솔에서 에러 메시지를 확인해봐." 김개발 씨가 코드를 실행하자, 드디어 화면에 초원 맵이 나타났습니다. 풀밭과 오솔길이 선명하게 보입니다.

게임 세계가 눈앞에 펼쳐진 순간입니다.

실전 팁

💡 - JSON 내보내기 시 "Embed tilesets" 옵션을 끄면 파일 크기가 줄어듭니다

• createLayer 반환값이 null이면 레이어 이름이나 타일셋 연결을 확인하세요
• 여러 레이어를 사용할 경우 z-index 순서에 주의하세요

---

4. 레이어 렌더링

맵이 화면에 나타났지만, 뭔가 밋밋합니다. 나무 뒤로 캐릭터가 지나가면 좋겠는데, 어떻게 해야 할까요?

선배가 웃으며 말합니다. "레이어를 분리하면 돼.

포토샵 레이어처럼."

레이어는 맵을 여러 층으로 분리하여 깊이감을 표현하는 기법입니다. 배경 레이어, 지형 레이어, 장식 레이어 등을 쌓으면 캐릭터가 오브젝트 앞뒤로 자연스럽게 이동할 수 있습니다.

Phaser에서는 레이어의 depth 값으로 렌더링 순서를 조절합니다.

다음 코드를 살펴봅시다.

function create() {
  const map = this.make.tilemap({ key: 'level1' });
  const tileset = map.addTilesetImage('terrain', 'tiles');

  // 배경 레이어 (가장 아래)
  const bgLayer = map.createLayer('Background', tileset, 0, 0);
  bgLayer.setDepth(0);

  // 지형 레이어 (캐릭터와 같은 높이)
  const groundLayer = map.createLayer('Ground', tileset, 0, 0);
  groundLayer.setDepth(1);

  // 장식 레이어 (캐릭터 위에 표시 - 나무 윗부분 등)
  const decorLayer = map.createLayer('Decoration', tileset, 0, 0);
  decorLayer.setDepth(10);

  // 캐릭터 스프라이트
  this.player = this.add.sprite(100, 100, 'player');
  this.player.setDepth(5);  // Ground와 Decoration 사이
}

포토샵이나 피그마를 사용해본 적이 있으신가요? 이런 그래픽 도구에서는 레이어라는 개념이 핵심입니다.

배경 이미지 위에 인물 사진을 올리고, 그 위에 텍스트를 배치합니다. 각 레이어는 독립적이어서, 텍스트를 수정해도 배경에는 영향이 없습니다.

게임 맵도 똑같은 원리를 사용합니다. Tiled에서 맵을 제작할 때, 보통 여러 레이어로 나눠서 작업합니다.

가장 아래에는 Background 레이어가 있습니다. 하늘이나 먼 산 같은 배경 요소를 배치합니다.

그 위에 Ground 레이어가 있습니다. 캐릭터가 실제로 걸어다니는 풀밭, 흙길, 돌바닥이 여기에 들어갑니다.

여기서 재미있는 부분이 등장합니다. RPG 게임을 할 때 나무 뒤로 캐릭터가 숨어드는 장면을 본 적 있죠?

나무 줄기 뒤로 캐릭터가 지나가면, 캐릭터의 일부가 가려집니다. 어떻게 이런 효과를 낼까요?

바로 Decoration 레이어를 사용합니다. 나무의 윗부분, 지붕의 앞부분처럼 캐릭터보다 앞에 표시되어야 하는 요소들을 이 레이어에 배치합니다.

Phaser에서는 setDepth 메서드로 렌더링 순서를 조절합니다. depth 값이 낮을수록 먼저 그려지고, 높을수록 나중에 그려집니다.

나중에 그려진 것이 앞에 보입니다. 예를 들어 Background는 depth 0, Ground는 depth 1, 캐릭터는 depth 5, Decoration은 depth 10으로 설정합니다.

그러면 캐릭터는 배경과 지형 위에 표시되지만, 장식 레이어 아래에 가려집니다. 김개발 씨가 물었습니다.

"캐릭터 depth가 5인데, 왜 10까지 여유를 뒀어요?" 박시니어 씨가 답합니다. "나중에 다른 오브젝트를 추가할 수 있거든.

6, 7, 8에 아이템이나 NPC를 배치할 수도 있잖아. 미리 여유를 두는 게 좋아." 이것이 바로 확장성을 고려한 설계입니다.

당장 필요하지 않더라도, 미래를 생각해서 구조를 잡아두는 것이죠. 한 가지 주의할 점이 있습니다.

Phaser 3에서는 depth를 설정하지 않으면 생성 순서대로 렌더링됩니다. 명시적으로 depth를 설정해주는 것이 나중에 디버깅할 때 편합니다.

김개발 씨가 레이어를 분리하고 depth를 설정하자, 캐릭터가 나무 뒤로 자연스럽게 걸어갔습니다. 마치 진짜 숲을 탐험하는 것 같았습니다.

실전 팁

💡 - depth 값은 10, 20, 30처럼 여유있게 설정하면 나중에 중간값 추가가 쉽습니다

• 동적으로 depth를 변경하면 Y좌표 기반 정렬도 가능합니다
• Tiled에서 레이어 순서를 정확히 맞춰두면 관리가 편합니다

---

5. 충돌 레이어 설정

캐릭터가 맵 위를 자유롭게 돌아다닙니다. 그런데 문제가 생겼습니다.

캐릭터가 벽을 뚫고 지나가고, 바다 위를 걸어다닙니다. 김개발 씨가 당황했습니다.

"충돌 처리는 어떻게 해야 하죠?"

충돌 레이어는 캐릭터가 통과할 수 없는 영역을 정의합니다. Tiled에서 특정 타일에 충돌 속성을 부여하고, Phaser에서 setCollisionByProperty 또는 setCollisionBetween 메서드로 충돌을 활성화합니다.

물리 엔진과 연동하면 자연스러운 충돌 처리가 가능합니다.

다음 코드를 살펴봅시다.

function create() {
  const map = this.make.tilemap({ key: 'level1' });
  const tileset = map.addTilesetImage('terrain', 'tiles');

  // 충돌이 필요한 레이어 생성
  const wallLayer = map.createLayer('Walls', tileset, 0, 0);

  // 방법 1: 타일 인덱스 범위로 충돌 설정
  wallLayer.setCollisionBetween(1, 50);  // 1~50번 타일은 충돌

  // 방법 2: Tiled에서 설정한 속성으로 충돌 설정
  wallLayer.setCollisionByProperty({ collides: true });

  // 플레이어와 레이어 간 충돌 적용
  this.player = this.physics.add.sprite(100, 100, 'player');
  this.physics.add.collider(this.player, wallLayer);
}

게임에서 충돌 처리는 왜 필요할까요? 현실 세계에서 우리는 벽을 통과할 수 없습니다.

바다 위를 걸을 수도 없죠. 게임 세계에서도 이런 물리 법칙이 적용되어야 몰입감이 생깁니다.

캐릭터가 벽을 뚫고 지나가면 게임이 아니라 버그처럼 느껴집니다. 충돌 레이어는 "여기는 지나갈 수 없어"라고 게임에게 알려주는 보이지 않는 벽입니다.

Tiled에서 충돌을 설정하는 방법은 두 가지가 있습니다. 첫 번째는 타일셋 에디터에서 개별 타일에 속성을 부여하는 방법입니다.

타일셋 패널에서 타일을 선택하고, 커스텀 속성으로 collides: true를 추가합니다. 벽 타일, 바위 타일, 물 타일 등에 이 속성을 설정하면 됩니다.

두 번째는 별도의 충돌 전용 레이어를 만드는 방법입니다. 보이지 않는 레이어를 하나 만들고, 충돌이 필요한 영역에 특정 타일을 배치합니다.

이 방법은 시각적 타일과 충돌 영역을 독립적으로 관리할 수 있어서 유연합니다. Phaser에서는 두 가지 메서드로 충돌을 활성화합니다.

**setCollisionBetween(start, end)**은 타일 인덱스 범위로 충돌을 설정합니다. 1번부터 50번 타일까지 모두 충돌하게 만들려면 setCollisionBetween(1, 50)을 호출합니다.

간단하지만, 타일 인덱스가 바뀌면 코드도 수정해야 하는 단점이 있습니다. **setCollisionByProperty({ collides: true })**는 Tiled에서 설정한 속성을 기준으로 충돌을 설정합니다.

타일셋이 바뀌어도 속성만 제대로 설정되어 있으면 코드 수정이 필요 없습니다. 더 유지보수하기 좋은 방법입니다.

충돌 레이어가 준비되면, 플레이어 스프라이트와 연결해야 합니다. Phaser의 물리 엔진을 사용하려면 this.physics.add.sprite로 플레이어를 생성하고, this.physics.add.collider로 플레이어와 레이어를 연결합니다.

김개발 씨가 코드를 실행하자, 캐릭터가 벽 앞에서 멈췄습니다. 더 이상 벽을 뚫고 지나가지 않습니다.

바다 타일 위에도 올라갈 수 없습니다. 박시니어 씨가 팁을 줍니다.

"디버그 모드를 켜면 충돌 영역이 시각적으로 보여. 개발할 때 유용해." this.physics.world.createDebugGraphic()을 호출하면 충돌 영역이 색깔 있는 박스로 표시됩니다.

어디서 충돌이 일어나는지 한눈에 파악할 수 있습니다.

실전 팁

💡 - setCollisionByProperty를 사용하면 타일셋 변경에 더 유연하게 대응할 수 있습니다

• createDebugGraphic()으로 충돌 영역을 시각화하면 디버깅이 쉬워집니다
• 물 타일은 충돌 대신 속도 감소 효과를 적용하는 것도 좋은 방법입니다

---

6. 오브젝트 레이어 활용

맵이 점점 완성되어 갑니다. 그런데 김개발 씨에게 새로운 고민이 생겼습니다.

보물 상자, NPC, 워프 포인트... 이런 것들은 어디에 배치해야 할까요?

타일로 그리기에는 뭔가 어색합니다.

오브젝트 레이어는 타일 기반이 아닌 자유로운 형태의 오브젝트를 배치하는 레이어입니다. 스폰 포인트, NPC 위치, 트리거 영역, 워프 존 등을 정의할 수 있습니다.

Tiled에서 사각형, 원, 폴리곤 등의 도형을 그리고, Phaser에서 이 데이터를 읽어 게임 로직에 활용합니다.

다음 코드를 살펴봅시다.

function create() {
  const map = this.make.tilemap({ key: 'level1' });

  // 오브젝트 레이어에서 스폰 포인트 가져오기
  const spawnPoint = map.findObject('Objects',
    obj => obj.name === 'PlayerSpawn');

  // 스폰 위치에 플레이어 생성
  this.player = this.physics.add.sprite(spawnPoint.x, spawnPoint.y, 'player');

  // 오브젝트 레이어에서 모든 보물상자 가져오기
  const chests = map.getObjectLayer('Items').objects;

  chests.forEach(chest => {
    const chestSprite = this.physics.add.sprite(chest.x, chest.y, 'chest');
    chestSprite.setData('loot', chest.properties.find(p => p.name === 'loot').value);
  });
}

타일 레이어와 오브젝트 레이어의 차이를 이해해봅시다. 타일 레이어는 격자에 맞춰 타일을 배치합니다.

모든 타일이 32x32 픽셀 크기이고, 정해진 격자 위치에만 놓을 수 있습니다. 땅, 벽, 물처럼 반복되는 패턴에 적합합니다.

하지만 게임에는 격자에 맞지 않는 요소도 있습니다. 플레이어가 처음 게임을 시작할 때 어디에 나타날까요?

이 스폰 포인트는 정확한 픽셀 좌표로 지정해야 합니다. NPC는 마을 광장 중앙에 서 있어야 하는데, 격자에 딱 맞지 않을 수 있습니다.

워프 존은 특정 영역에 들어가면 다른 맵으로 이동하는데, 이 영역의 크기가 타일 크기와 다를 수 있습니다. 오브젝트 레이어는 이런 요소들을 위한 것입니다.

Tiled에서 오브젝트 레이어를 생성하면, 자유롭게 도형을 그릴 수 있습니다. 사각형, 원, 폴리곤, 심지어 점 하나도 배치할 수 있습니다.

각 오브젝트에는 이름과 커스텀 속성을 부여할 수 있습니다. 예를 들어 스폰 포인트를 만들어봅시다.

오브젝트 레이어를 선택하고, 점 도구로 원하는 위치를 클릭합니다. 이 점의 이름을 "PlayerSpawn"으로 설정합니다.

끝입니다. 보물 상자는 조금 다릅니다.

상자 위치에 사각형을 그리고, 이름을 "chest"로 설정합니다. 커스텀 속성으로 loot: gold_coins를 추가하면, 상자를 열었을 때 무엇이 나올지도 데이터로 관리할 수 있습니다.

Phaser에서는 findObject와 getObjectLayer 메서드로 이 데이터를 읽습니다. map.findObject('Objects', obj => obj.name === 'PlayerSpawn')은 'Objects' 레이어에서 이름이 'PlayerSpawn'인 오브젝트를 찾습니다.

반환된 객체에서 x, y 좌표를 읽어 플레이어 스프라이트를 생성합니다. map.getObjectLayer('Items').objects는 'Items' 레이어의 모든 오브젝트를 배열로 반환합니다.

forEach로 순회하며 각 위치에 스프라이트를 생성할 수 있습니다. 김개발 씨가 감탄했습니다.

"와, 이렇게 하면 맵 에디터에서 레벨 디자인을 다 할 수 있네요!" 박시니어 씨가 고개를 끄덕입니다. "맞아.

게임 디자이너가 Tiled에서 NPC 위치를 바꾸면, 코드 수정 없이 바로 반영돼. 이게 데이터 드리븐 설계의 힘이야." 워프 존도 같은 원리입니다.

특정 영역에 사각형 오브젝트를 그리고, 속성으로 targetMap: level2, targetX: 100, targetY: 200을 설정합니다. 플레이어가 이 영역에 들어가면 지정된 맵의 지정된 좌표로 이동하도록 코드를 작성하면 됩니다.

김개발 씨는 오브젝트 레이어를 활용하여 마을에 NPC들을 배치했습니다. 무기 상인, 약초 상인, 퀘스트를 주는 촌장...

게임 세계가 점점 풍성해지고 있습니다.

실전 팁

💡 - 오브젝트 타입(type)을 지정하면 같은 종류의 오브젝트를 필터링하기 쉽습니다

• 폴리곤 오브젝트는 복잡한 충돌 영역이나 트리거 존에 활용할 수 있습니다
• Tiled의 템플릿 기능을 사용하면 반복되는 오브젝트 설정을 효율적으로 관리할 수 있습니다

---

이상으로 학습을 마칩니다. 위 내용을 직접 코드로 작성해보면서 익혀보세요!