CreateJS をはじめる人が知っておくとラクなこと

CreateJSをはじめる人向けに、自分が使った時に手間取った所をまとめておきます。
ドキュメントには書いてあることだけど、英語わからなかったりすると意外と手間取るとこ。

CreateJSをかるく触ったことある人向け。

createJSのプロパティをグローバルから参照する

createJSの各プロパティは、通常createjsオブジェクトから参照する必要があるが、
以下のようにすることで、グローバルに参照できるようになる。

JavaScript

createjs = window; // EaselJS、TweenJS などの読み込み前に行う

JavaScript

var stage = new Stage("sample_canvas"); // グローバルに参照できるようになる

（この記事の下記のサンプルコードでは、一応createjsから参照します）

Canvasの更新はTickerで行う

CreateJSでは、Canvas描画の更新はStageのインスタンス上で
update()を実行することで行うわけですが、
基本的には、FPSを指定したTickerのtickイベント時にのみ行うことがおすすめ。

JavaScript

var stage = new createjs.Stage("sample_canvas");

createjs.Ticker.setFPS(30);

createjs.Ticker.addEventListener("tick", function() {

	stage.update(); // 30fpsでステージの描画が更新されるようになる
});

こうすることで、Canvasの更新タイミングを気にせず処理を書けるようになる。
更新を止めたいときは、removeEventListenerを使えばOK。

cache() メソッドを使って処理をかるくする

作成したBitmapやShapeをキャッシュしておくことで、
描画処理をかるくできる。

（2013/5/18 修正）Bitmapにはcacheを使ってもパフォーマンスはあがらないようです。むしろ下がるみたい。cacheメソッドは複雑なShape、複数のBitmapでグループ化したContainer などに有効なようです。（公式ドキュメントに普通に書いてあった..

JavaScript

var bitmap = new createjs.Bitmap("sample.png");
// sample.png の実際のサイズ 100x100

bitmap.cache(0,0,100,100);
// 第3引数と第4引数は、画像のサイズを指定する

cache()を使うと、インスタンスそれぞれに紐付いた別のCanvasに描画が行われ、
ステージへの描画はその別Canvasから行われるようになる。

DOM要素を扱う

CreateJSは、DOM要素も扱える。

JavaScript

var html_element = document.getElementById("sample_element");

var element = new createjs.DOMElement(html_element);

他のインスタンス同様、CreateJS のマウスイベントなどをバインドできる。

スプライト画像を扱う

DOM実装でいうところのCSSスプライトのように、
複数の画像を1つにくっつけて扱いたいとき。

JavaScript

var bitmap = new createjs.Bitmap("sample.png");
// 100x100 の画像を縦に5個つないだ100x500の画像

bitmap.set({
	sourceRect : new createjs.Rectangle(0,200,100,100)
	// 上から3つめの100x100部分を表示
});

BitmapAnimationを使う方法でも実現できるけど、こっちのほうがらく。

マウスイベントのヒットエリアを拡張する

Bitmapなどの設定するマウスイベントは、
画像の大きさがそのままヒットエリアになっています。
（透過pngだと、透明部分は反応しないようになってる）

ヒットエリアを拡張したいときは以下のようにする。

JavaScript

var bitmap = new createjs.Bitmap("sample.png");
// sample.png の実際のサイズ 100x100

var hitAreaShape = new createjs.Shape();

hitAreaShape.set({
	x        : -50,
	y        : -100,
	graphics : new createjs.Graphics().beginFill("#FFF").drawEllipse(0,0,300,200)
	// 300x200 の楕円形
})

bitmap.set({
	hitArea : hitAreaShape
});

これでBitmapのマウスイベントのヒットエリアが300x200の楕円形に拡張される。

マスクの使い方

マスクを使いたいときはこんな感じ。

JavaScript

var bitmap = new createjs.Bitmap("sample.png");
// sample.png の実際のサイズ 100x100

var maskShape = new createjs.Shape();

maskShape.set({
	x        : 50,
	y        : 50,
	graphics : new createjs.Graphics().beginFill("#FFF").drawEllipse(0,0,300,200)
	// 300x200 の楕円形
})

bitmap.set({
	mask : maskShape
});

ヒットエリアと違い、座標はターゲットが起点にならないので注意。

おわりに

とりあえず、自分が使った範囲で手間取ったところをまとめました。

CreateJSはほかにも、

• CSSPluinでDOM要素のCSSを扱えるようになる！
• MotionGuidePlugin でくねくねしたアニメーション！
• Filterを使ってぼかしとか！

など、便利な機能盛りだくさんッ

CreateJSをAndroid端末で使おうと思っている人向けに、
CreateJS × Android でハマったこと
という投稿もしています。