Kawanet Blog II

アクセスカウンタ

help RSS KTween - 軽量AS3用Tweenエンジンを公開!Tweenerより高速。モバイルに最適

<<   作成日時 : 2010/02/15 11:30   >>

ナイス ブログ気持玉 26 / トラックバック 0 / コメント 0

ActionScript 3.0 用のシンプル・軽量な Tween エンジンを開発しました。
スマートフォンなどモバイルコンテンツ向けのアプリ開発にも最適なライブラリです。
ソースコードは、Google Code で公開 しています。
MIT ライセンスなので、無料で利用いただけます。

サンプルコード

import net.kawa.tween.KTween;
import net.kawa.tween.easing.*;

public function run():void {
    KTween.to(mySprite, 2, {alpha: 0.0}, Linear.easeOut, callback);
    KTween.from(mySprite, 3, {x:320, y;480}, Quad.easeOut).round = true;
}

TweenMax みたいなお手軽なto()、from()、fromTo() のワンライナー以外に、OO っぽい書き方にも対応しています。

主な特長

  • ActionScript 3.0 専用。Flash 9/10 以降に対応。
  • シンプルな構成です。ソースコードが短くて分かりやすく、ファイル容量も少ない。
  • Quant.easeOut など、一般的な easing のトランジションを搭載しています。詳細はこちら
  • Tweener より格段に速く、GTween よりも速い。BetweenAS3TweenNano と同等〜少し速い。
  • KTween の各オプションは AS3 の型チェックが効いて開発時に安心です。


詳しいドキュメントや、ダウンロードは Google Code を参照してください:
http://code.google.com/p/kawanet/wiki/KTweenJ

Tweener より18.9%高速


参考に、AS 向け Tween ライブラリ 5 種類を並べてベンチマークを取ってみたところ、
『Tweener より18.9%高速』という結果が出ました。
既存のアプリを書き換えてでも乗り換えるべき!というほどの差ではありませんが、
今後、開発されるアプリでは、ご検討ください。


6秒間で、2,000個のオブジェクトを tween します。(ソースコードは こちら
それぞれ3回ずつ試行したフレームレートの平均値です。(値が大きいほど速い)


今回は、Core 2 Duo 2.26GHz の環境で、Mac のスタンドアローン版の Flash Player 10.0.22.87 を利用しました。
なお、ベンチマークの結果は環境によっても異なるので、相対的な速度比較の参考として。

EngineFPS
KTween27.19 fps
BetweenAS326.77 fps
TweenNano26.70 fps
GTween26.38 fps
Tweener22.87 fps

各エンジンの感想など


KTween は、先月の週末に半日くらいかけてフルスクラッチで作ってみました。
実際にアプリで使ってみていますが、今のところ大きな問題は出ていません。
easing のラインナップを揃えたり、Trick7 と Taquo から API のアドバイスをもらって
後日、機能を追加していますが、KTween のソースコードは全てオリジナルです。
easing 関数のソース中に、7.5625 とか 0.984375 みたいな定数も使っていません。

KTween を開発した後に、ベンチマークを取るために各ライブラリを確認しました。

まず、BetweenAS3(FP10 バージョン)は、かなり高速なのでオススメ。
さすが yossy 謹製。KTween を開発する前にベンチマークを取っていたら、
車輪の再発明をせずに BetweenAS3 を使ってたと思います。

ただし、綺麗に OO していて柔軟な構造なので、クラス数(.as ファイル数)が多い。
ソースを読んでみても、いったいどうやって tween しているのか理解できない魔法の世界。
ちなみに KTween の コアなクラスは 3 つだけ です。シンプルなので、読める範囲。

TweenNano〜TweenMax シリーズ も結構、高速なようです。
英語ページを読んで、ライセンスに問題なければオススメ。(Club って何なんですか?)

僕ももともと、TweenLite を使っていたので、KTween の API も参考にさせてもらいました。 
KTween も当初は BetweenAS3・TweenNano より少し実行速度が遅かったのですが、
TweenNano の仕組みを参考に、型宣言を強化したところ、より速くなりました。
具体的には、from・to の無名オブジェクトの各プロパティは型宣言されないので、
tick (step) の度に毎回 Number() 型変換するんじゃなくて、初回にやるのが肝。
あと、毎回、hash[key] のハッシュ値を検索するのも負荷が高い。
 
GTween は比較的新しいらしいので期待していたけど、あんまり速くなかった
(のでよく見てません、すみません)。
 
Tweener は日本語の情報も多くて利用事例も多そうだけど、ついに、AS2 時代の名残りが、
そろそろ問題になってくるので、残念ながら、今後はあまりオススメできないと思います。

まず、無名オブジェクト(ハッシュ)にいろいろなプロパティを突っ込むという仕様も、
せっかく AS3 なのにコンパイル時の型宣言チェックが効かず、開発作業上痛いです。 
特に「.swf (ABC) を直接実行せずに、予め arm とかネイティブのバイナリにコンパイルして
アプリを実行するような環境」の場合、型宣言の有無が、実行速度にもろに影響してきます。
ソースコードの時点で変数の型宣言がしっかりしていないとコンパイラの時点で型が決まらず、
全く実行速度が出ません。つまり、Tweener を使うとフレームレートがかなり落ちます。
 

結論


AS2 な FlashLite なモバイル環境でなくて、例えば、どこかのスマートフォンとかで、
「Flash Player は提供されないけどコンパイラが提供される環境」向けのアプリでは、
Tweener は実用的な速度で利用できないので、これまで Tweener を使っていた方は、
今から乗り換え先エンジンを探しておく必要があります。
BetweenAS3 に加えて、KTween も選択肢にどうぞ。
もちろん、モバイル向けに限らず、PC 向けコンテンツにもご利用いただけます。

プラグイン機構について


TweenMax はプラグインが豊富なのに対し、KTween はプラグインはありません。
試しに、プラグインとかプロキシっぽい構成も作ってみたけど、結局、複雑になってしまい
汎用化するとかえって遅くなりそうで、いったんはやめてしまいました。
シンプルに onChange コールバック関数を自前で書く方が早いし、速い。
KTween では、1行で済ませることよりも、シンプル重視で行くことにしました。
 
例えば、transform (ColorTransform) や filters(resetBlurFilter 等)を使う場合は
単純な x, y の tween とは違って、自前の onChange コールバック関数を書く必要があります。
とはいえコールバック関数自体のコードは、大抵は1行で済むので、サンプル集が揃っていれば
そう難しくないと思うので、サンプルコードを追加したいですね。(参考
net.kawa.tween.util パッケージ にヘルパー関数を少し用意してあります。

また、onComplete 時の autoHide とか removeFromParent 的な機能がないので、
これも個別にコールバック関数を書くべきか、これくらいは何かプラグイン的な対応を
用意した方がいいのか、検討中です。

TODO


・.as ソースじゃなくて、.swc 版も配布したい。
・「KTween くん」みたいなゆるキャラか、ロゴ画像を募集中です。
・Wonderfl 採用を狙う。

ご意見・ご感想をお待ちしております!

テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 26
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス
驚いた 驚いた 驚いた 驚いた 驚いた 驚いた 驚いた
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
面白い

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(0件)

内 容 ニックネーム/日時

コメントする help

ニックネーム
本 文
KTween - 軽量AS3用Tweenエンジンを公開!Tweenerより高速。モバイルに最適 Kawanet Blog II/BIGLOBEウェブリブログ
[ ]