Next2D NoCode ToolのFilterを利用する
フィルターは、グラフィックエフェクトの一種で、ぼかし、ベベル、グロー、ドロップシャドウなど、豊富な視覚効果を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
明日はタイムライン機能の紹介ができればと思います。
Author And Source
この問題について(Next2D NoCode ToolのFilterを利用する), 我々は、より多くの情報をここで見つけました https://qiita.com/ienaga/items/5eeb1948a045912648d1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .