Next2D NoCode ToolのBlendModeを利用する

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

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

# normal(標準)
ブレンドを使用していない通常の状態。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/e4425051-2df7-5908-b587-967847a90d26.png" width="200">

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

[normal alpha50%]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/6e7f200d-69a3-c058-e617-1c39b0cbcaa4.png" width="200">

[layer alpha50%]
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/c1c091f8-028c-080c-45ec-bc9da6588729.png" width="200">

# darken(比較（暗）)
DisplayObjectのカラー値と背景色のうち暗い色（値が小さい方）を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/6a9d2ae6-f7a4-5c14-82cd-dd36fd560c94.png" width="200">

## 変換式

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

# multiply(乗算)
DisplayObjectのカラー値と背景色のカラー値を乗算した後、0xffで割って正規化し、色を暗くします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/417a9d96-8e89-1640-8887-a7dc256054ab.png" width="200">

## 変換式

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

# lighten(比較（明）)
背景色とDisplayObjectのカラー値を比較して、明るい色大きい（値が大きい方）を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/01f11dce-3979-4e13-349e-81685d200ddf.png" width="200">

## 変換式

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

# screen(スクリーン)
DisplayObjectのカラー値の補数（逆）と背景色の補数を乗算して、ブリーチ効果を得ます。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/be9ac1f3-ec91-d936-e13c-ebcb99ccb756.png" width="200">

## 変換式

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

# overlay(オーバーレイ)
背景色が127以下であれば、乗算として動作します。
背景色が129以上であれば、スクリーンとして動作します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/dc805e32-d868-0117-4af4-7e75df785042.png" width="200">

## 変換式

```
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以上であれば、スクリーンとして動作します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/75df7570-ad6c-777f-4286-ec71261fbae6.png" width="200">

## 変換式

```
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を適用します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/df001d03-6878-9685-32f8-2a2f0d3c6f6f.png" width="200">

## 変換式

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

# subtract(減算)
DisplayObjectのカラー値をその背景色の値から減算します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/1465f09b-24df-9439-98cb-782f4e03e1f1.png" width="200">

## 変換式

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

# difference(差の絶対値)
背景色とDisplayObjectのカラー値を比較します。
大きい値から小さい値を減算して結果を出力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/4dac8d1d-c28a-5cab-e525-37a73b56ac63.png" width="200">


## 変換式

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

# invert(反転)
背景色を反転して結果を出力します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/e9df2ad0-48f8-c748-380a-71bad8f7eb61.png" width="200">

## 変換式

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

# alpha(アルファ)
alphaを動作させるには、親のブレンドモードが、「BlendMode.LAYER (レイヤー)」である必要があります。
背景色の赤,緑,青成分はそのままで、透過成分はDisplayObjectから出力します。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認ができません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/d3e9cde2-90fa-5ac6-cccb-b6695afa731c.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/6b067ad1-d751-5a85-2f25-31f281b7aab4.png" width="200">

## 変換式

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

# erase(消去)
alphaを動作させるには、親のブレンドモードが、「BlendMode.LAYER (レイヤー)」である必要があります。
背景色の赤,緑,青成分はそのままで、透過成分はDisplayObjectから反転して出力します。
※2021年12月現在、layer,alpha,eraseはプレビュー時にしか表示確認ができません。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/d3e9cde2-90fa-5ac6-cccb-b6695afa731c.png" width="200"><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/80502/934a2208-5854-34e8-a5a4-a35e7d25879e.png" width="200">

## 変換式

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

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

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