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);

コメントを残す

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