Bookmark this on Hatena Bookmark
Hatena Bookmark - animation.enchant.js v0.1 公開
Share on Facebook
Post to Google Buzz
Bookmark this on Yahoo Bookmark
Bookmark this on Livedoor Clip
Share on FriendFeed

本日、公式プラグイン animation.enchant.js のベータ版をリリースしました。このプラグインの機能は将来的に enchant.js 本体に組み込まれる予定です。

ダウンロードは github からどうぞ。

animation.enchant.js はアニメーションキューの機能を追加します。v0.1では、アニメーションキューを組み込んだSpriteクラス:AnimationSprite クラスを呼び出すことによって利用できます。

単にトゥイーンライブラリとして、たとえば「ある場所にSpriteを簡単に移動させたり」「フェードアウト/インしたり」「視覚処理を付けて、ぬるっと移動・拡大縮小させたり」することができるだけではなく、ある処理にディレイをかけたり、処理の前後に自由に関数を実行したりすることもできます。

サンプルは以下の通りです。赤いスプライトをクリックすると、キューに様々なアニメーションが追加され、実行されます。

animation.enchant.js サンプル – jsdo.it – share JavaScript, HTML5 and CSS

トゥイーンの追加

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    rotation: 360,
    scaleX: 2,
    scaleY: 2,
    time: 30
});

回転しながら拡大し、大きくなる。
(bear.rotation は bear オブジェクトの回転角度、bear.scaleX, scaleY は縮尺を表します。上記のコードで実行している addTween メソッドで、bear のキューに30フレームかけて rotation, scaleX, scaleY を変化させるアクションを追加しています)

トゥイーンは、x, y, scaleX, scaleY, opacity(不透明度), rotation などのプロパティだけではなく、どんなプロパティでも自由に変化させるすることができます。

但し、時間を指定する time のほか、onload、callbackなど、指定することでトゥイーンを拡張できるプロパティもあります。

  • time: トゥイーンが終了するまでのフレーム数(必須)
  • onload: トゥイーンが始まったときに実行される関数
  • callback: トゥイーンが終わったときに実行される関数

onload, callback は指定されていない場合は実行されません。

イージング

イージングとは、プロパティの値の変化を単に直線的に行うのではなく、数式に従って様々な効果を付けることを指します。例えば変化がだんだんと加速するような効果、端でバウンドするような効果をつけることができます。

enchant.Easing のプロパティとして、デフォルトのイージング関数がいくつか登録されています。Robert Penner 氏によるものを利用しています(BSDライセンス)。

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    x: 320,
    y: 320,
    easing: enchant.Easing.BACK_EASEOUT,
    time: 30
});
// (320, 320) まで移動する。いったん端を通り過ぎて戻るような視覚効果がある

bear = new AnimationSprite(32, 32);
bear.animation.addTween({
    scaleX: 2,
    scaleY: 2,
    easing: enchant.Easing.BOUNCE_EASEOUT
    time: 30
});
// Spriteを拡大する。端でバウンドしたような視覚効果がある。

ActionScript向けのトゥイーンライブラリ「Tweener」にプリセットされている数式はすべて使うことができます。イージングの数式についてグラフ化したものが Tweenerのドキュメント に記載されています。実際に動きを確認するには Aquioux氏のブログ をご参照ください。

簡易記法

トゥイーンを簡易的に記述する記法があります。

bear = new AnimationSprite(32, 32);

// 30フレームで (320, 320) に移動する。(moveTo: 絶対座標)
bear.animation.moveTo(320, 320, 30);

// 30フレームで (320, 320) に移動する。(moveBy: 相対座標)
bear.animation.moveTo(-320, -320, 30);

// フェードアウトする
bear.animation.fadeOut(30);

// フェードインする
bear.animation.fadeIn(30);

制御

アニメーションだけではなく、様々な関数の実行にも利用できます。

// 30フレーム後に消える
bear.animation.delay(30).then(function(){
    game.rootScene.removeChild(this);
});
// delay(30) は、30フレーム経過するまで何もしないアクションを追加する
// then(...) は、引数に渡した関数を実行するアクションを追加する
// アクションは追加された順に実行されるので、30フレーム経過したあと指定した関数が実行される

bear.animation.repeat(function(){...}, 60, 3);
// 60フレームのあいだ、3フレームおきに1回指定した関数を実行する

bear.animation.after(function(){...}).then(function(){...})
// 1つ目の関数が true を返すまで待ったあと、2つ目の関数を実行する
// after(..) は毎フレーム渡した関数を実行し、true を返したなら次のアクションに移る

bear.animation.loop();
// アニメーションキューをループさせる
// (あるアクションが終わるとき、アクションは破棄されずキューの最後に追加される)

bear.animation.pause();
// アニメーションキューの実行を一時停止する

bear.animation.start();
// アニメーションキューの実行を再開する

bear.animation.clear();
// アニメーションキューを空にする

animation.enchant.js によって追加された機能は、複雑なアニメーションの管理を必要とするゲームに最適です。本格的なゲームをどんどん作ってみてください!お待ちしています。