Chapter 34

JSON形式でTweenerを定義する【fromJSON】

alkn203
alkn203
2021.09.17に更新

tweener-fromjson

JSON形式でTweenerを定義

JSON形式でTweenerを定義する方法について説明します。

JSON形式でTweenerを定義する

// tweener外部定義
var TWEEN = {
  tweens: [
    ['to', {x: 320, y: 480}, 2000],
    ['to', {y: 900}, 1000],
  ]
};
  • tweensという名前の配列の中に、同じく配列形式でtweenerを追加して定義します。
  • tweensの他にloop: trueとすることで、ループ処理させることができます。

fromJSONでTweenerを設定する

    // JSON形式で指定
    circle.tweener.fromJSON(TWEEN);
    star.tweener.fromJSON(TWEEN);
  • 前もって定義したtweenerfromJSONメソッドで設定します。
  • 複数のオブジェクトに対してtweenerを使いまわすことができます。

サンプルコード

コードを見る
// グローバルに展開
phina.globalize();
// tweener外部定義
var TWEEN = {
  tweens: [
    ['to', {x: 320, y: 480}, 2000],
    ['to', {y: 900}, 1000],
  ]
};
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';

    var circle = CircleShape().addChildTo(this);
    circle.setPosition(this.gridX.span(14), this.gridY.span(2));

    var star = StarShape().addChildTo(this);
    star.setPosition(this.gridX.span(2), this.gridY.span(2));
    // JSON形式で指定
    circle.tweener.fromJSON(TWEEN);
    star.tweener.fromJSON(TWEEN);
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // 実行
  app.run();
});

runstantプロジェクト

https://runstant.com/alkn203/projects/4b00a7a1