[CreateJS] Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS

こんにちは、最近はWebゲーム開発でもっぱらCanvasアニメーションを実装している@yoheiMuneです。
Canvasアニメーションを実装する際に、ここ1ヶ月くらいCreate.jsというライブラリを使っています。

最近だいぶ使い慣れてきて、使いやすいなぁと感じるので、 何回かに分けてCrreate.jsの紹介やそれを使った実装方法をブログに書きたいと思います。

Create.jsとは

Create.jsとは、Canvasへの描画やアニメーションの実装をサポートしてくれるJSライブラリです。
以下のサイトが、Create.jsの本家ページです。
http://createjs.com

Create.jsを構成するライブラリ

上記のサイトを訪れると分かるのですが、Create.jsは以下フレームワークを包括したライブラリ群の名前のようです。

EaselJS	Canvas上に描画する為のライブラリ。
TweenJS	Canvas上に描画したものを使ってアニメーションするライブラリ。EaselJSで描画したものを動かす。
SoundJS	Audioを簡単に扱う為のライブラリ。Canvasとはあんまり関係ないかも。
PreloadJS	Canvas上に描画したりSoundJSで利用する素材のロード処理をサポートするライブラリ。

4つのライブラリがあります。その中で、Canvas上でアニメーションするには、 「EaselJS + TweenJS + PreloadJS」を使うとアニメーションを行うことが出来ます。

Create.jsで実装する際に利用できるツール

Create.jsは基本的には、JSをごりごりと実装するのですが、以下のツールでFlashなどから変換することがサポートされています。

Toolkit for CreateJS	Adobe Flash用のプラグインで、Flashの内容を元にCreateJSでのアニメーションを作成してくれる。
ZOE	SWFアニメーションをスプライトシートに変換してくれるツールらしい。詳しくは分かりません。。

Tooklit for CreateJSは仕事でも利用しています。しかし、完全に出力する為にはFlashの××の機能は使っちゃダメなど、 いまのところは制約が多く使いづらいのが現状です。
また、出力されたソースコードをそのまま動かすと、なかなかの重さで書き換える必要がある場合も多く。。
現在は、Flashで利用している画像素材などの書き出し用として使うことがメインです。

CreateJSを使って実際に作ってみる

CreateJSのEaselJSとTweenJSとPreloadJSを使って、 以下のような「動物が上下に動く」アニメーションを作成してみたいと思います。

CreateJSを使う為の準備

まずは、CreateJSのライブラリを読み込む実装を行います。
今回はCDNで提供されているものを利用していますが、ローカルにダウンロードしてきてそれを読み込むのももちろんありです。

<script type="text/javascript" src="http://code.createjs.com/easeljs-0.5.0.min.js"></script>
<script type="text/javascript" src="http://code.createjs.com/preloadjs-0.1.0.min.js"></script>
<script type="text/javascript" src="http://code.createjs.com/tweenjs-0.3.0.min.js"></script>

また、描画対象のCanvasもHTMLで作成します。

<canvas id='canvas' width="640" height="640" style="background-color:#cecece; width:320px; height:320px;"></canvas> 

ここで、Cajvasのwidth要素とheight要素で指定している幅と、style要素で指定している幅で2倍の違いを持たせています。
これはCanvasでのRetina対応をしています。iPhoneなどのRetinaディスプレイでもぼけずに描画するための工夫です。
CanvasのRetina対応の詳細は、こちらをご参照下さい。

アニメーション開始前にPreloadJSを使って必要な素材を読み込む

アニメーションで使う素材（画像とか）を、アニメーション開始前に読み込みを行います。
PreloadJSを使うと、読み込みが全て終わってからアニメーションを開始するなどの、タイミングを取る作業がスゴく楽になります。

// PreloadJSで読み込んだ素材を保持する変数。
var assets = {};

window.onload = function() {

    // preloadjsを使って画像を読み込む。
    // ここでは、読み込む素材を配列形式で指定します。
    var loadManifest = [
        {id:"animal", src:"./img/page1/animal.png"}
    ];

    // PreloadJSのインスタンスを作成します。
    // 引数falseは、XHR2を使うか否かの指定。Android4でも動かしたい場合にはfalseを指定する。
    var loader = new PreloadJS(false);

    // 1ファイルが読み込まれるたびに呼び出される関数を指定する。
    loader.onFileLoad = loadFile;

    // 全てのファイル読み込みが完了したら呼び出される関数を指定する。
    // startAnimationの実装内容は、後述します。
    loader.onComplete = startAnimation;

    // 読み込みを開始する。
    loader.loadManifest(loadManifest);

     // preload.jsでファイルを一つ読み込むたびに、呼ばれる関数。
     // 読み込んだ内容をassets変数に保存する。
     var loadFile = function(event) {
        // ここで利用しているidは、manifestで指定したidが渡される。
        assets[event.id] = event.result;
     }
}

上記の実装で、アニメーション開始前に、素材を読み込むことが出来ます。

Canvasに要素を描画して、アニメーションを行う

PreloadJSでの読み込みが終わったら、startAnimationメソッドが呼び出されるように実装しています。
startAnimationの中では、Canvas上に画像を描画して、アニメーションを行居ます。

// preload.jsで全てのファイルの読み込みが完了したら、呼び出される関数。
var startAnimation = function() {

    // 描画対象のステージを作成する。
    var canvasObject = document.getElementById('canvas');
    var stage = new createjs.Stage(canvasObject);    

    // 読み込んだ画像をStage上に描画する。
    // 画像をCanvas上に描画する際には、Bitmapクラスを使う。
    var bitmap = new createjs.Bitmap(assets["animal"]);
    bitmap.x = 200;
    bitmap.y = 200;
    
    // stageにaddして、stageをupdateすることで描画されます。
    // アニメーションを始める前に、要素を作る点がポイント。ここの処理が重たいため。
    stage.addChild(bitmap);
    stage.update();
    
    // Canvasでのアニメーションを動かし始める。
    createjs.Ticker.setFPS(10);
    createjs.Ticker.addListener(stage); 

    // 動物を上下に動かしてみる。
    // TweenJSを使う事で、上記でstageにaddした要素を動かすことが出来ます。
    createjs.Tween.get(bitmap, {loop:true})
        .to({y:100}, 500, createjs.Ease.cubicInOut)
        .to({y:200}, 500, createjs.Ease.cubicInOut);
}

参考資料

Create.jsのリファレンスは、サブセットのライブラリ毎に以下に存在します。
上記実装内容の詳細は、そちらもご確認頂けると幸いです。

http://www.createjs.com/Docs/EaselJS/

http://www.createjs.com/Docs/TweenJS/

http://www.createjs.com/Docs/PreloadJS/

最後に

このライブラリが良いなぁと言われる点として、ActionScriptの記述に近いということらしいです（自分はActionScriptを書いた事が無いので分からないのですが）。
また開発者がFlashの大御所の方であったり、Adobeが力を入れているといった点も良い点らしいです。

個人的には、Create.jsに対して以下の点に魅力を感じています。

• 各要素（Bitmapなど）が表示状態を保持しており、たくさんのオブジェクトを扱う際にもモジュール化しやすい。
• Preload.jsを用いる事で、ロード完了のタイミングを図る必要が無くて楽。

CreateJSはver1.0に達していないですが、良いライブラリと感じているので、今後もこれ関連の記事を書いていきたいと思います。

最後までご覧頂きましてありがとうございました。