EaselJSにDropShadowFilterを追加したよTweetこんにちわ、ドラクエ8クリア目前のkudoxです。前回のGlowFilterに続き、今回はEaselJS用のDropShadowFilterを作ってみました。hideObjectといったオプションにも対応しており、ActionScript3.0のDropShadowFilterと同等の機能を持っています。domainで公開しますので、商用でもご自由にお使い下さい。EaselJSソースはGitHubからダウンロードして下さい。ZIPボタンで、zipでもダウンロードできます。libフォルダに圧縮版を置いてありますが、filters-for-easeljs-x.x.x.min.jsは、すべてのフィルターを入れているので、個々のフィルターだけを使用したい場合は、フィルター名.min.jsを使用して下さい。DocumentationDropShadowFilterの使い方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を適用しています。