「CreateJS」カテゴリーアーカイブ

アニメーション基礎 / 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;
}

CreateJSさわってみる

ゲーム系のJavaScriptライブラリの中でCreateJSが気になってたのでちょっとさわってみることに。
とりあえず付属してるチュートリアル参考にしつつ。

まずはライブラリの読み込み。
最近はCDN用意されてるもの増えたね。

1
<script src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>

あとは描画用の canvas と onload で呼ばれる関数の指定。
まずはチュートリアルにしたがって下記のように指定。

1
2
3
<body onLoad="init();">
    <canvas id="demoCanvas" width="640" height="480"></canvas>
</body>

ひとまず準備はこれだけ。
あとは init 関数に処理指定すればイイみたい。

描画する canvas は id 属性にて指定、最後にupdateします。
stage とかは Flash の ActionScript ライクになってる模様…ActionScript 知らんけど。

1
2
3
4
5
6
7
function init(){
    var stage = new createjs.Stage("demoCanvas");

    // 図形の処理とかここに描く

    stage.update();
}

例えば半径50pxの赤い円を描きたければ次の感じで。
いったん Shape つくって、drawCircle や drawRect、lineTo など指定します。

1
2
3
4
5
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);

それぞれ、ショートカットも用意されていて、beginFill = f, drawCircle = dc とか用意されてます。
ドキュメントは見当たらなかったけど、Graphics.js みると最後の方にまとめて指定あります。
そうすると、まとめて下記のようにもかけます。

1
stage.addChild(new createjs.Shape()).setTransform(100,100).graphics.f("red").dc(0, 0, 50);