tiled

tiled map editor를 사용하여 맵을 만들고, Phaser에서 사용하는 방법을 알아보자.

tiled map editor

tiled map editor는 맵을 만들어주는 툴이다. tiled map editor에서 다운로드 받을 수 있다.

Phaser에서 tiled map editor 사용하기

맵 만들기

tiled map editor를 실행하고, 새로운 맵을 선택한다. encoding은 base64(uncompression)로 설정

맵을 완성하고나면 별도로 export 할 필요는 없고 json타입으로 저장해두면 된다.

Phaser에서 맵 사용하기

preload() {
  this.load.tilemapTiledJSON("map4", "assets/tiled/3.json");
  this.load.image("Terrian", "assets/tiled/Tile1.0.1/Terrian.png");
  this.load.image("vegetation", "assets/tiled/Tile1.0.1/vegetation.png");
  this.load.spritesheet("player", "assets/Char2/Char2_idle_16px.png", {
    frameWidth: 16,
    frameHeight: 16,
  });
  this.load.spritesheet("exit", "assets/tiled/Tile1.0.1/Dungeon.png", {
    frameWidth: 16,
    frameHeight: 16,
    startFrame: 86,
    endFrame: 86,
  });
  this.load.spritesheet("pixel_animals", "assets/pixel_animals.png", {
    frameWidth: 16,
    frameHeight: 16,
  });
}
create() {
  const map = this.make.tilemap({
    key: "map4",
  });
  const vegetationTiles = map.addTilesetImage("vegetation", "vegetation");
  const terrianTiles = map.addTilesetImage("Terrian", "Terrian");
  map.createLayer("bg", terrianTiles);

  const collision_layer = map.createLayer("bg_collision", [
    terrianTiles,
    vegetationTiles,
  ]);
  collision_layer.setCollisionByExclusion([-1]);

  const playerSpawnPoint = map.findObject("PlayerSpawn", ({ name }) => {
    return name === "PlayerSpawn1";
  });
  const exitPoint = map.findObject("Exit", ({ name }) => {
    return name === "Exit";
  });
  const duckSpawnPoints = map.filterObjects("Duck", ({ name }) => {
    return name.includes("Duck");
  });
}

json파일을 로드한다고해서 tiled 에디터에서 사용했던 이미지 바이너리가 json에 포함될리가 없으므로 같이 로드해줘야한다.

특이점으로는 this.make.tilemap 에서 key는 씬에 관계없이 고유한 값이어야한다.