アニメーション基礎 / CreateJS


CreateJSでアニメーションやってみる。
チュートリアルにある Animation and Ticker を参考にしつつ。

フレームごとに少しずつオブジェクトを動かします。まあ、基本的な考え方はどれも同じよね。

1
2
circle.x += 100; // 100pix移動
stage.update();

ループは setInterval や setTimeout でもよいけど、Ticker と言う機能が用意されてます。
すると tick という関数が毎度呼ばれるので、これに処理を記述します。
フレームレートの指定もできます。(デフォルトは20FPS)

1
2
3
4
5
6
7
8
9
10
11
12
var FPS = 30;
var speed = 100; // pix / sec
speed /= FPS;
function init(){
    // 初期化処理の中で指定
    createjs.Ticker.addListener(window);
    createjs.Ticker.setFPS(FPS);
}
function tick(){
    // Ticker から毎フレーム呼ばれる
    circle.x += speed;
}

ただ、これだとフレームレートが動的に変化するような場合に、移動スピードも変わってしまいます。
これに対応する機能が CreateJS では用意されています。
下記のように elapsedTime にミリ秒単位で時間差を取得できるので、これを元に移動量を決定します。

1
2
3
4
5
var speed = 100; // pix / sec
speed /= 1000; // pix / ms
function tick(elapsedTime){
    circle.x += elapsedTime * speed;
}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です