Phaser 3 : depthで重なり順の制御

今回はDepthを使って重なり順を制御してみます。

Depth

Phaser2ではグループそのものとグループ内でのスプライトをソートすることによって重なり順を制御していましたが、Phaser3からはDepthを使って簡単に重なり順制御を行えるようになりました。

まずy座標とDepthを連動させたスプライトを作ります。

for (let i = 0; i < 10; i++) {
    let block= this.add.sprite(300, 100 + i * 32, "block");
    block.setTint(0x111111 * i);
    block.depth = block.y;
}

次にy座標に応じてDepthを変えるプレイヤーオブジェクトを作成します。

create() {
    this.player = this.add.graphics({ fillStyle: { color: 0xaa1111 } });
    this.player.fillRectShape(new Phaser.Geom.Rectangle(280, 0, 40, 40));
~~~
    this.input.keyboard.on('keydown_UP', ()=> {
        this.player.y -= 5;
    });

    this.input.keyboard.on('keydown_DOWN', ()=> {
        this.player.y += 5;

    });

}

update() {
    this.player.depth = this.player.y+20;
}

実行結果がこちらです。

移動しながら重なり順が切り替わっているのがわかると思います。
Phaser2では重ね順に相当する変数を自分でつけてsortを実行する必要があったのですが、phaser3ではdepthを変更するだけで自動で重なり順を変えて描画してくれます。
今回のソースはこちらです。

/// <reference path="../app.ts" />

namespace MyGame {


    export class MyScene1 extends Phaser.Scene {

        //グラフィックオブジェクトを用意
        public player: Phaser.GameObjects.Graphics;

        constructor() {
            super({ key: 'MyScene1', active: false });
        }

        preload() {
            this.load.image("block", "assets/images/block1.png");
        }

        create() {
            this.player = this.add.graphics({ fillStyle: { color: 0xaa1111 } });
            this.player.fillRectShape(new Phaser.Geom.Rectangle(280, 0, 40, 40));

            this.cameras.main.setBackgroundColor(0xffffff);

            for (let i = 0; i < 10; i++) {
                let block= this.add.sprite(300, 100 + i * 32, "block");
                block.setTint(0x111111 * i);
                block.depth = block.y;
            }

            this.input.keyboard.on('keydown_UP', ()=> {
                this.player.y -= 5;
            });

            this.input.keyboard.on('keydown_DOWN', ()=> {
                this.player.y += 5;
            });
        }
        update() {
            this.player.depth = this.player.y+20;
        }
    }
}