Filters for EaselJSにDropShadowFilterを追加したよ

こんにちわ、ドラクエ8クリア目前のkudoxです。前回のGlowFilterに続き、今回はEaselJS用のDropShadowFilterを作ってみました。このDropShadowFilterは、inner, knockout, hideObjectといったオプションにも対応しており、ActionScript3.0のDropShadowFilterと同等の機能を持っています。public domainで公開しますので、商用でもご自由にお使い下さい。

Download DropShadowFilter for EaselJS

ソースはGitHubからダウンロードして下さい。GitHubページ右側のDownload ZIPボタンで、zipでもダウンロードできます。libフォルダに圧縮版を置いてありますが、filters-for-easeljs-x.x.x.min.jsは、すべてのフィルターを入れているので、個々のフィルターだけを使用したい場合は、フィルター名.min.jsを使用して下さい。

DropShadowFilterの使い方

DropShadowFilterの基本的な使い方を確認してみましょう。まず、DropShadowFilterのコンストラクタに下記の引数を指定し、インスタンスを生成します。コンストラクタの引数は、ActionScript3.0のDropShadowFilterに合わせていますが、デフォルト値が若干異なるので、ご注意下さい。

distance
シャドウのオフセット距離をピクセル単位で指定します。デフォルト値は4です。
angle
シャドウの角度を0〜360度(Degree)で指定します。デフォルト値は45度です。
color
シャドウのカラー値を0xRRGGBB形式の16進数値で指定します。デフォルト値は、0x000000です。
alpha
シャドウのアルファ透明度を0〜1の数値で指定します。デフォルト値は1です。
blurX
シャドウの水平方向のぼかし量を指定します。デフォルト値は0です。
blurY
シャドウの垂直方向のぼかし量を指定します。デフォルト値は0です。
strength
シャドウの強さを0〜255の数値で指定します。デフォルト値は1です。この値は大きいほど処理負荷が高くなるため、小さい値を推奨します。
quality
シャドウのぼかし処理の回数を指定します。デフォルト値は1です。
inner
内側のシャドウであるかをBool値で指定します。デフォルト値はfalseで外側のドロップシャドウです。
knockout
ノックアウト効果を適用するかをBool値で指定します。デフォルト値はfalseでノックアウト効果なしです。
hideObject
オブジェクトを非表示にするかをBool値で指定します。trueを指定するとオブジェクトは表示されず、シャドウだけが表示されます。デフォルト値はfalseです。

DropShadowFilterインスタンスを生成したら、DisplayObjectのfiltersプロパティに配列で指定して、cacheメソッドをコールします。これで、DisplayObjectにドロップシャドウが適用されます。下記の例では、EaselJSのTextインスタンスにDropShadowFilterを適用しています。

JavaScript

_text = new createjs.Text("DropShadowFilter", "bold 64px Arial", "#CC0000");
_text.set({x:centerX, y:centerY, textAlign:"center", textBaseline:"middle"});
var distance = 3;
var angle = 90;
var color = 0x000000;
var alpha = 0.5;
var blurX = 4;
var blurY = 4;
var strength = 1;
var quality = 2;
var inner = false;
var knockout = false;
var hideObject = false;
_dropShadowFilter = new createjs.DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
_text.filters = [_dropShadowFilter];
var bounds = _text.getBounds();
_text.cache(bounds.x, bounds.y - 2, bounds.width, bounds.height + 2);
_stage.addChild(_text);