EaselJS用のGlowFilterを作ったよ

メリークリスマス!最近、サンタさんとご縁のないkudoxです。現在のEaselJS 0.7には、まだGlowFilterが実装されていません。Shadowクラスでグローに似た効果を得ることもできますが、Shadowクラスはcacheされないため処理負荷が高く、またChromeがバグを抱えていたりします。そこでEaselJS用のGlowFilterを作ってみました。public domainで公開しますので、商用でもご自由にお使い下さい。

Download GlowFilter for EaselJS

ソースはGitHubに置いてありますので、下記リンク先からダウンロードして下さい。zipでダウンロードしたい方は、GitHubページ右側のDownload ZIPボタンをクリックしてね。今後、新しいFilterを作ったら、こちらにプッシュしていきますので、宜しければ覗いてやって下さい。

GlowFilterの使い方

それでは、GlowFilterの基本的な使い方を見てみましょう。まず、GlowFilterのコンストラクタに渡す引数を順番に確認してみます。基本的にはActionScript3.0と同じにしていますが、デフォルト値が若干異なるのでご注意下さい。

color
グローのカラー値を0xRRGGBB形式の16進数値で指定します。デフォルト値は、0xFF0000です。
alpha
グローのアルファ透明度を0〜1の数値で指定します。デフォルト値は 1 です。
blurX
水平方向のぼかし量を指定します。デフォルト値は 0 です。このGlowFilterは、ぼかし処理でEaselJSのBlurFilterを使用しているため、この値はそのままBlurFilterに渡されます。
blurY
垂直方向のぼかし量を指定します。デフォルト値は 0 です。このGlowFilterは、ぼかし処理でEaselJSのBlurFilterを使用しているため、この値はそのままBlurFilterに渡されます。
strength
グローの強さを0〜255の数値で指定します。デフォルト値は 1 です。この値は、小さいほど処理負荷が低くなります。
quality
ブラー処理の回数を指定します。デフォルト値は 1 です。このGlowFilterは、ぼかし処理でEaselJSのBlurFilterを使用しているため、この値はそのままBlurFilterに渡されます。
inner
内側のグローであるかをBool値で指定します。デフォルト値は false です。
knockout
ノックアウト効果を適用するかをBool値で指定します。trueを指定するとオブジェクトが透明になり、グローだけが表示されます。デフォルト値は false です。

コンストラクタでGlowFilterインスタンスを生成したら、あとはEaselJSの他のFilterと同様にDisplayObjectのfiltersプロパティに配列で指定し、cacheメソッドをコールするだけです。以上でオブジェクトにGlowFilterが適用されます。

JavaScript

_shape = new createjs.Shape().set({x:centerX, y:centerY});
_shape.graphics.f("rgba(0,0,255,1)").dp(0, 0, 100, 5, 0.6, -90).ef();
var color = 0x00FFFF;
var alpha = 1;
var blurX = 32;
var blurY = 32;
var strength = 1;
var quality = 1;
var inner = false;
var knockout = false;
_glowFilter = new createjs.GlowFilter(color, alpha, blurX, blurY, strength, quality, inner, knockout);
_shape.filters = [_glowFilter];
_shape.cache(-100, -100, 200, 200);
_stage.addChild(_shape);

あとがき

バグ報告やご質問等ございましたらContact、または@u_kudoxからお願いします。それでは皆さん、楽しいクリスマスをお過ごし下さい。

P.S. サンタさん、待ってます。