BitmapData for EaselJS ver1.00 リリースのお知らせ

こんにちわ。まだiPhone5の分割払いが39000円残ってるけど、5sが欲しくてたまらないkudoxです。先日、BitmapData for EaselJS ver1.00をリリースしました。こちらからダウンロードして頂けます。ver1.00では、新たにapplyFilter, expand, perlinNoiseメソッドを追加しています。今回は、これら新規に追加したメソッドの使い方を簡単に紹介したいと思います。

applyFilter()

applyFilterメソッドを使うとBitmapDataにフィルターを適用することができます。第1引数でソースオブジェクトを指定します。指定できるオブジェクトは、BitmapData, HTMLCanvasElement, HTMLImageElement, HTMLVideoElement, createjs.Stage, cacheされたcreatejs.DisplayObjectのサブクラスです。

第2引数はソースオブジェクトの範囲を示すRectangle、第3引数はフィルターを適用したイメージを配置する座標を示すPoint、第4引数で適用するFilterインスタンスを指定します。下記のサンプルでは、ソースオブジェクトに現在のBitmapDataを指定し、BlurFilterを適用しています。

JavaScript

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var sourceRect = new createjs.Rectangle(90, 20, 200, 200);
var destPoint = new createjs.Point(90, 20);
var filter = new createjs.BlurFilter(8, 8, 1);
_bmd01.applyFilter(source, sourceRect, destPoint, filter);

expand()

expandメソッドを使うとBitmapDataのwidth, heightを変更することができます。引数は変更するサイズを示すRectangleです。例として、上下左右に8pxずつ拡げたい場合は、new createjs.Rectangle(-8, -8, 16, 16)とします。

このメソッドの引数は、createjs.Filter.getBoundsメソッドの戻り値に合わせているため、Filterを使用する場合は、getBoundsの戻り値をそのまま渡すことができます。下記のサンプルでは、BlurFilter.getBoundsの戻り値をexpandメソッドに渡すことにより、イメージ全体にBlurFilterを適用しています。

JavaScript

_bmd01 = new createjs.BitmapData(_image01);
var source = _bmd01;
var filter = new createjs.BlurFilter(16, 16, 1);
var rect = filter.getBounds();
_bmd01.expand(rect);
var sourceRect = new createjs.Rectangle(0, 0, _bmd01.width, _bmd01.height);
var destPoint = new createjs.Point();
_bmd01.applyFilter(source, sourceRect, destPoint, filter);

perlinNoise()

perlinNoiseメソッドを使うとパーリンノイズを生成することができます。引数は基本的にActionScript3.0に合わせているので、ActionScript3.0のリファレンスをご覧頂くとわかりやすいと思います。

BitmapData for EaselJSでは、オプションの第10引数でノイズを滑らかにする補間のタイプを選択できるようにしています。指定できる値は"linear"と"cos"で、"cos"の方が滑らかな結果が得られますが、その分、処理に多少の時間がかかります。デフォルト値は"linear"です。

下記のサンプルでは、グレースケールのパーリンノイズを生成しています。

JavaScript

_bmd01 = new createjs.BitmapData(null, 320, 240);
var baseX = _bmd01.width;
var baseY = _bmd01.height;
var numOctaves = 5;
var randomSeed = 7;
var stitch = false;
var fractalNoise = false;
var channel = Object.create(createjs.BitmapDataChannel);
var channelOptions = channel.RED | channel.GREEN | channel.BLUE;
var grayScale = true;
var offsets = [new createjs.Point(0, 0), new createjs.Point(0, 0)];
var interpolateType = "cos";
_bmd01.perlinNoise(baseX, baseY, numOctaves, randomSeed, stitch, fractalNoise, channelOptions, grayScale, offsets, interpolateType);

あとがき

BitmapData for EaselJSを作った感想として、当初思っていたよりもずっと大変な作業でした。何度か心が折れそうになりましたが、おかげでいい勉強になったと思います。改めて、これが標準で用意されているFlashの偉大さをしみじみと感じる今日この頃です。

正直、まだ納得のいっていない箇所はあるのですが、ver1.00のリリースに伴い、一旦は区切りを付けるつもりでいます。しかし、今後もバグフィックスはもちろん、CreateJSのアップデートによる対応もするつもりです。また、機能追加の要望等ございましたら、ContactページかTwitterで@u_kudox宛にMentionして下さい。可能な限り対応したいと思います。

それでは、少し寒くなって参りましたので、皆さん体調を崩さぬよう暖かくしてお過ごし下さい。