CreateJSで星をくるくる動かす

星をくるくる動かす

サンプル

星型を描く

//書き方
//Graphicsオブジェクト.drawPolyStar(x座標, y座標, 山の半径, 頂点数, 谷の深さ, 書き始めの角度);
myGraphics.drawPolyStar(0, 0, 40, 5, 0.6, -90);

色

Graphics.getRGB(r, g, b, alpha);
Graphics.getRGB(color, alpha);

ランダムに色をつけてみる

var randomNumber = Math.floor(Math.random() * 0xFFFFFF);
var randomColor = createjs.Graphics.getRGB(randomNumber);
myGraphics.beginFill(randomColor);

アニメーション

Tickerクラスを使う。

アニメーションの処理を関数にする

function rotate() {
    myShape.rotation += 5;
    stage.update();
}

イベントにリスナーを加える

//書き方
//Ticker.addEventListener(type, rotate);
createjs.Ticker.addEventListener("tick", rotate);

FPSを返す

//書き方
//Ticker.setFPS();
createjs.Ticker.setFPS(30);

メソッド	概要
Ticker.setFPS()	FPSを設定する
Ticker.setInterval(interval)	イベント間隔ミリ秒数設定する
Ticker.getFPS()	設定されたFPSを返す
Ticker.getInterval()	設定されたイベント間隔ミリ秒数返す