1. alkn203

    Posted

    alkn203
Changes in title
+[phina.js-Tips] Tweenerで複数の処理を並行して適用する【attachTo】
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,68 @@
+※これまでのTipsは[phina.js Tips集](http://qiita.com/alkn203/items/bca3222f6b409382fe20)にまとめています。
+
+## 今回のTips
+**Tweener**で複数の処理を並行して適用する方法について説明します。
+
+![tweener_attach.gif](https://qiita-image-store.s3.amazonaws.com/0/67114/8848bf12-bea3-97da-45bb-66e3b308dd5e.gif)
+
+<a href="http://runstant.com/alkn203/projects/78cfbf95" target="_blank">[runstantで動作確認]</a>
+
+### attachToメソッド
+
+```js
+ // 直進
+ 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**を作成してそれぞれをオブジェクトにアタッチすることで、並行処理を実現しています。
+
+## サンプルコード
+
+```js
+// グローバルに展開
+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();
+});
+```