tilemap phaserの使い方｜古いcreateStaticLayerに注意！Tiled連携と壁判定を徹底解説

// ❌ 古い仕様の書き方（現在の環境では動作しない）
const groundLayer = map.createStaticLayer('Ground', tileset, 0, 0);

// ✅ Phaser 3.50以降 ＆ Phaser 4の正しい書き方
const groundLayer = map.createLayer('Ground', tileset, 0, 0);

レイヤー（上から描画順）
├── Foreground   ← 前景（木の葉、屋根など。プレイヤーの前面に表示）
├── Collision    ← 障害物（壁、床、ブロック。当たり判定を付けるレイヤー）
└── Background   ← 背景（地面、空など。当たり判定なし）

// "collides: true" プロパティを持つタイルすべてに衝突判定を付与
collisionLayer.setCollisionByProperty({ collides: true });

my-phaser-game/
├── public/
│   └── assets/
│       ├── map.tmj          ← Tiledからエクスポートしたマップファイル
│       ├── tileset.tsj      ← Tilesetの定義ファイル（外部管理の場合）
│       └── tileset.png      ← Tileset画像
└── src/
    └── scenes/
        └── GameScene.ts

my-phaser-game/
├── public/
│   └── assets/
│       ├── map.tmj          ← TiledからエクスポートしたJSONマップ
│       └── tilemap_packed.png  ← Kenney素材のTileset画像
└── src/
    └── scenes/
        └── GameScene.ts

npm create vite@latest my-phaser-game -- --template vanilla-ts
cd my-phaser-game
npm install phaser@latest

// src/main.ts
import Phaser from 'phaser';
import { GameScene } from './scenes/GameScene';

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.AUTO,          // WebGPU → WebGL → Canvasの順で自動選択
  width: 640,
  height: 480,
  backgroundColor: '#1a1a2e',
  physics: {
    default: 'arcade',        // タイルマップとの衝突判定にはArcadePhysicsを使用
    arcade: {
      gravity: { x: 0, y: 600 },  // 重力（横スクロールアクションの場合）
      debug: true             // 開発中はtrueにして当たり判定を可視化
    }
  },
  scene: [GameScene]
};

new Phaser.Game(config);

// src/scenes/GameScene.ts
import Phaser from 'phaser';

export class GameScene extends Phaser.Scene {
  // レイヤーとプレイヤーをクラスフィールドとして宣言
  private player!: Phaser.Physics.Arcade.Sprite;
  private collisionLayer!: Phaser.Tilemaps.TilemapLayer;

  constructor() {
    super({ key: 'GameScene' });
  }

  // -------------------------------------------------------
  // preload：アセットの読み込み
  // -------------------------------------------------------
  preload(): void {
    // タイルマップのJSONを読み込む
    // 第1引数のキー名は後でcreateで参照するため一致させること
    this.load.tilemapTiledJSON('map', 'assets/map.tmj');

    // Tileset画像を読み込む
    // 第3・4引数はTilesetの1タイルあたりの幅・高さ（px）
    this.load.spritesheet('tileset', 'assets/tilemap_packed.png', {
      frameWidth: 18,
      frameHeight: 18
    });

    // プレイヤー用スプライト（仮素材）
    this.load.spritesheet('player', 'assets/player.png', {
      frameWidth: 24,
      frameHeight: 24
    });
  }

  // -------------------------------------------------------
  // create：ゲームオブジェクトの生成
  // -------------------------------------------------------
  create(): void {
    // ① Tilemapオブジェクトを生成
    // preloadで指定したキー名'map'を渡す
    const map = this.make.tilemap({ key: 'map' });

    // ② TilesetをTilemapに紐付ける
    // 第1引数：Tiled上でのTileset名（Tiledの「タイルセット」パネルに表示されている名前）
    // 第2引数：preloadで読み込んだ画像のキー名
    // ※ 第1引数がTiled上の名前と一致しないと、タイルが表示されないので注意
    const tileset = map.addTilesetImage('tileset', 'tileset');

    if (!tileset) {
      console.error('Tilesetの読み込みに失敗しました。Tiled上のTileset名を確認してください。');
      return;
    }

    // ③ レイヤーを生成（Phaser 4では createLayer() に統一）
    // 第1引数：Tiledのレイヤー名（大文字・小文字を含め完全一致が必要）
    // 第2引数：紐付けるTilesetオブジェクト
    // 第3・4引数：マップの描画開始座標（通常は0, 0）
    const backgroundLayer = map.createLayer('Background', tileset, 0, 0);
    const collisionLayer  = map.createLayer('Collision',  tileset, 0, 0);
    const foregroundLayer = map.createLayer('Foreground', tileset, 0, 0);

    if (!backgroundLayer || !collisionLayer || !foregroundLayer) {
      console.error('レイヤーの生成に失敗しました。Tiledのレイヤー名を確認してください。');
      return;
    }

    // ④ 前景レイヤーをプレイヤーより手前に表示するため depth を設定
    // プレイヤーのdepthを1とした場合、前景は2以上にする
    foregroundLayer.setDepth(2);

    // ⑤ プレイヤーをクラスフィールドに保持
    this.collisionLayer = collisionLayer;

    // ⑥ プレイヤーを生成（詳細は次の節で解説）
    this.createPlayer(map);

    // ⑦ カメラをプレイヤーに追従させる
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
  }

  // -------------------------------------------------------
  // プレイヤー生成のヘルパーメソッド
  // -------------------------------------------------------
  private createPlayer(map: Phaser.Tilemaps.Tilemap): void {
    // マップのスポーンポイントからプレイヤーの初期位置を取得する場合：
    // const spawnPoint = map.findObject('Objects', obj => obj.name === 'Spawn');
    // 今回はシンプルに固定座標で配置
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.player.setDepth(1);

    // プレイヤーがマップ外に出ないよう物理ボディの境界を設定
    this.player.setCollideWorldBounds(true);
    this.physics.world.setBounds(
      0, 0,
      map.widthInPixels,
      map.heightInPixels
    );
  }

