Chapter 44

JSON形式でオブジェクトを追加する【fromJSON】

alkn203
alkn203
2021.09.18に更新

fromjson

JSON形式でオブジェクトを追加

JSON形式で定義されたオブジェクトをSceneに追加する方法について説明します。

fromJSONメソッド

通常オブジェクトを追加する時には、addChildToメソッドを使いますが、phina.jsではJSON形式でオブジェクトを追加することもできます。固定して動かさない部品を配置する時などにスッキリ書けて便利です。

this.fromJSON({
  "children": {
    "label": {                  //キー名が追加する子要素の名前になる
      "className": "Label",     //クラス
      "arguments": ['hello!'],  //初期化時の引数
      "x": 320,                 //その他プロパティ
      "y": 480,
      "fill": "white"
    },
    "button": {
      "className": "Button",
      "text": "Push Me",
      "x": 320,
      "y": 600
    }
  },
});
  • childrenの次の階層が変数名になります。
  • classNameにはクラス名を指定します。
  • argumentsにはコンストラクタに与える引数を配列で定義します。

サンプルコード

コートを見る
// グローバルに展開
phina.globalize();
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // 以下にコードを書いていく
    this.fromJSON({
      "children": {
        "label": {                  //キー名が追加する子要素の名前になる
          "className": "Label",     //クラス
          "arguments": ['hello!'],  //初期化時の引数
          "x": 320,                 //その他プロパティ
          "y": 480,
          "fill": "white"
        },
        "button": {
          "className": "Button",
          "text": "Push Me",
          "x": 320,
          "y": 600
        }
      },
    });
    
    var self = this;
    // ボタンプッシュ時処理
    this.button.onpush = function() {
      self.label.text = 'world!';    
    };
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // fps表示
  //app.enableStats();
  // 実行
  app.run();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/1a47fc9d