not good but great

プログラミング、アート、映画・本の感想について書きます。

CreateJS(EaselJS)で円を移動させて、大きさも変えてみた

CreateJSでWebGLが使える

WebGL公式サポートにより、描画スピードが向上したと聞き、興味を持ちました。触ったことがないので、やってみることにしました。


・参考
WebGL公式サポートで爆速になったCreateJS - GUGENKAブログ

デモ


円が移動して、大きさが変わります。

CreateJSの基本的な使い方

こちらを参考にしました。

・参考
EaselJS v0.7.1 API Documentation : EaselJS
CreateJSを使ってみよー : アシアルブログ
JavaScript - CreateJSでスマートフォン向けサイトのアニメーションを実装するときに気をつけるポイント - Qiita [キータ]

Canvasを用意

<canvas id="world"></canvas>

大きさはJSで後で定義します。

ステージを作成

//ステージ生成
stage = new cj.Stage("world");
stage.canvas.width = window.innerWidth;
stage.canvas.height = window.innerHeight;

まずステージと呼ばれる描画する場所を定義します。

円を作成

//円を生成
circle = new cj.Shape();
circle.graphics.beginFill("#ccc").drawCircle(0,0,50);
    
//中央に配置
circle.x = stage.canvas.width / 2;
circle.y = stage.canvas.height / 2;

シェイプを呼び出して、円を定義します。

ステージに追加

//ステージに追加
stage.addChild(circle);
    
//ステージ更新
stage.update();

最後にステージに追加して、更新を行います。

これで円を描画することができました。

自動更新してアニメーションさせる

Tickで自動更新

cj.Ticker.addEventListener("tick",handleTick);


//自動更新
function handleTick(){
    //move
    circle.x += 10;
    
    //拡大
    circle.scaleX *= 1.03;
    circle.scaleY *= 1.03;
    
    if(circle.x > stage.canvas.width){
        circle.x = 0;
        circle.scaleX = 1;
        circle.scaleY = 1;
    }
    
    stage.update();
}

tickを使えば、CanvasでよくあるsetTimeoutでループする処理を書かなくて済みます。setTimeoutとの違いはFPSを定義できるところみたいです。

・参考
CreateJSを使って簡単なゲームを作ったのでメモ | SUSH-i LOG