[CreateJS] Bitmapクラスを使って画像の描画を自由自在に

こんにちは、@yoheiMuneです。
CreateJSを用いたWebゲームアニメーションを作って2ヶ月。色々と学んだ事をブログに書こうと思い、今日が第2弾。
今日は、CreateJSのうちEaselJSのBitmapクラスを用いて、画像の描画を自由自在に行う方法をブログに書きます。

CreateJSとは

CreateJSとは、HTML5 Canvasに描画したり、Canvas上でアニメーションを行う為のJavaScriptライブラリです。
CreateJSについて、以下の記事を書いておりますので、ご覧頂けると幸いです。

- Canvasアニメーションを実装する時に便利で良く利用しているJSライブラリ、CreateJS
- Bitmapクラスを使って画像の描画を自由自在に（今回ここ）

Bitmapクラスを使って、画像を自由自在に描画する

createjs.Bitmapクラスを使うと、PNGやJPEGやGIFなどの画像を、簡単にCanvas上に描画することが出来ます。
また描画する際に、指定できるオプションもありますので、Bitmapクラスの色々な使い方を紹介して行きたいと思います。

まずは準備

まずは、PreloadJSを用いて画像を読み込みます。
詳細は、記事第1弾を参照頂けると幸いです。

(function(){
     // namespace.
     window.yoheim = window.yoheim || {};

     // preload.jsで読み込んだ素材を保持する変数。
     window.yoheim.assets = {};

     // onloadイベントの登録
     window.onload = function() {
           // preloadjsを使って画像を読み込む。
           var loadManifest = [{id:"star", src:"./img/star@160_160.png"}];
           var loader = new PreloadJS(false);
           loader.onFileLoad = function(event) {
                window.yoheim.assets[event.id] = event.result;
           }
           loader.onComplete = function(){
                /*画像読み込みが終わった際に、実行する処理をここに書く*/
           }
           loader.loadManifest(loadManifest);
     }
})();

今回は、window.yoheim.assetsオブジェクトに、読み込んだ画像を保存しておき、 その後のアニメーションではそこに保存した画像を利用します。

描画位置を指定して描画する

まずは基本から。Bitmapクラスのインスタンスを作成して、描画位置を指定してStageに追加する事で、任意の位置に描画することが出来ます。

