5. マップ表示の実装

はじめに

今回はマップ表示の実装です。

Tiledでマップを作成

Tiledを起動し、新しいタイルマップ(map1.tmx)を作成します。新しいタイルセット(terrain.tsx)を追加します。マップタイル画像やタイルサイズを指定します。

タイルセットで、障害物にしたいタイルのカスタムプロパティに collision: true を設定します。（注意）stringではなくboolで指定してください。

タイルマップ(map1.tmx)のタブに切り替えます。右下ペインで、[埋め込みタイルセット]ボタンをクリックしておきます。あとで出力するJSONにタイルセット情報も含まれるようになります。

右上ペインでレイヤーを作成します。今回はgroundという名前にします。

あとは、タイルマップのブラシを使って、マップを描いていきます。 Terrain setsなどを使うと、海や川のエッジが簡単に描画できるようですが、今回は触れません。

マップができたら、エクスポートでJSONとして出力して保存します。

コード実装

Phaser側で必要なのは、タイルセットで使った画像と出力したJSONファイルです。どちらもassetsフォルダに入れておきます。

preloadで2つを読み込みます。（今回はAsset Packを使いませんでした。）

preload() {
  // タイル画像（Tiled の tileset に使っている画像）
  this.load.image("terrain", "assets/tileset/terrain.png");
  // 🗺️ タイルマップJSON（Tiled からエクスポートしたJSON）
  this.load.tilemapTiledJSON("ground", "assets/map1.json");
  // ...
}

createで処理を書いていきます。

create() {
  // マップを作成（key: preload で読み込んだ "ground"）
  const map = this.make.tilemap({ key: "ground" });
  // タイルセットをマップに追加（Tiled 内の名前, Phaser でのキー）
  const tileset = map.addTilesetImage("terrain", "terrain");
  // 地形レイヤー（"ground"）を表示
  const groundLayer = map.createLayer("ground", tileset, 0, 0);
  // コリジョン設定：Tiled 側で collision: true にしたタイルが対象
  groundLayer.setCollisionByProperty({ collision: true });

  // マップの物理境界（これがないと外に出られてしまう）
  this.physics.world.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
  // プレイヤー生成（座標は例、実際は map.findObject などで取得）
  this.player = this.physics.add.sprite(100, 100, "hero");
  this.player.setCollideWorldBounds(true); // 外に出ないようにする

  // プレイヤーの当たり判定を少し小さく調整
  this.player.body.setSize(12, 12);
  this.player.body.setOffset(2, 4);

  // コリジョンを有効にする（プレイヤーと地形）
  this.physics.add.collider(this.player, groundLayer);

  // カメラ設定
  this.cameras.main.startFollow(this.player, true);
  this.cameras.main.setDeadzone(100, 80); // キャラが画面中心からズレる範囲（デッドゾーン）
  this.cameras.main.setZoom(2); // 2倍に拡大
  this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
}

まとめ

今回やったこと。

Tiledでマップ作成
マップの表示
障害物判定（プレイヤーとのコリジョン）
ワールド境界の設定（マップ境界を出ない）
カメラの追従とズーム