1. Tiledの使い方

はじめに

ヴァンサバ風ゲームが一段落したので、次はTowerDefenseを作っていきます。

まず、Tiledでステージマップを作成します。

レイヤー

以下のようなレイヤーを作成すると何かと便利です。

  • 地面(Groud)・・・地面
  • 障害物(Obstacles)・・・通り抜けできないもの、キャラの上に表示するもの（壁、柱、壺など）
  • 通行不可(Collision)・・・通行不可のタイルを指定
  • 位置情報(Points)・・・スポーン位置やゴール位置など

位置情報はオブジェクトレイヤー、残りはタイルレイヤーで作成します。

通行不可

通行不可の指定は専用タイル画像を用意して、 すべての敵が通行不可(all)、地面を歩く敵が通行不可(ground) などで色分けしておきます。

カスタムプロパティで、{collision: all} のように設定しておきます。

位置情報

位置情報は、Pointを追加して、nameにspawn1,goal1などと指定しておきます。

タイル境界を自動で描画

水場と陸地、石畳と土のように、2種類のタイルの境界を自動で塗り分ける機能です。 （まだいまいちよくわからない。。。）

  1. タイルセットを編集をクリック

  1. Terrain SetsのNew Corner Setをクリック
  2. 地形を追加する（赤と緑）

  1. タイルを赤と緑で塗っていく

  1. Terrain Brushで塗ると自動で境界ができる

Phaserから読み込み

preloadでタイル画像とTiledでエクスポートしたJSONを読み込みます。

preload(){
    this.load.image("tiles", "assets/tilesets/dungeon.png");
    this.load.tilemapTiledJSON("stage1", "assets/maps/stage1.json");
}

createで以下の処理をします。

// マップレイヤーを表示
const map = this.make.tilemap({ key: "stage1" });
const tileset = map.addTilesetImage("dungeon", "tiles");
map.createLayer("Ground", tileset!, 0, 0);
map.createLayer("Obstacles", tileset!, 0, 0);

// Mapのコリジョン設定(matter)
const collisionLayer = map.createLayer("Collision", tileset!, 0, 0);
collisionLayer!.setCollisionByProperty({ collision: ["all", "ground"] });
this.matter.world.convertTilemapLayer(collisionLayer!, { isStatic: true, label: "terrain" });
this.matter.world.createDebugGraphic(); // デバッグ用
this.matter.world.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

// ゴールとスポーンポイントを取得
const spawn1 = map.getObjectLayer("Points")?.objects.find((point) => point.name === "spawn1")!;
const goal1 = map.getObjectLayer("Points")?.objects.find((point) => point.name === "goal1")!;
const spawnPoint = { x: spawn1.x!, y: spawn1.y! };
const goalPoint = { x: goal1.x!, y: goal1.y! };

まとめ

Tiledの使い方を解説しました。