Next2D NoCode ToolのBlendModeを利用する

11296 ワード
Next2D JavaScript NoCodeTool nocode WebGL JavaScript テキストリンク

今日はBlendModeの機能と効果を紹介したいと思います。
PhotoShopなどを利用する方は既にご存知かもしれませんが、最後まで読んでもらえると嬉しいです。

BlendModeを使用すると、指定したDisplayObjectと背景色の合成を行う事ができます。
ブレンドモードの種類は以下の14パターンです。

normal(標準)

ブレンドを使用していない通常の状態。

layer(レイヤー)

DisplayObjectに関する透明度グループを強制的に作成します。
複数のレイヤーを持つDisplayObjectを半透明にすると、以下のように表示されます。
レイヤーごとに半透明が適用されるので、重なる部分が透けて表示されます。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認ができません。

[normal alpha50%]

[layer alpha50%]

darken(比較（暗）)

DisplayObjectのカラー値と背景色のうち暗い色（値が小さい方）を選択します。

変換式

新しい赤色 = (DisplayObjectの赤色 < 背景の赤色) ? DisplayObjectの赤色 : 背景の赤色;
新しい緑色 = (DisplayObjectの緑色 < 背景の緑色) ? DisplayObjectの緑色 : 背景の緑色;
新しい青色 = (DisplayObjectの青色 < 背景の青色) ? DisplayObjectの青色 : 背景の青色;

multiply(乗算)

DisplayObjectのカラー値と背景色のカラー値を乗算した後、0xffで割って正規化し、色を暗くします。

変換式

新しい赤色 = (DisplayObjectの赤色 / 0xff) * 背景の赤色;
新しい緑色 = (DisplayObjectの緑色 / 0xff) * 背景の緑色;
新しい青色 = (DisplayObjectの青色 / 0xff) * 背景の青色;

lighten(比較（明）)

背景色とDisplayObjectのカラー値を比較して、明るい色大きい（値が大きい方）を選択します。

変換式

新しい赤色 = (DisplayObjectの赤色 > 背景の赤色) ? DisplayObjectの赤色 : 背景の赤色;
新しい緑色 = (DisplayObjectの緑色 > 背景の緑色) ? DisplayObjectの緑色 : 背景の緑色;
新しい青色 = (DisplayObjectの青色 > 背景の青色) ? DisplayObjectの青色 : 背景の青色;

screen(スクリーン)

DisplayObjectのカラー値の補数（逆）と背景色の補数を乗算して、ブリーチ効果を得ます。

変換式

新しい赤色 = DisplayObjectの赤色 + 背景の赤色 - DisplayObjectの赤色 * 背景の赤色 / 0xff;
新しい緑色 = DisplayObjectの赤色 + 背景の赤色 - DisplayObjectの赤色 * 背景の赤色 / 0xff;
新しい青色 = DisplayObjectの赤色 + 背景の赤色 - DisplayObjectの赤色 * 背景の赤色 / 0xff;

overlay(オーバーレイ)

背景色が127以下であれば、乗算として動作します。
背景色が129以上であれば、スクリーンとして動作します。

変換式

if (背景の赤色 > 129) {
    新しい赤色 = -255 + 2 * (DisplayObjectの赤色 + 背景の赤色) - DisplayObjectスの赤色 * 背景の赤色 / 127.5;
} else if (背景の赤色 < 127) {
    新しい赤色 = (DisplayObjectの赤色 / 127.5) * 背景の赤色;
} else {
    新しい赤色 = DisplayObjectの赤色;
}

