Tween24 ver.1.0.1 First Impression

2012.01.20kickbaseActionScript3.0


突然ですが皆さん、Tweenライブラリは何を使っていますか?Tweener,Tweensy,TweenMax,KTween,eaze-tween,BetweenAS3…パッと思いつく限り、かなりの数にのぼります。用途、使用法の好み、ライセンス、実効速度やファイルサイズなど、ケースバイケースで使い分けている方もいれば、お気に入りのエンジン1本を使い続けている方もいることでしょう。

僕はというと、様々なエンジンをひと通り試してはみましたが、最も慣れ親しんでいるTweenerをメインに使用していました。しかし、Tweenerは開発終了してから久しいエンジンであること、実効速度が他と比べると遅い( シビアな局面以外ではそこまで気にする程でもないにせよ )こともあり、本命に出会えたら移行しようと常々思っていました。

今回の記事は、そんな移行をためらっている方々にオススメな、国産多機能TweenライブラリであるTween24についてです。

本ライブラリはAtsushi Kaga氏によって開発されており、MITライセンスにて公開されています。メリットや使用法についてはこちらにて開発者様自身によって詳細に解説されています。僕個人が特に素晴らしいと思ったのは下記の点です。

  • メソッドチェーンによるコーディングスタイルのため、コード補完を最大限に利用した高速な入力が可能
  • ライブラリの構造、使用法が非常に簡潔になっており、学習コストが低い( コード補完によって自己説明的な作りになっている )
  • トゥイーンの直列/並列実行を標準でサポートしており、非常に柔軟なモーションが可能
  • 表示リストの制御やイベント連動処理など、Tweenライブラリの枠を超えた機能を搭載
  • 個人的には直列/並列実行のサポートが特に有用で、今まで自作のコマンドパターンライブラリで制御していた実装も、Tween24のおかげでかなりスマートに書けるようになりました。Tween24は上記ポイントにある通り非常に多機能なため、僕自身まだまだ使用法や作法を完全に追いきれていないのですが、使わせていただいた上で発見したバグ( ? )や疑問点について記載したいと思います。

    [ご注意]
    本記事はTween24 バージョン1.0.1を使用してのものとなります。また、ライブラリのバグではなく僕の使用法や考え方に間違いも含んでいるかもしれません。
    次回以降のバージョンアップによってバグフィックスされた場合はその旨追記していくつもりですが、追記の対応が遅れる場合もあるかと思います。ご容赦下さい。

    [ 2012.02.20加筆 ]
    製作者であるAtsushi Kaga氏よりご助言いただいた箇所を加筆しました。この場を借りてお礼申し上げます。

    ※検証用コードはこちらからダウンロードできます

    01:変数格納時の挙動について
    変数(tween)に格納した場合、直列実行時に2回目(以降)が再生されない

    OK

    Tween24.serial(
    	Tween24.serial(
    		Tween24.prop(_square).$x(0),
    		Tween24.tween(_square, 3).x(600)
    	),
    	Tween24.serial(
    		Tween24.prop(_square).$x(0),
    		Tween24.tween(_square, 3).x(600)
    	)
    ).play();
    

    NG

    var tween:Tween24 = Tween24.serial(
    	Tween24.prop(_square).$x(0),
    	Tween24.tween(_square, 3).x(600)
    );
    			
    Tween24.serial(
    	tween,
    	tween //これが再生されない
    ).play();
    

    [ 2012.02.20加筆 ]
    serial/parallel内で同一のトゥイーンを複数回再生することはできないので、今回のように同じ動作を連続させて再生したい場合は、Tween24.loop() を使用するのが良いとのことです。

    var tween:Tween24 = Tween24.serial(
    	Tween24.prop(_square).$x(0),
    	Tween24.tween(_square, 3).x(600)
    );
    
    Tween24.serial(
    	Tween24.loop(2, tween)
    ).play();
    

    02:id/group
    コンプリートイベントの発行タイミングがおかしい?
    直列実行中、最後のplayById( playByGroup )が実行開始された時にコンプリートイベントが発行されている気がします

    Tween24.serial(
    	Tween24.prop(_square).$x(0),
    	Tween24.tween(_square, 3).x(600)
    ).id("box1");
    
    Tween24.serial(
    	Tween24.playById("box1"),
    	Tween24.wait(1),
    	Tween24.pauseById("box1"),
    	Tween24.wait(1),
    	Tween24.playById("box1"),
    	Tween24.wait(1),
    	Tween24.stopById("box1"),
    	Tween24.wait(2),
    	Tween24.traceLog("before playById"),
    	Tween24.playById("box1"), //playByIdの終了を待たずに次のtraceLogが実行されてしまっている?
    	Tween24.traceLog("after playById")
    ).play();
    

    [ 2012.02.20加筆 ]
    playById( playByGroup ) はトゥイーンを再生させるだけ機能なので、即時コンプリートする仕様とのこと。Tween24.getTweenById() を代わりに使用することで、想定されている動作をさせることができるそうです。

    Tween24.serial(
    	Tween24.prop(_square).$x(0),
    	Tween24.tween(_square, 3).x(600)
    ).id("box1");
    
    Tween24.serial(
    	Tween24.playById("box1"),
    	Tween24.wait(1),
    	Tween24.pauseById("box1"),
    	Tween24.wait(1),
    	Tween24.playById("box1"),
    	Tween24.wait(1),
    	Tween24.stopById("box1"),
    	Tween24.wait(2),
    	Tween24.traceLog("before playById"),
    	Tween24.getTweenById("box1"),
    	Tween24.traceLog("after playById")
    ).play();
    

    03:pauseByTarget – エラーハンドリング
    ターゲットがTweenしていない時にpauseByTargetメソッドが実行された時、エラーが出るのは仕様でしょうか?
    ※stopByTargetを同様の条件で複数実行してもエラーは出ませんでした

    //下記イベントリスナ解除をせず複数クリックすると[Fault] exception, 情報=TypeError: Error #1009エラーが発生します。
    //つまりターゲットがTweenしていない時はエラーが出る。
    stage.removeEventListener(MouseEvent.CLICK, onClick);
    Tween24.pauseByTarget(_square).play();
    

    上記を踏まえて下記コードで対応しているのですが、これが正しい作法でしょうか?

    Tween24.ifCaseByProp(_tween, "playing", Tween24.pauseByTarget(_square)).play();
    

    [ 2012.02.20加筆 ]
    次期バージョンで修正対応いただけるとのことです。

    04:pauseByTarget – 配列
    配列をターゲットにpauseByTargetを実行した時下記エラーが発生する
    [Fault] exception, 情報=TypeError: Error #1009: null のオブジェクト参照のプロパティまたはメソッドにアクセスすることはできません。
    ※stopByTargetで同様に配列をターゲットにした場合、エラーは出ませんでした

    Tween24.pauseByTarget(_arr).play(); //Error
    

    [ 2012.02.20加筆 ]
    次期バージョンで修正対応いただけるとのことです。

    05:pauseByTarget – 直列/並列処理
    Tween24.serial/parallelメソッド内で実行されたトゥイーンがpauseByTargetメソッドで一時停止できません。
    ※stopByTargetは直列/並列処理内で実行されたトゥイーンも停止する事が可能でした

    Tween24.serial(
    	Tween24.tween(_square, 4).x(600)
    ).play();
    			
    /*
    Tween24.parallel(
    	Tween24.tween(_square, 4).x(600)
    ).play();
    */
    
    Tween24.pauseByTarget(_square).play(); //一時停止されない
    

    [ 2012.02.20加筆 ]
    基本的に、Tween24.serial/parallelメソッド内の子トゥイーンに対して pause や stop といった操作は非推奨とのこと。現段階では pause は、一番親のトゥイーンに対してのみ有効だそうです。

    06:stopByTarget – ターゲットの複数指定
    ASDocでは引数に複数のターゲットを指定可能と記載されていますが、
    1.配列に対してトゥイーン
    2.任意のメンバに対してstopByTarget
    ができないように思えます。これは仕様でしょうか?

    Tween24.tween(_arr, 4).x(600).play();
    
    Tween24.stopByTarget(_arr[0], _arr[1]).play(); //全ての配列メンバが停止してしまう
    

    [ 2012.02.20加筆 ]
    stopByTarget は指定されたターゲットが関連しているトゥイーンを全て停止する機能だそうです。
    今回の場合「複数のターゲットを1つのトゥイーンで制御しているため、stopByTargetでターゲットを1つだけ指定したとしても元のトゥイーンが止まってしまい、その結果指定していないターゲットも止まる」という挙動になっているそうです。

    07:イベント連動トゥイーン
    発現条件は不明ですが、下記操作で時折不可解な挙動をすることがありました
    1.四角形(ターゲット)をクリック
    2.EventTween24.onClickイベントハンドラ実行中にロールアウトする
    3.EventTween24.onClickイベントハンドラ完了後(多分)、ターゲットが透明に→再び表示という挙動をすることがあります

    // RollOver
    EventTween24.onRollOver(_square,
    	Tween24.parallel(
    		Tween24.tween(_square, 0.4, Tween24.ease.SineOut).bright(0.5)
    	)
    );
    
    // RollOut
    EventTween24.onRollOut(_square,
    	Tween24.parallel(
    		Tween24.tween(_square, 0.4).bright(0),
    		Tween24.tween(_square, 0.5, Tween24.ease.ElasticOut).scale(1)
    	)
    );
    
    // Click(下記並列処理を実行中にロールアウトすると、[ターゲットが一定時間消える→最表示される]時がある)
    EventTween24.onClick(_square,
    	Tween24.parallel(
    		Tween24.prop(_square).scale(1).rotation(0),
    		Tween24.tween(_square, 0.5, Tween24.ease.ElasticOut).scale(1.5),
    		Tween24.parallel(
    					Tween24.tween(_square, 0.8, Tween24.ease.ExpoInOut).rotation(180),
    					Tween24.tween(_square, 0.5, Tween24.ease.ExpoOut).scale(1).delay(0.6)
    		)
    	)
    );
    

    [ 2012.02.20加筆 ]
    高速でOver/Outを繰り返した際に、Overのトゥイーンが走った後にOutの子トゥイーンが割り込んでしまっているのが原因だったようです。
    次期バージョンで修正対応いただけるとのことです

    実際に使用してからあまり時間が経っていないので、Tween24の作法やロジックに慣れていない点もあるかと思いますが、非常に使い勝手がよく可能性を感じるライブラリでした。開発者であるAtsushi Kaga氏に感謝しながら、ガンガン使わせて頂きたいと思います。

    サンプルのダウンロード

    参考サイト

    package a24
    メソッドチェーンでスラスラ書ける!AS3トゥイーンライブラリ「Tween24」 « package a24
    にゃあプロジェクト – 猫たちは生きています!( Tween24での検索結果 )


    ページトップへ