Phaser 3 Tween 標準実装のeasingを見比べる

phaser3のTweenはPhaser2から宣言の仕方が変わっています。
新しい機能も増えており、特に実行中のtweenの値をリアルタイムにアップデートするupdateToはいろいろと使い道がありそうです。

https://labs.phaser.io/view.html?src=src\tweens\update%20to.js

easingを見比べる

今回は標準で実装されているeasingを見比べます。
Phaser.Math.Easingの中にeasingの定数があり、さらにその中にIn,Out,InOutの三つの定数があります。
forループでinを使って定数をいっきに取得してみましょう。

create() {
           
    this.cameras.main.setBackgroundColor("#ffffff");

    this.text = this.add.text(10, 10, "0");
    let index = 0;

    //inで定数を取得
    for (let o in Phaser.Math.Easing) {
        //取得した文字列をキーにしてさらに取得
        for (let oo in Phaser.Math.Easing[o]) {

            //イージングを表示するためのテキスト
            let text = this.add.text(10, 60 * index, o +"."+ oo);
            text.setFontSize(20);
            text.setColor("#1a1a1a")

            //tweenさせるスプライト
            let sprite = this.add.sprite(100, text.y+40, 'block');
            sprite.setScale(0.5);

            //tweenの作成
            let tween = this.tweens.add({

                //tweenを適応させる対象
                targets: sprite,
                //tweenさせる値
                x: 400,
                //tweenにかかる時間
                duration: 3000,
                //tween開始までのディレイ
                delay: 0,
                //tweenのリピート回数（-1で無限）
                repeat: -1,
                //easingの指定
                ease: Phaser.Math.Easing[o][oo],
            });

            index += 1;
        }
    }            

    //キーボードの入力を取得してスクロールさせる
    this.input.keyboard.on('keydown_UP', function (event) {
            this.cameras.main.scrollY -= 10;
    }, this);

    this.input.keyboard.on('keydown_DOWN', function (event) {
            this.cameras.main.scrollY += 10;
    }, this);
}
  

ボールのアニメーションが複数表示されました。

しかし、これではすべてのeasingを表示できていません。

camera.scrollでカメラのスクロール

カメラをスクロールさせて画面外のeasingも確認できるようにします。
Camera.scrollYでカメラを縦方向にスクロールすることができます。
createにキーボードイベントを設定し、camera.main.scrollYの値を変更します。

//キーボードの入力を取得してスクロールさせる
this.input.keyboard.on('keydown_UP', function (event) {
        this.cameras.main.scrollY -= 10;
}, this);

this.input.keyboard.on('keydown_DOWN', function (event) {
        this.cameras.main.scrollY += 10;
},this);

カメラをスクロールさせることができました。
単純にxの値を加算させるtweenでもeasingによって挙動がさまざまに変わることがわかります。