Timelineクラスは非常に強力なアニメーション用ライブラリです。 元々はenchant.jsプロジェクトによって構築されていたものを、jgame.jsに移植しているため、全ての機能はenchant.jsバージョン0.62当時のTimelineクラスと同様です。 より詳しい説明は、enchant.js側のドキュメントを参照するのが良いでしょう。 http://wise9.github.com/enchant.js/doc/core/ja/symbols/enchant.Timeline.html
注意点として、enchant.js側とは異なる点が二つあります。 一つは、sprite.tl.moveByというのがenchant.js側での指定方法ですが、jgame.js側ではsprite.tl().moveByとなります。 ()を忘れないよう注意してください。
もう一つ、重要な変更点として、jgame.jsでは時間単位で動作します。 このため、enchant.jsでよく見られる次のような指定は、jgame.jsでは非常に高速な動作になってしまいます。
sprite.tl().moveBy(100, 100, 10);
これはenchant.jsでは10フレームでx, y座標を10ピクセルずつ移動させる、ですが、jgame.jsでは10ミリ秒で移動させる、になります。 10フレームが30分の1秒の10回分を示しているのであれば、このように記述する事が出来ます。
sprite.tl().moveBy(100, 100, 1000 / 30 * 10);
もっともこの記述方法は冗長なので、enchant.jsからの移行直後はいいかもしれませんが、慣れてきたらミリ秒表記にする事を推奨します。
var timeline = new Timeline(entity); 対象のEクラスのインスタンスを指定して、Timelineクラスのインスタンスを生成します。 この方法は通常推奨されません。本来、Timelineクラスは常にEクラスと1対1の関係であるべきだからです。 通常は、Eクラスのtlメソッドを利用して本クラスのインスタンスを取得してください。 例えばspriteではこのように利用します。
sprite.tl().moveTo(100, 100, 1000);
entity:E; queue:Action[]; paused:bool; looped:bool; _activated:bool; isFrameBased:bool;//※このプロパティはTimeline.prototypeに移行されており、デフォルト値もfalseに変更されています _parallel:ParallelAction;
_deactivateTimeline(force?:bool) { --- _activateTimeline(force?:bool) { --- setFrameBased() { --- setTimeBased() { --- next(remainingTime?:number) { --- tick(t:number) { --- add(action:Action) { --- action(params:any) { --- tween(params:any) { --- clear() { --- skip(frames:number) { --- pause() { --- resume() { --- loop() { --- unloop() { --- delay(time:number) { --- then(func:Function) { --- exec(func:Function) { --- cue(cue:any) { --- repeat(func:Function, time:number) { --- and() { --- waitUntil(func:Function) { --- moveTo(x:number, y:number, time:number, easing?:Function) { --- moveX(x:number, time:number, easing?:Function) { --- moveY(y:number, time:number, easing?:Function) { --- moveBy(x:number, y:number, time:number, easing?:Function) { --- fadeTo(opacity:number, time:number, easing?:Function) { --- fadeIn(time:number, easing?:Function) { --- fadeOut(time:number, easing?:Function) { --- hide() { --- show() { --- scaleTo(scale:number, time:number, easing?:any) { --- scaleBy(scale:number, time:number, easing?:any) { --- rotateTo(deg:number, time:number, easing?:Function) { --- rotateBy(deg:number, time:number, easing?:Function) { --- removeFromScene() { --- resizeTo(size:number, time:number, easing?:any) { Shapeクラスへの利用が想定されているjgame.js用のメソッドです。 scaleToとは異なり、EntityのscaleではなくEntityのwidthとheightを変更します。 scaleは中心を起点に拡大されますが、こちらは単純に横幅と縦幅の操作であるため、左上端を起点に拡大されます。 --- resizeBy(size:number, time:number, easing?:any) { Shapeクラスへの利用が想定されているjgame.js用のメソッドです。 scaleToとは異なり、EntityのscaleではなくEntityのwidthとheightを変更します。 scaleは中心を起点に拡大されますが、こちらは単純に横幅と縦幅の操作であるため、左上端を起点に拡大されます。 --- frame(wait:any, frame?:number[]) { Spriteクラスへの利用が想定されているjgame.js用のメソッドです。 一定時間後にそのSpriteのフレームを切り替えます。 第一引数にフレームをnumber[]形式で指定すると、すぐにフレームを切り替えます。 第一引数にnumber、第二引数にフレームをnumber[]形式で指定すると、第一引数ミリ秒間後に第二引数のフレームに切り替えます。 --- fno(wait:number, fno?:number) { Spriteクラスへの利用が想定されているjgame.js用のメソッドです。 一定時間後にそのSpriteのフレーム番号を切り替えます。 第一引数にフレーム番号を指定すると、すぐにフレームを切り替えます。 第二引数にフレーム番号を指定すると、第一引数ミリ秒間後に第二引数のフレーム番号に切り替えます。 ---
enchant.jsからの移行に当たって、以下の作業を行っています。 1. isFrameBasedのデフォルト値をfalseに変更 2. isFrameBasedをインスタンス変数ではなくprototype変数に移行 3. nextメソッド内でthis.queue.shiftの戻り値がundefinedの場合、nextの処理を中断する 4. nextメソッド内でthis.queue.length === 0でも、loopedフラグが立っている場合loopedフラグによる繰り返し処理を優先する 5. E.tlをデフォルトで作成しない理由はEntityクラス生成速度を最低限にする方針のため(+アクセサプロパティを使わないという方針のため) 6. EventTargetのパターンは破棄し、全てTriggerでのイベント処理に変更。Action、Tween、ParallelActionを含む 7. TweenではいくつかdrawOption関係の修正があったため、TWEEN_DRAW_OPTION_SETTERSを用いた特殊セッター処理を追加 8. nodeのenterFrameを利用していないため、Eクラス解放時にTimelineが動き続ける問題が起こるのを防ぐため、EクラスのdestroyにてTimelineを明示的に破壊するよう修正 9. 未実装と思われる or, doAll, waitAll, waitを削除 10. waitUntilのコールバック関数でactionStartを実行しないように改変 11. waitUntilのコールバック関数で経過時間を受け取れるように修正 12. waitUntil→thenの順で実行した場合、thenが無限ループになる不具合を修正 13. resizeTo, resizeByを追加 14. frame, fnoを追加