プログラミング初心者がphina.jsでゲームを作る②

在宅さん

前回の記事でphina.jsをダウンロードしてみました。
今日は続きになります。

前回は、テンプレートのindex.htmlに触れたのですが、今回はもう一つのファイルのmain.jsを見ていきたいと思います。

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

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.x = this.gridX.center(); // x 座標
    this.label.y = this.gridY.center(); // y 座標
    this.label.fill = 'white'; // 塗りつぶし色
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
  });
  // アプリケーション実行
  app.run();
});

まず最初の

phina.globalize();

ですが、これを入れるとクラスを使う時にクラス名を短縮できるみたいです。
（ほかにもあるようですが、、、おいおい勉強します。）
GameApp({..で生成したものをrun();で実行できます。
また、startLabelで最初に表示するSceneを指定できます。

// MainScene クラスを定義
phina.define('MainScene', {
superClass: 'CanvasScene',
init: function() {
this.superInit();
// 背景色を指定
this.backgroundColor = '#444';
// ラベルを生成
this.label = Label('Hello, phina.js!').addChildTo(this);
this.label.x = this.gridX.center(); // x 座標
this.label.y = this.gridY.center(); // y 座標
this.label.fill = 'white'; // 塗りつぶし色
},
});

ここでは、MainSceneというクラスを作成しています。
MainSceneクラスはphina.jsでLabel名をmainとしているので、MainSceneクラスから実行されます。(この辺は自由に変えられそうです）