LoginSignup
205

More than 5 years have passed since last update.

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

Last updated at Posted at 2013-04-24

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 でハマったこと
という投稿もしています。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
205