Edited at

[phina.js-Tips] JSON形式でTweenerを定義する【fromJSON】

More than 1 year has passed since last update.

※これまでのTipsはphina.js Tips集にまとめています。


今回のTips

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

GIF.gif

[runstantで動作確認]


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();
});