マップエディターで作成したタイルマップを Phaser3 で描画する

概要

TiledMapEditor で作成したタイルマップを Phaser3 で読み込む方法を紹介します。

アセットの読み込み

タイルマップで使用した画像データとマップデータの JSON ファイルを読み込みます。
データを読み込む関数の最初の引数にはのちに別の関数から呼び出すための名前となるキーを指定します。
もう一つの引数にはファイルのパスを入れます。

preload() {
  this.load.image("tiles", "tiles/dungeon_tiles.png")
  this.load.tilemapTiledJSON("dungeon", "tiles/dugeon-01.json")
}

画面への描画

読み込んだ JOSN ファイルのデータを使ってタイルマップのインスタンスを作成します。
そして、インスタンスにタイルセットの画像データを渡します。
最後に、createStaticLayer で描画したいレイヤー名を指定します。

create() {
  const map = this.make.tilemap({ key: "dungeon" })
  const tileset = map.addTilesetImage("dungeon", "tiles")

  map.createStaticLayer("layer-name", tileset)
}

レイヤーにあたり判定を付与する

おまけで、レイヤーにあたり判定を付与する方法について。

JSON のタイルマップデータにあらかじめ collide プロパティを設定していた場合の例。
setCollisionByProperty で collide が true になっているタイルにあたり判定を付与します。

さらにゲーム内の別のオブジェクトとあたり判定を有効にするには、最後の行にあるように physics.add.collider を呼び出す必要があります。

const wallLayer = map.createStaticLayer("walls", tileset);
wallLayer.setCollisionByProperty({ collide: true });

this.physics.add.collider(this.player, wallLayer);