
こんにちわ、ドラクエ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);