JavaScript
HTML5
ライブラリ
ゲーム制作
phina.js

[phina.js-Tips] Tweenerで複数の処理を並行して適用する【attachTo】

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

今回のTips

Tweenerで複数の処理を並行して適用する方法について説明します。

tweener_attach.gif

[runstantで動作確認]

attachToメソッド

    // 直進
    var tween1 = Tweener().to({y: 1024}, 10000);
    // 回転
    var tween2 = Tweener().by({rotation: 360}, 1000)
                          .setLoop(true);
    // 2つのtweenerをアタッチ                      
    tween1.attachTo(star);
    tween2.attachTo(star);
  • Tweenerは、Accessoryというクラスを継承していますので、オブジェクトにアタッチすることもできます。
  • 上のような例では、通常updateを併用をする必要がありますが、2つのtweenerを作成してそれぞれをオブジェクトにアタッチすることで、並行処理を実現しています。

サンプルコード

// グローバルに展開
phina.globalize();
/*
 * メインシーン
 */
phina.define("MainScene", {
  // 継承
  superClass: 'DisplayScene',
  // 初期化
  init: function() {
    // 親クラス初期化
    this.superInit();
    // 背景色
    this.backgroundColor = 'black';
    // スター
    var star = StarShape().addChildTo(this);
    star.setPosition(this.gridX.center(), 0);
    // 直進
    var tween1 = Tweener().to({y: 1024}, 10000);
    // 回転
    var tween2 = Tweener().by({rotation: 360}, 1000)
                          .setLoop(true);
    // 2つのtweenerをアタッチ                      
    tween1.attachTo(star);
    tween2.attachTo(star);
  },
});
/*
 * メイン処理
 */
phina.main(function() {
  // アプリケーションを生成
  var app = GameApp({
    // MainScene から開始
    startLabel: 'main',
  });
  // 実行
  app.run();
});