phina.jsでUiとゲーム画面をレイヤー分けする

はじめに

ゲームを作っていて、レイヤー分けをしたくてそれに関する記事を探したのですが、見当たらなかったのでtimlib.jsのサンプルを参考にしながら記事を書きました。
参考:timlib.jsレイヤー分け

サンプル

phina.globalize();

phina.define("MainScene",{
    superClass:'DisplayScene',
    init:function(){
        this.superInit();
        this.circleNum = 0;
        this.gameLayer = DisplayElement().addChildTo(this);//レイヤー追加
        this.uiLayer = DisplayElement().addChildTo(this);
        panel = RectangleShape({
            x:this.gridX.span(12),
            y:this.gridY.center(),
            fill:'yellow',
            width:this.gridX.span(6),//grid6つ分の横幅
            height:this.gridY.span(4),
        }).addChildTo(this.uiLayer);
        panel.alpha = 0.5;
        Label({
            text:"gameLayer",
            x:this.gridX.center(),
            y:this.gridY.center(), 
            fontSize:100,
        }).addChildTo(this.gameLayer);

        this.circleNumLabel = Label({
            text:this.circleNum,
            x:this.gridX.span(12),
            y:this.gridY.span(6),
            fontSize:this.gridX.span(1)-10,
        }).setOrigin(0.5,0).addChildTo(this.uiLayer);
        
        Label({
            text:"uiLayer",
            x:this.gridX.span(12),
            y:this.gridY.center(),
        }).addChildTo(this.uiLayer);
    },
    update(app){
        if(app.frame%30 == 0){
            var x = Math.randint(0,640);
            var y = Math.randint(0,960);
            (48).times(function (i) {
                Circle1(x,y, (360 / 48) * i).addChildTo(this.gameLayer);
                this.circleNum++;
            }, this);
        }
        this.circleNumLabel.text = "円の数" + this.circleNum;
    }
})

phina.define("Circle1",{
    superClass:'CircleShape',
    init:function(x,y,dir,){
        this.superInit();
        this.radius = 50;
        this.setPosition(x,y);
        this.direction = dir * Math.DEG_TO_RAD;
        this.movX = Math.cos(this.direction)*10;
        this.movY = Math.sin(this.direction)*10;
    },
    update:function(){
        this.x += this.movX;
        this.y += this.movY;
        if(this.x <= -this.radius*2||this.x >=640+this.radius*2 || this.y <= -this.radius*2 || this.y >= 960+this.radius*2){
            this.parent.parent.circleNum--;//親の親を指定
            this.remove();
        }
    }
});

phina.main(function(){
    var app = GameApp({
        startLabel: 'main',
    });
    app.run();
});

Runstantで確認

解説

this.gameLayer = DisplayElement().addChildTo(this);
this.uiLayer = DisplayElement().addchildto(this);

でそれぞれのレイヤーを定義しています。uiLayerをあとから追加することでgameLayerの上に描画するようにしています。
あとはaddChildTo()で追加する時にthis.gameLayerかthis.uiLayerを指定することでそれぞれのレイヤーに追加できます。もちろん、thisを指定しても問題ありません。この場合、普通に追加したものがレイヤーの追加よりあとだった場合、すべてのレイヤーより上に描画されます。
レイヤー内での描画はレイヤー内での追加の順番で決まります。

子要素ではparentを２つつなげることでDisplaySceneを指定していますが、後々のことを考えるとやめたほうがいいような気もします。

おわりに

これを使ってレイヤー分けすると要素の整理がしやすくなると思います。
しかし、gridは便利ですな〜。