🐷

Phaserでプレイヤーとプレイヤーを追跡する子機の作成

2022/05/30に公開

JavaScript

Game

Phaser

tech

プレイヤーとプレイヤーを追跡する子機の作成

プレイヤーはカーソルキーで上下左右に移動します。プレイヤーを追跡して移動する子機として2機を作成します。2機の子機はプレイヤーの移動軌跡を追跡します

createメソッド

追跡に必要な各種設定を行います。

移動座標を保持する配列のインデックスです。このインデックス位置にプレイヤーの現在の座標を代入します

this.index = 0;

移動座標を保持する配列のサイズを設定します。子機の個数や保持しておくべき数はゲームによって変更する必要があります

this.positionsArraySize = 30;

追跡用のオブジェクトのずれです。配列のサイズにもよりますが、プレイヤーをどれくらいの間隔で追跡するのかを調整するための変数です

this.delay = 15;

移動用座標を保持する配列です。2次元配列です。空の配列を30個作成します

this.positions = Array(this.positionsArraySize).fill([]);

updateメソッド

プレイヤーの移動処理、プレイヤーの座標の履歴を移動用配列に保持すること、子機がプレイヤーを追跡する移動処理を行います

プレイヤーの座標を移動用配列に追加

const x = this.player.x;
const y = this.player.y;
this.positions[this.index] = [x, y];

インデックス値を加算

this.index += 1;

インデックスが配列の要素数を超えたら

if (this.index >= this.positionsArraySize) {
this.index = 0;
}

移動座標の配列に基づいて、座標を移動させる

const children = this.followerGroup.getChildren();
for (let i=0; i < this.followerGroup.getLength(); i++) {
    let idx = this.index + ((i+1) * this.delay);
    idx = idx % this.positionsArraySize;

    children[i].x = this.positions[idx][0];
    children[i].y = this.positions[idx][1];
}

実行結果

カーソルキーでプレイヤージェットが移動します。2機の子機がプレイヤーの移動軌跡を追跡します。グラディウスの戦闘機みたいな動きですね