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を追加