  // -------------------------------------------------------
  // update：毎フレーム呼ばれる処理
  // -------------------------------------------------------
  update(): void {
    // カーソルキーの入力を取得
    const cursors = this.input.keyboard!.createCursorKeys();

    // 左右移動
    if (cursors.left.isDown) {
      this.player.setVelocityX(-200);
    } else if (cursors.right.isDown) {
      this.player.setVelocityX(200);
    } else {
      // キー入力がなければ水平速度を0に（慣性なし）
      this.player.setVelocityX(0);
    }

    // ジャンプ（地面に接地しているときだけ）
    if (cursors.up.isDown && this.player.body!.blocked.down) {
      this.player.setVelocityY(-500);
    }
  }
}

create(): void {
  // ...（前述のコードに続けて追記）

  // ① Tiledで設定した "collides: true" プロパティを持つタイルに衝突判定を付与
  // このメソッド1行で、プロパティが付いた全タイルに自動的に設定される
  collisionLayer.setCollisionByProperty({ collides: true });

  // ② プレイヤーとCollisionレイヤーの衝突を物理エンジンに登録
  // addColliderに渡すだけでArcadePhysicsが毎フレーム衝突チェックを行う
  this.physics.add.collider(this.player, collisionLayer);

  // デバッグ時にコリジョン範囲を可視化したい場合（開発中のみ使用）
  // 衝突判定が付いたタイルが水色でハイライトされる
  if (process.env.NODE_ENV === 'development') {
    collisionLayer.renderDebug(this.add.graphics(), {
      tileColor: null,                              // 通常タイルは表示しない
      collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200),  // 衝突タイルをオレンジで表示
      faceColor: new Phaser.Display.Color(40, 39, 37, 255)              // 衝突面を黒で表示
    });
  }
}

// 方法①：タイルのカスタムプロパティで設定（推奨）
// Tiledで設定した collides: true のタイルのみ衝突
collisionLayer.setCollisionByProperty({ collides: true });

// 方法②：タイルインデックスの範囲で設定
// インデックス1〜10のタイルすべてに衝突判定を付与
collisionLayer.setCollisionBetween(1, 10);

// 方法③：タイルインデックスを個別に指定
// 特定のタイル（インデックス5と12）だけ衝突させたい場合
collisionLayer.setCollision([5, 12]);

// 方法④：-1以外の全タイルに衝突判定を付与（レイヤー全体を壁にする場合）
// -1はTiledで「何も置いていない空のセル」を意味する
collisionLayer.setCollisionByExclusion([-1]);

// src/scenes/GameScene.ts
import Phaser from 'phaser';

export class GameScene extends Phaser.Scene {
  private player!: Phaser.Physics.Arcade.Sprite;
  private cursors!: Phaser.Types.Input.Keyboard.CursorKeys;

  constructor() {
    super({ key: 'GameScene' });
  }

  preload(): void {
    this.load.tilemapTiledJSON('map', 'assets/map.tmj');
    this.load.spritesheet('tileset', 'assets/tilemap_packed.png', {
      frameWidth: 18,
      frameHeight: 18
    });
    this.load.spritesheet('player', 'assets/player.png', {
      frameWidth: 24,
      frameHeight: 24
    });
  }

  create(): void {
    // ── マップ生成 ──────────────────────────────────
    const map = this.make.tilemap({ key: 'map' });
    const tileset = map.addTilesetImage('tileset', 'tileset');

    if (!tileset) {
      console.error('Tilesetの読み込みに失敗しました');
      return;
    }

    // ── レイヤー生成 ────────────────────────────────
    const backgroundLayer = map.createLayer('Background', tileset, 0, 0)!;
    const collisionLayer  = map.createLayer('Collision',  tileset, 0, 0)!;
    const foregroundLayer = map.createLayer('Foreground', tileset, 0, 0)!;

    // 前景レイヤーをプレイヤーより手前に描画
    foregroundLayer.setDepth(2);

    // ── 衝突判定の設定 ──────────────────────────────
    // Tiledで collides: true を付けたタイルのみ通行不可にする
    collisionLayer.setCollisionByProperty({ collides: true });

    // ── プレイヤー生成 ──────────────────────────────
    this.player = this.physics.add.sprite(100, 300, 'player');
    this.player.setDepth(1);
    this.player.setCollideWorldBounds(true);

    // ── 物理演算：プレイヤーとマップの衝突を登録 ───────
    this.physics.add.collider(this.player, collisionLayer);

    // ── カメラ設定 ──────────────────────────────────
    this.cameras.main.startFollow(this.player);
    this.cameras.main.setBounds(0, 0, map.widthInPixels, map.heightInPixels);
    this.physics.world.setBounds(0, 0, map.widthInPixels, map.heightInPixels);

    // ── キーボード入力 ──────────────────────────────
    this.cursors = this.input.keyboard!.createCursorKeys();
  }

  update(): void {
    const { left, right, up } = this.cursors;

    // 左右移動
    if (left.isDown) {
      this.player.setVelocityX(-200);
      this.player.setFlipX(true);   // スプライトを左向きに反転
    } else if (right.isDown) {
      this.player.setVelocityX(200);
      this.player.setFlipX(false);
    } else {
      this.player.setVelocityX(0);
    }

    // ジャンプ：地面に接地中（blocked.down）のみ有効
    if (up.isDown && this.player.body!.blocked.down) {
      this.player.setVelocityY(-500);
    }
  }
}

npm run dev