[CreateJS] 色々なFilterを適用して描画する内容を変化させる

こんにちは、@yoheiMuneです。
CreateJSというHTML5 Cavasで描画/アニメーションを行うライブラリの解説。
今日は第３弾としてFilterクラスを使いこなして、一つの画像で色々な描画を行う方法を記載したいと思います。

CreateJSとは

CreateJSとは、HTML5 Canvasを使った描画/アニメーションの実装を強力にサポートしてくれるライブラリです。
このブログでは、筆者がCreateJSを実際に使って学んだ事を中心に、いくつか記事を書いております。

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

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

- 色々なFilterを適用して描画する内容を変化させる（今日はここ）

Filterクラスを使って、描画内容を変化させる

CreateJS内のEaselJSでは、描画する内容に対してFilterをかける事が出来ます。
ライブラリ内に、AlphaMapFilter、BoxBlurFilter、ColorFilter、ColorMatrixFilterなどが最初から用意されています。
以下では、デフォルトで準備されているそれらの使い方を記載したいと思います(・∀・)

AlphaMaskFilter

AlphaMaskFilterは、透明度を変化させるフィルターです。
以下例では、上から下に書けて透明度が変わるFilterを適用しています。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);

// Filterの内容を作成する。
// Alpha値が上下で変化するマスク画像(Canvas)を作成する。
var maskShape = new createjs.Shape();
var g = maskShape.graphics;
g.beginLinearGradientFill(["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"], [0,1],0,0,0,320);
g.drawRect(0, 0, width, height);
g.endFill();
maskShape.cache(0, 0, width, height);

// FilterをかけるBitmapを作成する。
// cloneを指定すると簡単にBitmapを複製することが出来る。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// Filterクラスのインスタンスを作成して、filtersプロパティに設定する。
var amf = new createjs.AlphaMaskFilter(maskShape.cacheCanvas);
bitmap2.filters = [amf];
// cacheをすると、別Canvasに事前病ができるので、パフォーマンスが向上する。
bitmap2.cache(0,0,width,height);
// FilterをかけたBitmapをステージに追加する。
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

BoxBlurFilter

BoxBlurFilterは、ぼかしをかけるFilterです。
以下では、描画する星画像を前後10ピクセルずつぼかすサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);


// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// ぼかしFilterを適用する。
// new createjs.BoxBlurFilter(blurX, blurY, quality)
// qualitは、どれだけ丁寧にぼかすかを指定できます。
// ただし大きな数値（2など）を指定すると、ぼかし処理が数倍時間がかかるので注意です。
bitmap2.filters = [new createjs.BoxBlurFilter(10, 10, 0)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorFilter（乗算）

ColorFilterは、RGBAの値を変化させることができるFilterです。
RGBAに値を乗算する使い方と、値を加算する使い方が出来ます。
以下では。Redに0.2を乗算して、色を変化させるサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);

// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// 色変化Filterを適用する。
// new createjs.ColorFilter ( redMultiplier , greenMultiplier , blueMultiplier , alphaMultiplier , redOffset , greenOffset , blueOffset , alphaOffset )
// xxxMultiplierに設定した値を乗じた値で、rgbaが描画される。
// 下記では、redに0.2を乗じた値を描画している。
bitmap2.filters = [new createjs.ColorFilter(0.2, 1, 1, 1)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorFilter（加算）

こちらはColorFilterで、RGBAの値を加算するサンプルです。
以下では、RGBそれぞれに200ずつ値を加算しています。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);

// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// 色変化Filterを適用する。
// new createjs.ColorFilter ( redMultiplier , greenMultiplier , blueMultiplier , alphaMultiplier , redOffset , greenOffset , blueOffset , alphaOffset )
// xxxOffsetに値を指定すると、rgbaそれぞれに値を加算することが出来る。
// 下記ではrgbに200ずつ加算している。
bitmap2.filters = [new createjs.ColorFilter(1, 1, 1, 1, 200, 200, 200, 0)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorMatrixFilter（輝度の調整）

ColorMatrixFilterは、輝度／コントラスト／色相／彩度を変化させることができるFilterです。
以下では、輝度を調整するサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);

// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// 輝度を調整するFilterを適用する。
var matrix = new createjs.ColorMatrix();
matrix.adjustBrightness(150); // from -255 to 255;
bitmap2.filters = [new createjs.ColorMatrixFilter(matrix)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorMatrixFilter（コントラストの調整）

以下は、ColorMatrixFilterでコントラストを調整するサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);


// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// コントラストを調整するFilterを適用する。
var matrix = new createjs.ColorMatrix();
matrix.adjustContrast(80); // from -100 to 100;
bitmap2.filters = [new createjs.ColorMatrixFilter(matrix)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorMatrixFilter（色相の調整）

以下は、ColorMatrixFilterで色相を調整するサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);


// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// 色相を調整するFilterを適用する。
var matrix = new createjs.ColorMatrix();
matrix.adjustHue(120); // from -180 to 180;
bitmap2.filters = [new createjs.ColorMatrixFilter(matrix)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

ColorMatrixFilter（彩度の調整）

以下は、ColorMatrixFilterを使って彩度を変更するサンプルです。

// 画像とそのサイズを取得する。
var image  = window.yoheim.assets["star"];
var width  = image.width;
var height = image.height;

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

// Filter適用前の画像を左側に描画する。
var bitmap = new createjs.Bitmap(image);
bitmap.x = 0;
bitmap.y = 0;
stage.addChild(bitmap);


// FilterをかけるBitmapを作成する。
var bitmap2 = bitmap.clone();
bitmap2.x += 320;
// 彩度を調整するFilterを適用する。
var matrix = new createjs.ColorMatrix();
matrix.adjustSaturation(100); // from -100 to 100;
bitmap2.filters = [new createjs.ColorMatrixFilter(matrix)];
bitmap2.cache(0,0,width,height);
stage.addChild(bitmap2);

// ステージの更新を行う。
stage.update();

参考資料

上記で利用しているFilterは、以下にクラスリファレンスがあります。
さらなる詳細は、こちらをご参照ください。

AkphamaskFilter Class Reference

BoxBlurFilter Class Reference

ColorFilter Class Reference

ColorMatrixFilter Class Reference

最後に

Filterを自在に使えるようになると、一つの画像で複数の種類の描画が出来て便利です。運が良ければ、ロードする画像数も減らすことが出来ます。
ただし、Filterを使った場合にはパフォーマンス劣化に注意する必要があります。cacheメソッドは必ず呼び出す方が良いかも。

また、FIlterの内容はTweenJSでのアニメーション（連続的な変化）を行う事は出来ないので注意です。

以上、CreateJSで利用できるFilterのサンプルを紹介する記事でした。
最後迄ご覧頂きましてありがとうございました。

今後もCreateJSについてもブログを書きますので、少しでも気になった場合には、RSS登録頂けると幸いです(*ﾟ▽ﾟ)ﾉ