【Phaser3】当たり判定を1回だけ処理する方法をUnityから着想を得て解決

現在（2022/12/30）、RecursionCSにて上級者向けのチーム開発に取り組んでいます。

ゲーム画面の描写にCanvasAPIとPhaser3を使用。

その中で、「1回だけ当たり判定を行う」というシンプルな処理に思いの外手間取ったので、解決方法を記録として残します。

【解決策】クラス変数に当たったかどうかの状態を持たせておく

Next.js　Phaser.js　TypeScript

export class GameScene extends Scene {
  private hit: boolean;
  constructor() {
    super({ key: 'GameScene' });
    this.hit = true; // ヒットしたかどうか状態を判別する変数
  }
// ～～中略～～
  create() {
// ～～中略～～
    this.physics.add.collider(
      this.player,
      this.explosion,
      (player: Phaser.Types.Physics.Arcade.GameObjectWithBody) => {
        if (this.hit) { // ヒットした場合の処理（残機を減らす）
          player.damagedPlayer(
            this.stockText,
            this.gameOverText
          );
        }
        this.hit = false; // ヒットしたので状態を変更
      },
      null,
      this
    );
  }
// ～～中略～～
  update() {
// ～～中略～～
    window.setTimeout(() => {
      this.explosion.clear();
      this.hit = true; //  アニメーションなど処理が終了した後にヒットの状態を元に戻す
    }, 600);
  }

create()の中で当たり判定を定義する

colliderやoverlapで当たり判定を作ります。

その中でさらに、ヒットしたかどうかを判定する変数を間に噛ませています。

当たり判定が終わったらfalseにすることで、最初の1回だけ処理を行うようにしています。

update()の中で処理が完了後にヒット判定を元に戻す

アニメーションが終わったら、変数を最初の状態に戻しています。

これらにより

• 最初の1回だけヒットする
• 処理が完了後に判定があるとまたヒットする

という処理を実装することができました。

参考にした記事

こちらの記事が参考になりました。

Unityでもupdate関数をループさせてアニメーションを描写する仕組みは同じなので、同様に実装できるようです。

Phaserの機能の中から探していたので、一見すぐ解決できそうな課題なのに、とても時間がかかりました。

視野を広げるのはとっても大切ですね。