phina.jsで画面サイズを変更するときに失敗したのでメモ

phina.jsで画面サイズを変えようとした

公式サイトのサンプルをいじって画面サイズを大きくしようとして失敗

main.js

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

//サイズ指定用の定数
var SCREEN_X = 1200;
var SCREEN_Y = 1200;

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    this.superInit();
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.fill = 'white'; // 塗りつぶし色
    //マウスに追従させる
    this.label.update = function(app){
      this.x = app.pointer.x; // x 座標
      this.y = app.pointer.y; // y 座標
    };
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
    //ここでscreenのサイズを変更 ここはOK
    width: SCREEN_X,
    height: SCREEN_Y,
  });
  // アプリケーション実行
  app.run();
});

Runstartで実行

これを実行すると、画面が途中で途切れてしまいます

修正する

調べてみると、Sceneにもサイズの設定があるらしく、initで初期化するときに渡される引数をsuperInit()にそのまま渡せばSceneの設定ができるようです

上記のソースから、MainSceneクラスを定義する部分を抜粋

main.js

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function(option) {    //ここにoptionを追加
    this.superInit(option);   //こっちにも
    // 背景色を指定
    this.backgroundColor = '#444';
    // ラベルを生成
    this.label = Label('Hello, phina.js!').addChildTo(this);
    this.label.fill = 'white'; // 塗りつぶし色
    //マウスに追従させる
    this.label.update = function(app){
      this.x = app.pointer.x; // x 座標
      this.y = app.pointer.y; // y 座標
    };
  },
});

Runstartで実行
これで画面が途切れなくなりました。