フィルターは、グラフィックエフェクトの一種で、ぼかし、ベベル、グロー、ドロップシャドウなど、豊富な視覚効果をDisplayObjectに適用して表示できます。
事前の技術共有事項
フィルター機能はメモリを大量に消費するので、使い過ぎには十分注意してください。
特に広範囲にフィルターを適用した場合、レンダリング処理が重くなります。
但し、座標(x,y)変更であればキャッシュしたフィルターが適用されるためレンダリング負荷は発生しません。ですが、拡大縮小、回転、色の変化もしくはフィルターの値に変更が行われた場合、フレーム毎に再描画をします。
この特性を理解頂き、効果的にご利用頂ければと思います。
DropShadow
シャドウアルゴリズムは、ぼかしフィルターで使用するのと同じボックスフィルターに基づいています。ドロップシャドウのスタイルには複数のオプションがあり、内側シャドウ、外側シャドウ、ノックアウトモードなどがあります。
| before | after |
|---|---|
 |
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| distance | number | 4 | オフセットの距離。 |
| angle | number | 45.0 | 角度を指定。(0～360 単位:度) |
| color | number or string | 0x000000 | カラーを指定。(e.g.: "red", "#990000", 0xff0000) |
| alpha | number | 1.0 | カラーの透明度を指定。(0.0～1.0) |
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| strength | number | 1 | インプリントやスプレッドの長さ。(0 ～ 255) |
| quality | number | 1 | フィルタを適用する回数（1～15） |
| inner | boolean | false | 内部ドロップシャドウなら true、外部ドロップシャドウなら false を指定。 |
| knockout | boolean | false | ノックアウト効果の有無 |
| hideObject | boolean | false | オブジェクトを非表示にするなら true を指定。 |
動作サンプル
Blur
ぼかし効果は、イメージの細部をぼかします。ソフトフォーカスがかかっているように見えるぼかしから、半透明ガラスを通してイメージを見るようにかすんで見えるガウスぼかしまで作成できます。このフィルターのqualityプロパティを低く設定すると、ソフトフォーカスがかかっているように見えるぼかしになります。qualityプロパティを高く設定すると、ガウスぼかしフィルターに似たものになります。
| before | after |
|---|---|
|
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| quality | number | 1 | フィルタを適用する回数（1～15） |
動作サンプル
Glow
グローのスタイルには複数のオプションがあり、内側グロー、外側グロー、ノックアウトモードなどがあります。グローフィルターは、distanceプロパティとangleプロパティを0に設定したドロップシャドウフィルターによく似ています。
| before | after |
|---|---|
|
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| color | number or string | 0x000000 | カラーを指定。(e.g.: "red", "#990000", 0xff0000) |
| alpha | number | 1.0 | カラーの透明度を指定。(0.0～1.0) |
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| strength | number | 1 | インプリントやスプレッドの長さ。(0 ～ 255) |
| quality | number | 1 | フィルタを適用する回数（1～15） |
| inner | boolean | false | 内部ドロップシャドウなら true、外部ドロップシャドウなら false を指定。 |
| knockout | boolean | false | ノックアウト効果の有無 |
動作サンプル
Bevel
ボタンなどのオブジェクトにベベル効果を適用すると 3 次元的に表現されます。
異なるハイライトカラー、シャドウカラー、ベベルのぼかし量、ベベルの角度、ベベルの配置、ノックアウト効果を使用して、ベベルの外観をカスタマイズできます。
| before | after |
|---|---|
 |
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| distance | number | 4 | オフセットの距離。 |
| angle | number | 45.0 | 角度を指定。(0～360 単位:度) |
| highlightColor | number or string | 0x000000 | カラーを指定。(e.g.: "red", "#990000", 0xff0000) |
| highlightAlpha | number | 1.0 | カラーの透明度を指定。(0.0～1.0) |
| shadowColor | number or string | 0x000000 | カラーを指定。(e.g.: "red", "#990000", 0xff0000) |
| shadowAlpha | number | 1.0 | カラーの透明度を指定。(0.0～1.0) |
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| strength | number | 1 | インプリントやスプレッドの長さ。(0 ～ 255) |
| quality | number | 1 | フィルタを適用する回数（1～15） |
| type | string | "inner" | ベベルの種類。 |
| knockout | boolean | false | ノックアウト効果の有無 |
動作サンプル
GradientGlow
グラデーショングローとは、制御可能なカラーグラデーションによるリアルな輝きです。グラデーショングローは、オブジェクトの内側エッジや外側エッジの周囲、またはオブジェクトの上に適用できます。
| before | after |
|---|---|
|
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| distance | number | 4 | オフセットの距離。 |
| angle | number | 45.0 | 角度を指定。(0～360 単位:度) |
| colors | array | null | カラーを配列で指定。(e.g.: ["red", "#990000", 0xff0000]) |
| alphas | array | null | 透明度を配列で指定。(e.g.: [0.0, 0.5, 1.0]) |
| ratios | array | null | 配分を配列で指定。(e.g.: [0.0, 128, 255]) |
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| strength | number | 1 | インプリントやスプレッドの長さ。(0 ～ 255) |
| quality | number | 1 | フィルタを適用する回数（1～15） |
| type | string | "outer" | グローの種類。 |
| knockout | boolean | false | ノックアウト効果の有無 |
動作サンプル
GradientBevel
グラデーションベベルは、オブジェクトの外側、内側、または上側が斜めになったエッジであり、グラデーションカラーで強調されます。斜めのエッジによってオブジェクトが 3 次元に見えます。
| before | after |
|---|---|
|
 |
設定値
| プロパティ | 型 | 初期値 | 効果 |
|---|---|---|---|
| distance | number | 4 | オフセットの距離。 |
| angle | number | 45.0 | 角度を指定。(0～360 単位:度) |
| colors | array | null | カラーを配列で指定。(e.g.: ["red", "#990000", 0xff0000]) |
| alphas | array | null | 透明度を配列で指定。(e.g.: [0.0, 0.5, 1.0]) |
| ratios | array | null | 配分を配列で指定。(e.g.: [0.0, 128, 255]) |
| blurX | number | 4 | 水平方向ぼかし量を指定。（0～255 単位:ピクセル） |
| blurY | number | 4 | 垂直方向ぼかし量を指定。（0～255 単位:ピクセル） |
| strength | number | 1 | インプリントやスプレッドの長さ。(0 ～ 255) |
| quality | number | 1 | フィルタを適用する回数（1～15） |
| type | string | "outer" | グローの種類。 |
| knockout | boolean | false | ノックアウト効果の有無 |
動作サンプル
如何だったでしょうか？
今回はエフェクト効果を見ていただきたかったので、サンプル動画を多めに投稿しました。
この他にも、ColorMatrixFilter、ConvolutionFilter、DisplacementMapFilterとあるのですが、NoCode Tool内ではまだ利用ができない為、説明を割愛しました。
Next2D Playerから直接コードから利用は可能ですので、ご興味があればAPI Docsをご覧ください。
もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
NoCode Tool
明日はタイムライン機能の紹介ができればと思います。