お品書き

• 01 Tweenクラスによるトゥイーンアニメーション
• 02 Tweenクラスのトゥイーンを最適化する
• 03 Jugglerクラスの実装を見る

F-site連載「Starlingフレームワークを用いたStage3Dによる2Dアニメーション」第4回「StarlingフレームワークのTweenクラスにおける最適化とJugglerクラスの実装」をおもなお題として、関連するネタにも触れる。なお、勉強会のUSTREAM映像が「Stage3D勉強会(第3回) 活動レポート」で公開されている。

01 Tweenクラスによるトゥイーンアニメーション

01-01 Tweenクラスは3つの手順でトゥイーンを定める

Tweenクラスでトゥイーンアニメーションを定める手順は3つ(「Tweenクラスで簡単なトゥイーンアニメーションを定める」参照)。

1. Tweenインスタンスをつくる。
2. トゥイーンを定める。
3. Jugglerに加える。

「3つのTweenオブジェクトのトゥイーンを順にアニメーションさせる」サンプルのトゥイーンを定めるメソッド抜書き。

Tweenクラスのトゥイーンを定めるメソッドについては、「複数のプロパティをトゥイーンする」参照。

01-02 イベントをコールバック関数で扱う

「EaselJSのつぎのバージョンにEventDispatcherクラスが加わる」のに……。

【イベントリスナー】

• インスタンスの同じイベントに、リスナー関数がいくつでも加えられる
• 柔軟で拡張性がある

【コールバック関数】
• インスタンスの同じイベントに、コールバック関数はひとつ(上書きされる)
• 制限内なら無駄がないので速い

参考: Adobe Flash Platform「イベントモデルとコールバック」(再邦訳は「Jugglerオブジェクトに加えたインスタンスはadvanceTime()メソッドが呼ばれる」[*3]参照)

01-03 Jugglerクラスは加えられたオブジェクトのadvanceTime()メソッドを呼出す

Juggler.add()メソッドでオブジェクトを加えると、Juggler.advanceTime()メソッドでオブジェクトのadvanceTime()メソッドが呼出される。

1. Juggler.add()メソッドでオブジェクトを加える
2. Juggler.advanceTime()メソッドを呼出す
3. オブジェクトのadvanceTime()メソッドが呼出される

Starling.jugglerプロパティで参照されるJugglerオブジェクトは、内部的にFlash PlayerからEvent.ENTER_FRAMEイベントを受取って、Juggler.advanceTime()メソッドを呼出している。

Starling.juggler.add(Tweenオブジェクト)

ただし、Jugglerオブジェクトに加えるには、IAnimatableインターフェイスが実装されていなければならない。IAnimatableインターフェイスを実装するサンプルは、「Jugglerオブジェクトでインスタンスをアニメーションさせる」参照。

02 Tweenクラスのトゥイーンを最適化する

02-01 Tween.reset()メソッドでオブジェクトを使い回す

Tween.reset()メソッドは、Tweenオブジェクトを初期化して設定し直す。

Tweenオブジェクト.reset(インスタンス, 時間, イージング)

引数はコンストラクタと同じ。

new Tween(インスタンス, 時間, イージング)

というか、Tween()コンストラクタの実装はTween.reset()メソッドを呼ぶだけ。

前掲スクリプト001は、つぎのようにTween.reset()メソッドを使うと、Tweenオブジェクトが使い回せてお得(クラス定義全体は「ひとつのTweenオブジェクトを使い回して順にトゥイーンアニメーションさせる」)。

private var myTween:Tween; // ...[中略]... private function setTween():void {   if (myTransitions.length) {     var myTransition:String = myTransitions.shift();     // var myTween:Tween = new Tween(instance, 7, myTransition);     if (myTween) {       myTween.reset(instance, 7, myTransition);     } else {       myTween = new Tween(instance, 7, myTransition);     }     // トゥイーンの設定     myTween.onComplete = setTween;     Starling.juggler.add(myTween);     // ...[中略]...   } else {     myTween = null;   } }

02-02 3つの手順が1ステートメントで済むJuggler.tween()メソッド

Starlingフレームワーク1.3で備わったJuggler.tween()メソッドを使うと、トゥイーンを定める3つの手順が1ステートメントで済む(「Jugglerクラスの新たなメソッドでトゥイーンを加える」参照)。

Jugglerオブジェクト.tween(インスタンス, 時間, トゥイーンを定めるObject)

今までトゥイーンを定めるために何行も書いていたステートメント(前掲スクリプト001)。

var myTween:Tween = new Tween(instance, 7, myTransition); myTween.moveTo(positions[i], instance.y); myTween.fadeTo(ratio); myTween.scaleTo(ratio); myTween.animate("rotation", radians[i]); myTween.onComplete = setTween; Starling.juggler.add(myTween);

それが、Juggler.tween()メソッドを使えば、たった1ステートメントに!!

Starling.juggler.tween(instance, 7, {   transition:myTransition,   x:positions[i],   alpha:ratio,   scaleX:ratio,   scaleY:ratio,   rotation:radians[i],   onComplete:setTween });

しかも、誰に定める設定なのかを見分けてくれる優れもの！

• Tweenオブジェクトのプロパティ
• transition
• Tweenオブジェクトのイベント
• onComplete
• トゥイーンするオブジェクトのプロパティ
• x
• alpha
• scaleX/scaleY
• rotation

でも、オブジェクトを使い回さないと、(負荷が)お高いんでしょ……？

なんと！何もしなくても、Tweenオブジェクトが使い回される!!

前掲スクリプト001は、Juggler.tween()メソッドを使ってつぎのように書替えられる。

03 Jugglerクラスの実装を見る

03-01 Juggler.tween()メソッド

「StarlingフレームワークのJuggler.tween()メソッド」の「実装」参照(GitHub「Juggler.as」)。

03-02 Juggler.add()とJuggler.advanceTime()メソッド

「Jugglerオブジェクトに加えたインスタンスはadvanceTime()メソッドが呼ばれる」参照。

03-03 Starling.jugglerプロパティで参照されるJugglerオブジェクト

「Starlingオブジェクトに備わるJugglerオブジェクト」参照。

作成者: 野中文雄
更新日: 2013年2月21日「Stage3D勉強会(第3回) 活動レポート」へのリンクを追加。
作成日: 2013年2月12日