(function(){
     var canvas = document.getElementById("canvas1");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);
     // Canvasの真ん中に描画されるように位置を指定する。
     bitmap.x = 80;
     bitmap.y = 80;
     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

拡大率を指定して描画する

拡大率を指定することで、任意の大きさで描画することが出来ます。
ただし、Canvasはビットマップ描画（パス描画ではない）なので、scaleで1より大きい値を指定すると、ぼけてしまいます。

(function(){

     // ステージを作成する。
     var canvas = document.getElementById("canvas2");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // scaleX, scaleYを指定することで、拡大縮小した画像を表示することができる。
     bitmap.scaleX = 0.3;
     bitmap.scaleY = 0.3;

     // 画像が画面の中央になるように、位置を調整する。
     // 拡大縮小しても、中心点がずれないようにするために、regX,regYを画像の中心に指定する。
     // またその際に、x,yは、Canvasの中心になる点を指定する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

上下反転させて描画する

scaleXやscaleYに負数を指定すると、上下反転や左右反転した状態で描画することができます。

(function(){
     // ステージを作成する。
     var canvas = document.getElementById("canvas3");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // scaleX, scaleYに負数を指定すると、反転した状態で描画できる。
     bitmap.scaleY = -1;

     // 中心に描画する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

半透明で描画する

alphaを指定して描画することもできます。

(function(){
     var canvas = document.getElementById("canvas4");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // alphaを指定すると、半透明で描画することができます。
     bitmap.alpha = 0.4;

     // 中心に描画する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

傾いた状態で描画する

rotationを指定すると、回転した状態で描画することが可能です。

(function(){
     var canvas = document.getElementById("canvas5");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // rotationを指定する事で、傾いた状態で描画することができます。
     bitmap.rotation = 45; //degree

     // 中心に描画する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

クリックイベントに反応する

BitmapはHTMLエレメントと似たように、Clickイベントを指定することが出来ます。
ライブラリなしでCanvasを用いた場合に、描画した画像のクリックイベントを実装するのは大変です。
こーゆう便利な機能があるのは、ライブラリならではで良いですね(*´∇｀*)

(function(){
     var canvas = document.getElementById("canvas6");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // onClickに関数を指定すると、描画物がクリックされた際に反応することができます。
     bitmap.onClick = function(e) {
          alert("star object is clicked.");
     }

     // 中心に描画する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、ステージを更新する。
     stage.addChild(bitmap);
     stage.update();
})();

以上で、Bitmapクラスの基本的な使い方の説明が終わりです。
他にも便利な機能がありますが、上記機能を使えれば、かなり好きなように描画できるかと思います。
なおFilterという超便利な機能があるのですが、それはまた後日別の記事で紹介できればと思います。

Bitmapの設定値を変化させてアニメーションを行う

上記で設定したBitmap値を変化させることで、アニメーションを行うことが出来ます。
以下では、上記で紹介した設定値を変化させてアニメーションをさせる例を紹介させて頂きます。

透明度と拡大率をアニメーションさせてみる

透明度と拡大率を一緒に変化させることで、フェードアウトするアニメーションを表現できます。

(function(){
     var canvas = document.getElementById("canvas7");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);

     // 中心に描画する。
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、アニメーションを開始する。
     stage.addChild(bitmap);
     createjs.Ticker.setFPS(30);
     createjs.Ticker.addListener(stage);

     // アニメーションを行う。
     createjs.Tween.get(bitmap, {loop:true})
          .to({alpha:0, scaleX:4, scaleY:4}, 500, createjs.Ease.sinInOut)
          .wait(300)
          .to({alpha:1, scaleX:0.3, scaleY:0.3})
          .wait(300);
})();

x座標とrotationを変化させるアニメーション

描画座標とrotationを変化させると、以下のような転がる感じを表現することができます。

(function(){
     var canvas = document.getElementById("canvas8");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);
     // setTransformを使うと、以下の値を纏めて指定できるので便利です。
     //bitmap.setTransform ( x , y , scaleX , scaleY , rotation , skewX , skewY , regX , regY )
     bitmap.setTransform(40, 160, 0.3, 0.3, 0, 0, 0, 80, 80);


     // ステージに追加して、アニメーションを開始する。
     stage.addChild(bitmap);
     createjs.Ticker.setFPS(30);
     createjs.Ticker.addListener(stage);

     // アニメーションを行う。
     createjs.Tween.get(bitmap, {loop:true})
          .to({x:280, rotation:360},1000, createjs.Ease.sinInOut)
          .to({x:40, rotation:0},1000, createjs.Ease.sinInOut);
})();

scaleの正負を変化させるアニメーション

scaleの正負を規則的に変化させることで、擬似的に回転している感じを出すことができます。

(function(){
     var canvas = document.getElementById("canvas9");
     var stage  = new createjs.Stage(canvas);

     // Bitmapクラスのインスタンスを作成する。
     var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);
     bitmap.regX = 80;
     bitmap.regY = 80;
     bitmap.x = 160;
     bitmap.y = 160;

     // ステージに追加して、アニメーションを開始する。
     stage.addChild(bitmap);
     createjs.Ticker.setFPS(30);
     createjs.Ticker.addListener(stage);

     // アニメーションを行う。
     createjs.Tween.get(bitmap, {loop:true})
          .to({scaleX:-1}, 300, createjs.Ease.sinIn)
          .to({scaleX:1}, 300, createjs.Ease.sinIn);
})();

パフォーマンスの向上

Bitmapクラスは、以下のように実装することで描画時のパフォーマンスが向上します。
特にアニメーションを行う場合などは、やるべきです。

// Bitmapクラスのインスタンスを作成する。
var bitmap = new createjs.Bitmap(window.yoheim.assets["star"]);
// Canvasの真ん中に描画されるように位置を指定する。
bitmap.x = 80;
bitmap.y = 80;


// これ！！
bitmap.cache(0, 0, 160, 160);


// ステージに追加して、ステージを更新する。
stage.addChild(bitmap);

cacheメソッドを用いる事で、画像情報を事前に別Canvasに描画することができ、Stage上で描画する際には、事前描画した内容を利用して描画できます。
別Canvasに描画しておく事で、Image→Canvas描画時の計算処理を1度のみにする事ができ、パフォーマンスが向上します。

cacheメソッドを使う場合には注意も必要です。
一度Cacheすると描画内容とかFilter内容のプロパティを変えても変化しません。
変化を有効にする為には、updateCacheメソッドを呼び出し、別Canvasに描画している内容を更新する必要があります。

参考資料

今回の記事で利用したクラスは、以下にリファレンスがあります。
- Bitmapのクラスリファレンス
- DisplayObjectのクラスリファレンス。Bitmapクラスの親クラスで、上記で紹介した多くのプロパティはDispkayObjectが保有する。

以下はTween.jsを用いたアニメーションで利用したクラスです。
Tween.jsについての詳細は、また別記事で紹介できればと思います(・∀・)
- Tweenのクラスリファレンス
- Easeのクラスリファレンス

最後に

仕事で作成しているソーシャルゲームのアニメーションでも、上記のBitmapクラスは大活躍しています。
画像をどのように描画して、どのようにアニメーションさせるかを工夫する事で、たくさんの種類のアニメーションを作成することが出来ます。

具体的なアニメーションは、色々とまとまったらサンプル集でも作れれば良いなぁと思います。

最後までご覧頂きましてありがとうございました。
今後もCreateJSに関する記事を書きますので、少しでも気になったらRSS登録もどうぞ宜しくお願いします。