HTML
JavaScript
HTML5
canvas
CreateJS

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

More than 5 years have passed since last update.

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 でハマったこと

という投稿もしています。