Next2D NoCode ToolのFilterを利用する

フィルターは、グラフィックエフェクトの一種で、ぼかし、ベベル、グロー、ドロップシャドウなど、豊富な視覚効果をDisplayObjectに適用して表示できます。

# 事前の技術共有事項
フィルター機能はメモリを大量に消費するので、使い過ぎには十分注意してください。
特に広範囲にフィルターを適用した場合、レンダリング処理が重くなります。

但し、座標(x,y)変更であればキャッシュしたフィルターが適用されるためレンダリング負荷は発生しません。ですが、拡大縮小、回転、色の変化もしくはフィルターの値に変更が行われた場合、フレーム毎に再描画をします。
この特性を理解頂き、効果的にご利用頂ければと思います。

# DropShadow
シャドウアルゴリズムは、ぼかしフィルターで使用するのと同じボックスフィルターに基づいています。ドロップシャドウのスタイルには複数のオプションがあり、`内側シャドウ`、`外側シャドウ`、`ノックアウトモード`などがあります。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/03164bbf-bfde-e184-4e5a-cb897db6932a.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/2e4f402c-4f6e-6339-3218-28f53d4a2d67.png" width="200">

## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
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 を指定。

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/sj6eljRxbQI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# Blur
ぼかし効果は、イメージの細部をぼかします。ソフトフォーカスがかかっているように見えるぼかしから、半透明ガラスを通してイメージを見るようにかすんで見えるガウスぼかしまで作成できます。このフィルターの`quality`プロパティを低く設定すると、ソフトフォーカスがかかっているように見えるぼかしになります。`quality`プロパティを高く設定すると、ガウスぼかしフィルターに似たものになります。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/03164bbf-bfde-e184-4e5a-cb897db6932a.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/78f7fe94-e0d1-4a4d-e4a7-27f73a4bd92e.png" width="200">


## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
blurX|number|4|水平方向ぼかし量を指定。（0～255 単位:ピクセル）
blurY|number|4|垂直方向ぼかし量を指定。（0～255 単位:ピクセル）
quality|number|1|フィルタを適用する回数（1～15）

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/V8_iyeio8mQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# Glow
グローのスタイルには複数のオプションがあり、`内側グロー`、`外側グロー`、`ノックアウトモード`などがあります。グローフィルターは、`distance`プロパティと`angle`プロパティを0に設定したドロップシャドウフィルターによく似ています。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/03164bbf-bfde-e184-4e5a-cb897db6932a.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/49a6fdf5-1a11-df11-7669-e2bb471df53b.png" width="200">

## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
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|ノックアウト効果の有無

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/fAbTAG1I1Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# Bevel
ボタンなどのオブジェクトにベベル効果を適用すると 3 次元的に表現されます。
異なる`ハイライトカラー`、`シャドウカラー`、ベベルのぼかし量、ベベルの角度、ベベルの配置、ノックアウト効果を使用して、ベベルの外観をカスタマイズできます。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/dfd0a9e3-d6e0-2b7c-d2f8-eaf2108ca1c1.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/0b395282-e822-aee4-6518-97f06482b5b5.png" width="200">

## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
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|ノックアウト効果の有無

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/sjJ2fu8B9HE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# GradientGlow
グラデーショングローとは、制御可能なカラーグラデーションによるリアルな輝きです。グラデーショングローは、オブジェクトの内側エッジや外側エッジの周囲、またはオブジェクトの上に適用できます。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/dfd0a9e3-d6e0-2b7c-d2f8-eaf2108ca1c1.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/00461ad8-1958-c169-822d-04dc74adc637.png" width="200">

## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
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|ノックアウト効果の有無

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/GUHZYMwM-l0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

# GradientBevel
グラデーションベベルは、オブジェクトの外側、内側、または上側が斜めになったエッジであり、グラデーションカラーで強調されます。斜めのエッジによってオブジェクトが 3 次元に見えます。

before|after
:-:|:-:
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/dfd0a9e3-d6e0-2b7c-d2f8-eaf2108ca1c1.png" width="200">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/aabd53e9-f739-158d-39a1-10bbce13aac5.png" width="200">

## 設定値

プロパティ|型|初期値|効果|
---|---|---|---
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|ノックアウト効果の有無

## 動作サンプル
<iframe width="560" height="315" src="https://www.youtube.com/embed/SVdEnU6XUMg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

如何だったでしょうか？
今回はエフェクト効果を見ていただきたかったので、サンプル動画を多めに投稿しました。

この他にも、[ColorMatrixFilter](https://next2d.app/docs/player/next2d.filters.ColorMatrixFilter.html)、[ConvolutionFilter](https://next2d.app/docs/player/next2d.filters.ConvolutionFilter.html)、[DisplacementMapFilter](https://next2d.app/docs/player/next2d.filters.DisplacementMapFilter.html)とあるのですが、NoCode Tool内ではまだ利用ができない為、説明を割愛しました。
Next2D Playerから直接コードから利用は可能ですので、ご興味があれば[API Docs](https://next2d.app/docs/player/)をご覧ください。

もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
[NoCode Tool](https://tools.next2d.app)

明日はタイムライン機能の紹介ができればと思います。