プログラミング初心者がphina.jsでゲームを作ります④

在宅さん

今回はManagerSceneを使って作ってみたいと思います。

ManagerScene

ManagerSceneは、名前の通りSceneを管理するクラスです。
今回は自作のManagerSceneを使って、Sceneを推移させます。
まず、デフォルトのManagerを作成します。

phina.define("DefaultManager", {
  superClass: "ManagerScene",
  init: function() {
    this.superInit({
      startLabel:'splash',
      scenes:[
          {
            className: 'SplashScene',
            label: 'splash',
            nextLabel: 'title',
          },
          {
            className: 'TitleScene',
            label: 'title',
            nextLabel: 'main',
          },
          {
            className: 'MainScene',
            label: 'main',
            nextLabel: 'pause',
          },
          {
            className: 'ResultScene',
            label: 'result',
            nextLabel: 'title',
          },
      ]
    });
  },
});

次に、分岐させたいManagerを作成します。
今回はCountScene→PauseSceneの処理を持ったCountManagerを作成します。

phina.define("CountManager", {
  superClass: "ManagerScene",
  init: function() {
    this.superInit({
      startLabel:'count',
      scenes: [
        {
          className: 'CountScene',
          label: 'count',
          nextLabel: 'pause',
        },
        {
          className: 'PauseScene',
          label: 'pause',
        },
      ]
    });
  },
  onfinish:function(){
  this.exit();
  }
});

今回はボタンによってに推移させます。

.onpush=function(){
        main_scene.app.replaceScene(CountManager());
};

以下が全コードになります。

// phina.js をグローバル領域に展開
phina.globalize();

phina.define("DefaultManager", {
  superClass: "ManagerScene",
  init: function() {
    this.superInit({
      scenes:[
          {
            className: 'SplashScene',
            label: 'splash',
            nextLabel: 'title',
          },
          {
            className: 'TitleScene',
            label: 'title',
            nextLabel: 'main',
          },
          {
            className: 'MainScene',
            label: 'main',
            nextLabel: 'pause',
          },
          {
            className: 'ResultScene',
            label: 'result',
            nextLabel: 'title',
          },
      ]
    });
  },
});

phina.define("CountManager", {
  superClass: "ManagerScene",
  init: function() {
    this.superInit({
      startLabel:'count',
      scenes: [
        {
          className: 'CountScene',
          label: 'count',
          nextLabel: 'pause',
        },
        {
          className: 'PauseScene',
          label: 'pause',
        },
      ]
    });
  },
  onfinish:function(){
  this.exit();
  }
});
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    this.backgroundColor = '#444';
    this.label = Label('どちらか押してね').addChildTo(this);
    this.label.x = this.gridX.center();
    this.label.y = this.gridY.center();
    this.label.fill = 'white';
    var main_scene=this;

    var button_count = Button({
          x: main_scene.gridX.center(-4),
          y: main_scene.gridY.span(12),
          width: 150,
          height: 100,
          text: "カウントダウン",
          fontSize: 18,
          fontColor: 'black',
    }).addChildTo(this)
    .onpush=function(){
          main_scene.app.replaceScene(CountManager());
    };

    var button_finish = Button({
            x: main_scene.gridX.center(4),
            y: main_scene.gridY.span(12),
            width: 150,
            height: 100,
            text: "終わり",
            fontSize: 23,
            fontColor: 'black',
    }).addChildTo(this)
    .onpush=function(){
            main_scene.exit();
    };
  },
});
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
        startLabel:'splash',
        scene:DefaultManager(),
  });
  // アプリケーション実行
  app.run();
});

結果とまとめ

今回はMainSceneにボタンを配置し、クリックするボタンによって推移するSceneが変わりました。