if (背景の緑色 > 129) {
    新しい緑色 = -255 + 2 * (DisplayObjectの緑色 + 背景の緑色) - DisplayObjectの緑色 * 背景の緑色 / 127.5;
} else if (背景の緑色 < 127) {
    新しい緑色 = (DisplayObjectの緑色 / 127.5) * 背景の緑色;
} else {
    新しい緑色 = DisplayObjectの緑色;

if (背景の青色 > 129) {
    新しい青色 = -255 + 2 * (DisplayObjectの青色 + 背景の青色) - DisplayObjectの青色 * 背景の青色 / 127.5;
} else if (背景の青色 < 127) {
    新しい青色 = (DisplayObjectの青色 / 127.5) * 背景の青色;
} else {
    新しい青色 = DisplayObjectの青色;
}

hardlight(ハードライト)

DisplayObjectのカラーが127以下であれば、乗算として動作します。
DisplayObjectのカラーが129以上であれば、スクリーンとして動作します。

変換式

if (DisplayObjectの赤色 > 129) {
    新しい赤色 = -255 + 2 * (DisplayObjectの赤色 + 背景の赤色) - DisplayObjectの赤色 * 背景の赤色 / 127.5;
} else if (DisplayObjectの赤色 < 127) {
    新しい赤色 = (DisplayObjectの赤色 / 127.5) * 背景の赤色;
} else {
    新しい赤色 = 背景の赤色;
}

if (DisplayObjectの緑色 > 129) {
    新しい緑色 = -255 + 2 * (DisplayObjectの緑色 + 背景の緑色) - DisplayObjectの緑色 * 背景の緑色 / 127.5;
} else if (DisplayObjectの緑色 < 127) {
    新しい緑色 = (DisplayObjectの緑色 / 127.5) * 背景の緑色;
} else {
    新しい緑色 = 背景の緑色;
}

if (DisplayObjectの青色 > 129) {
    新しい青色 = -255 + 2 * (DisplayObject青色 + 背景の青色) - DisplayObjectの青色 * 背景の青色 / 127.5;
} else if (DisplayObjectの青色 < 127) {
    新しい青色 = (DisplayObjectの青色 / 127.5) * 背景の青色;
} else {
    新しい青色 = 背景の青色;
}

add(加算)

DisplayObjectのカラー値を背景色に加算し、その際に上限0xffを適用します。

変換式

新しい赤色 = DisplayObjectの赤色 + 背景の赤色;
新しい緑色 = DisplayObjectの緑色 + 背景の緑色;
新しい青色 = DisplayObjectの青色 + 背景の青色;

subtract(減算)

DisplayObjectのカラー値をその背景色の値から減算します。

変換式

新しい赤色 = 背景の赤色 - DisplayObjectの赤色;
新しい緑色 = 背景の緑色 - DisplayObjectの緑色;
新しい青色 = 背景の青色 - DisplayObjectの青色;

difference(差の絶対値)

背景色とDisplayObjectのカラー値を比較します。
大きい値から小さい値を減算して結果を出力します。

変換式

新しい赤色 = (DisplayObjectの赤色 > 背景の赤色) ? (DisplayObjectの赤色 - 背景の赤色) : (背景の赤色 - DisplayObjectの赤色);
新しい緑色 = (DisplayObjectの緑色 > 背景の緑色) ? (DisplayObjectの緑色 - 背景の緑色) : (背景の緑色 - DisplayObjectの緑色);
新しい青色 = (DisplayObjectの青色 > 背景の青色) ? (DisplayObjectの青色 - 背景の青色) : (背景の青色 - DisplayObjectの青色);

invert(反転)

背景色を反転して結果を出力します。

変換式

新しい赤色 = (0xff - 背景の赤色);
新しい緑色 = (0xff - 背景の緑色);
新しい青色 = (0xff - 背景の青色);

alpha(アルファ)

alphaを動作させるには、親のブレンドモードが、「BlendMode.LAYER (レイヤー)」である必要があります。
背景色の赤,緑,青成分はそのままで、透過成分はDisplayObjectから出力します。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認ができません。

変換式

新しい赤色 = 背景の赤色;
新しい緑色 = 背景の緑色;
新しい青色 = 背景の青色;
新しい透過色 = DisplayObjectの透過色;

erase(消去)

alphaを動作させるには、親のブレンドモードが、「BlendMode.LAYER (レイヤー)」である必要があります。
背景色の赤,緑,青成分はそのままで、透過成分はDisplayObjectから反転して出力します。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認ができません。

変換式

新しい赤色 = 背景の赤色;
新しい緑色 = 背景の緑色;
新しい青色 = 背景の青色;
新しい透過色 = 255 - DisplayObjectの透過色;

如何だったでしょうか？
もし、この記事を見て、興味が出た方はこちらか動作確認ができます。
NoCode Tool

明日はフィルター機能の紹介ができればと思います。