🙌

phaserでゲーム開発 第六回

に公開
JavaScript
Game
Phaser
tech

phaserでゲーム開発シリーズ、第六回。
前回の記事はこちら。
https://zenn.dev/k_tabuchi/articles/33a0d4b6dfd63f

この記事では、敵キャラの登場・爆発エフェクトの追加・敵を倒す処理について解説します。

この動画のようなエフェクトができます。
https://youtu.be/HrzDN_db2uU

Phaser での敵キャラ実装解説：登場・爆発エフェクト・撃破処理

1. 敵キャラの登場

敵キャラは Phaser.Physics.Arcade.Group を使って複数まとめて管理します。
以下のように生成することで、複数の敵を一度に扱えるようになります。

// 敵グループを作成
this.#enemys = this.physics.add.group();

// 敵を追加
const enemy = this.#enemys.create(200, 400, 'enemy');
enemy.setCollideWorldBounds(true);
  • this.physics.add.group() で物理演算対応のグループを生成
  • create(x, y, 'enemy') で座標を指定してスプライトを追加
  • setCollideWorldBounds(true) で画面外に出ないよう制御

2. 爆発エフェクトの追加

敵を倒した際には爆発エフェクトを再生して、演出を強化します。
エフェクトは専用スプライトを用意し、アニメーションを登録して使います。

const expload = this.physics.add.sprite(enemy.x, enemy.y, 'expload');
expload.anims.play('expload-effect', true);

// アニメーション終了後に削除
expload.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
    expload.destroy();
});
  • 敵の位置 (enemy.x, enemy.y) を基準に生成
  • アニメーションを再生して、終了後に destroy() でリソース解放

3. 敵を倒す処理

斬撃（攻撃スプライト）と敵グループの当たり判定は、overlap を利用します。
重なった瞬間にコールバックが呼ばれ、敵を倒す処理を実行します。

this.physics.add.overlap(slash, this.#enemys, (s, enemy) => {
    if (enemy && enemy.active) {
        // 爆発エフェクトを表示
        const expload = this.physics.add.sprite(enemy.x, enemy.y, 'expload');
        expload.anims.play('expload-effect', true);

        // 敵を削除
        enemy.destroy();

        // エフェクト終了後に削除
        expload.on(Phaser.Animations.Events.ANIMATION_COMPLETE, () => {
            expload.destroy();
        });
    }
});

処理の流れ

  1. slash（斬撃）と this.#enemys（敵グループ）の overlap を監視
  2. 当たった敵がアクティブなら処理を実行
  3. 敵の位置に爆発エフェクトを生成して再生
  4. 敵を destroy() で消去
  5. エフェクトも再生終了後に destroy()

まとめ

  • 敵は Phaser.Physics.Arcade.Group でまとめて管理すると便利
  • 倒された敵には爆発エフェクトを再生し、演出を強化
  • physics.add.overlap を使えば、斬撃と敵の接触を簡単に検知できる
  • 「敵が出てくる → 攻撃が当たる → 爆発して消える」 という一連の流れをシンプルに表現可能

この仕組みを組み込めば、アクションゲームらしい爽快感を演出できます。
次のステップとしては、敵の動きや攻撃パターンを追加してみるのも良いでしょう。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion