不連続なSpliteでアニメーション(Phaser3)

やりたいこと
使用例
実装
結果
参考にさせていただいたサイト

やりたいこと

Phaser3でキャラクタにアニメをつける場合以下のように連続したSplite（下の例だとdudeの0～3）からアニメーションを作成します。

    this.anims.create({////左移動時のアニメーション
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
        frameRate: 10,
        repeat: -1
    });

しかし連続していないspliteを用いたい場合もあります。

ここでは連続していないSpliteでアニメーションを作成します。

上記のチュートリアルの詳細は以下の記事をご参照ください。

使用例

上でも紹介しているPhaser3のチュートリアルでは以下のSpliteを使用しています。

左に歩くアニメーションは0～3なので左側4つの画像を繰り返し表示することでアニメーションよしています。

ここで問題なのは１番目と３番目の画像が同じであることです。

同じ画像を削除した以下のスプライトを使用したいのですが、start: 0, end: 2を指定すると左足前の後に右足前の画像が表示されてしまいアニメーションとしておかしいです。

ここでは0,1,0,2を繰り返して表示するべきです。

実装

以下のようにstart: 0, end: 3をframes:に変更し、使用するFrameを設定します。

使用例では [ 0, 1, 0, 2] に変更します。

    this.anims.create({////左移動時のアニメーション
        key: 'left',
        frames: this.anims.generateFrameNumbers('dude', { frames: [ 0, 1, 0, 2] }),
        frameRate: 10,
        repeat: -1
    });

結果

不連続なSpliteでアニメーションが作成できました。

参考にさせていただいたサイト

generateFrameNumbers - Phaser 3 API Documentation