phina.jsで簡単なメニューを作る

メニューと言ってもとても簡単なものです。

完成形

phina.globalize();

var selectNum = 0;

phina.define("MainMenuScene", {
    superClass: 'DisplayScene',
    init: function() {
        this.superInit();
        Label({
            text:"Title",
            fontSize:100,
            x:this.gridX.center(),
            y:this.gridY.span(3),
        }).addChildTo(this);
        this.labels = [];
        this.menuList = [["A",'SceneA'],["B",'SceneB'],["C",'SceneC'],["D",'SceneD']];
        (this.menuList.length).times(function(i){
            this.labels[i] = Label({
                text:this.menuList[i][0],
                fill:'black',
                fontSize:50,
                x:this.gridX.center(),
                y:this.gridY.span(8+i),
            }).addChildTo(this).setOrigin(0.5,0);
        },this);
    },
    update:function(app){
        key = app.keyboard;
        if(key.getKeyDown('up'))if(selectNum>0)selectNum --;
        if(key.getKeyDown('down'))if(selectNum<this.labels.length-1)selectNum ++;
        if(key.getKeyDown('enter'))this.exit(this.menuList[selectNum][1],{selectNum:selectNum});
        (this.menuList.length).times(function(i){
            if(i == selectNum){this.labels[i].fill = 'yellow';this.labels[i].stroke = 'red'}
            else{this.labels[i].fill = 'black';this.labels[i].stroke = 'transparent'}
        },this);
    }
});

phina.define("SceneAScene",{
    superClass:'DisplayScene',
    init:function(){
        this.superInit();
        that = this;
        Label({
            text:"SceneA",
            x:this.gridX.center(),
            y:this.gridY.center(),
        }).addChildTo(this);
        Button({
            text: "Back",
            fontSize:80,
          }
      ).addChildTo(this).setPosition(this.gridX.center(),this.gridY.span(10)).onpush = function(){
        that.exit('MainMenu');    
        };
    }
})

phina.define("SceneBScene",{
    superClass:'DisplayScene',
    init:function(){
        this.superInit();
        that = this;
        Label({
            text:"SceneB",
            x:this.gridX.center(),
            y:this.gridY.center(),
        }).addChildTo(this);
        Button({
            text: "Back",
            fontSize:80,
          }
      ).addChildTo(this).setPosition(this.gridX.center(),this.gridY.span(10)).onpush = function(){
        that.exit('MainMenu');    
        };
    }
})

phina.define("SceneCScene",{
    superClass:'DisplayScene',
    init:function(){
        this.superInit();
        that = this;
        Label({
            text:"SceneC",
            x:this.gridX.center(),
            y:this.gridY.center(),
        }).addChildTo(this);
        Button({
            text: "Back",
            fontSize:80,
          }
      ).addChildTo(this).setPosition(this.gridX.center(),this.gridY.span(10)).onpush = function(){
        that.exit('MainMenu');    
        };
    }
})

phina.define("SceneDScene",{
    superClass:'DisplayScene',
    init:function(){
        this.superInit();
        that = this;
        Label({
            text:"SceneD",
            x:this.gridX.center(),
            y:this.gridY.center(),
        }).addChildTo(this);
        Button({
            text: "Back",
            fontSize:80,
          }
      ).addChildTo(this).setPosition(this.gridX.center(),this.gridY.span(10)).onpush = function() {
        that.exit('MainMenu');    
        };
    }
})

var MyScenes = [
    {
        label: "MainMenu",
        className:"MainMenuScene",
    },
    {
        label: "SceneA",
        className:"SceneAScene",
    },
    {
        label: "SceneB",
        className:"SceneBScene",
    },
    {
        label: "SceneC",
        className: "SceneCScene",
    },
    {
        label: "SceneD",
        className: "SceneDScene",
    }
]

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

Runstantで確認

解説

グローバル変数

selectNumをグローバル変数として宣言することでMainMenuSceneに戻ってきたときに遷移する前に選択していた番号が保持できます。

MainMenuScene

下でphina.mainに定義してあるとおり最初に表示されるシーンです。
this.menuListが二次元配列になってて、それぞれメニューに表示する名前、MyScenesで定義しているラベルの順で入っています。
labelsにはループでメニューリストの名前のラベルを配列として入れてます。配置にはphinaの便利機能、Gridを使っていますが、別に使わなくても全く問題ありません。
updateで上下キーが押されたときにselectNumをインクリメント、もしくはデクリメントしてエンターキーが押されたときにselectNumの値に対応するラベルのシーン(SceneA,SceneB...)に遷移する処理をします。その下にselectNumの値のメニュー項目の色を変え、それ以外の色はもとに戻す処理が続きます。

おわりに

まだまだ基本の段階ですが、phinaはtweenerなどを使えば簡単にアニメーションを実装できるので、もう少し見栄えのいいメニューも作ってみたいと思います。
今回がQiita初投稿となりますので、何かご指摘等あればコメントしてくださると助かります。