ウディタで疑似マスクを試してみよう

０．マスクってなんぞ
画像の特定の部分を描画したり、しなかったりという処理のことです。詳しくはご自身の手でggってください。

１．とりあえず体験してみよう

WoditorEvCOMMAND_START
[103][0,1]<0>()("とりあえず変数の初期化")
[121][4,0]<0>(1600010,9000116,2,12288)()
[121][4,0]<0>(1600011,9000117,2,12288)()
[121][4,0]<0>(1600015,20,0,0)()
[103][0,1]<0>()(" ")
[103][0,1]<0>()("ピクチャ番号の設定")
[121][4,0]<0>(1600020,1000,0,0)()
[103][0,1]<0>()(" ")
[103][0,1]<0>()("ピクチャの設定（RGBはそれぞれ0~100までの値にしてください）")
[121][4,0]<0>(1600025,255,1600015,12288)()
[121][4,0]<0>(1600026,80,0,0)()
[121][4,0]<0>(1600027,80,0,0)()
[121][4,0]<0>(1600028,80,0,0)()
[103][0,1]<0>()(" ")
[103][0,1]<0>()("マスク処理本体")
[121][4,0]<0>(1600021,1600020,0,0)()
[179][1,0]<0>(1600015)()
[150][18,1]<1>(4656,1600021,0,240,240,1,1600025,1600010,1600011,100,0,0,33554432,0,0,1600026,1600027,1600028)("<SQUARE>")
[121][4,0]<1>(1600021,1,0,256)()
[150][18,1]<1>(4384,1600021,0,1,1,1,1600025,9000071,9000072,100,0,0,33554432,0,0,1600026,1600027,1600028)("\f[42]★")
[121][4,0]<1>(1600021,1,0,256)()
[0][0,0]<1>()()
[498][0,0]<0>()()
WoditorEvCOMMAND_END

上記のイベントコードをコモンイベントエディタにコピペして、起動条件を並列実行(常時)にした上でテストプレイを開始してみてください。
暗くなっている矩形の上にマウスカーソルを置いてあげると、星型の明るい部分ができると思います。明るくなっている部分は元々の画面の色と同じはずです。
これがウディタで出来る疑似マスクの１つです。

２．何が起こっているの？
結論から言うと、
同じ色の加算と減算を一緒に描画してプラマイゼロにしているんです！

ちょっとだけお勉強チックな話になりますが、算数の話なので、きっと難しくはないと思います。思います……。

色というものは結局のところ数字です。赤(R)・緑(G)・青(B)という３つの値から表されるものです。
ここでは色の値を (赤, 緑, 青) と表していきます。
というのを頭に入れておいてもらいたいです。

ウディタには
加算と減算という表示形式があります。(他にも種類はありますが……)
それぞれ、下の色にどのような効果を付与するか。というやつです。

加算は名前の通り、下の色に色を足します。プラスします。
(0, 0, 100)という色が元々あるとします。青色ですね。
ここに(100, 0, 0)という色、要するに赤色を加算で重ねてあげます。
(0, 0, 100) + (100, 0, 0) → (100, 0, 100)
ですね。紫色ができそうです。

ということで実際にウディタで試してみたのが以下のスクショです。

WoditorEvCOMMAND_START
[121][4,0]<0>(9000021,0,0,0)()
[150][18,1]<0>(48,3000,0,320,240,1,255,0,0,100,0,0,33554432,0,0,30,30,30)("<SQUARE>")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("色用変数の設定")
[121][4,0]<0>(1600010,0,0,0)()
[121][4,0]<0>(1600011,0,0,0)()
[121][4,0]<0>(1600012,100,0,0)()
[121][4,0]<0>(1600015,100,0,0)()
[121][4,0]<0>(1600016,0,0,0)()
[121][4,0]<0>(1600017,0,0,0)()
[103][0,1]<0>()(" ")
[103][0,1]<0>()("通常色の見本")
[150][18,1]<0>(4128,3001,0,1,1,1,255,30,65,100,0,0,33554432,0,0,1600010,1600011,1600012)("<C>通常<\n>(0,0,100)")
[150][18,1]<0>(4144,3002,0,50,50,1,255,30,105,100,0,0,33554432,0,0,1600010,1600011,1600012)("<SQUARE>")
[103][0,1]<0>()(" ")
[150][11,1]<0>(4128,3003,0,1,1,1,255,70,105,100,0)("\f[24]＋")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("加算色の見本")
[150][18,1]<0>(4384,3004,0,1,1,1,255,110,65,100,0,0,33554432,0,0,1600015,1600016,1600017)("<C>加算<\n>(100,0,0)")
[150][18,1]<0>(4400,3005,0,50,50,1,255,110,105,100,0,0,33554432,0,0,1600015,1600016,1600017)("<SQUARE>")
[103][0,1]<0>()(" ")
[150][11,1]<0>(4128,3006,0,1,1,1,255,150,105,100,0)("\f[24]→")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("実際にブレンドしたやつ")
[150][18,1]<0>(4144,3008,0,50,50,1,255,190,105,100,0,0,33554432,0,0,1600010,1600011,1600012)("<SQUARE>")
[150][18,1]<0>(4400,3009,0,50,50,1,255,190,105,100,0,0,33554432,0,0,1600015,1600016,1600017)("<SQUARE>")
WoditorEvCOMMAND_END

参考用にスクショのために作った処理も一緒につけておきます。

では、次は減算です。
減算は名前の通り、下の色から色を引きます。マイナスします。

先程の処理に減算を追加してみましょう。
加算で赤色を足したところですが、その後で減算で赤を引いてみます。
式は
(0, 0, 100) + (100, 0, 0) - (100, 0, 0) → (0, 0, 100)
という感じになります。最初に表示している青に戻りそうですね。

ということで実際にウディタで試したものがこちら。

WoditorEvCOMMAND_START
[121][4,0]<0>(9000021,0,0,0)()
[150][18,1]<0>(48,3000,0,320,240,1,255,0,0,100,0,0,33554432,0,0,30,30,30)("<SQUARE>")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("色用変数の設定")
[121][4,0]<0>(1600010,0,0,0)()
[121][4,0]<0>(1600011,0,0,0)()
[121][4,0]<0>(1600012,100,0,0)()
[121][4,0]<0>(1600015,100,0,0)()
[121][4,0]<0>(1600016,0,0,0)()
[121][4,0]<0>(1600017,0,0,0)()
[103][0,1]<0>()(" ")
[103][0,1]<0>()("通常色の見本")
[150][18,1]<0>(4128,3001,0,1,1,1,255,30,65,100,0,0,33554432,0,0,1600010,1600011,1600012)("<C>通常<\n>(0,0,100)")
[150][18,1]<0>(4144,3002,0,50,50,1,255,30,105,100,0,0,33554432,0,0,1600010,1600011,1600012)("<SQUARE>")
[103][0,1]<0>()(" ")
[150][11,1]<0>(4128,3003,0,1,1,1,255,70,105,100,0)("\f[24]＋")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("加算色の見本")
[150][18,1]<0>(4384,3004,0,1,1,1,255,110,65,100,0,0,33554432,0,0,1600015,1600016,1600017)("<C>加算<\n>(100,0,0)")
[150][18,1]<0>(4400,3005,0,50,50,1,255,110,105,100,0,0,33554432,0,0,1600015,1600016,1600017)("<SQUARE>")
[103][0,1]<0>()(" ")
[150][11,1]<0>(4128,3006,0,1,1,1,255,150,105,100,0)("\f[24]—")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("減算色の見本")
[150][18,1]<0>(4640,3007,0,1,1,1,255,190,65,100,0,0,33554432,0,0,1600015,1600016,1600017)("<C>減算<\n>(100,0,0)")
[150][18,1]<0>(4656,3008,0,50,50,1,255,190,105,100,0,0,33554432,0,0,1600015,1600016,1600017)("<CIRCLE>")
[103][0,1]<0>()(" ")
[150][11,1]<0>(4128,3009,0,1,1,1,255,180,180,100,0)("\f[24]→")
[103][0,1]<0>()(" ")
[103][0,1]<0>()("実際にブレンドしたやつ")
[150][18,1]<0>(4144,3010,0,50,50,1,255,230,180,100,0,0,33554432,0,0,1600010,1600011,1600012)("<SQUARE>")
[150][18,1]<0>(4400,3011,0,50,50,1,255,230,180,100,0,0,33554432,0,0,1600015,1600016,1600017)("<SQUARE>")
[150][18,1]<0>(4656,3012,0,50,50,1,255,230,180,100,0,0,33554432,0,0,1600015,1600016,1600017)("<CIRCLE>")
WoditorEvCOMMAND_END

参考用のコードも載せておきます。

ちょっと趣向を変えて、減算は円形にしてみました。
同じ色の値の加算と減算が描画されている部分、今回でいうと円形に合わせて一番下に敷かれていた色になっていますね。

コレが最初に書いた、
同じ色の加算と減算を一緒に描画してプラマイゼロにしている
というやつです。

３．まとめ
加算と減算を同時に描画することで、あたかもマスク処理が施されているかのように見える処理の説明でした。
応用次第では、ウディタだけでグラデーション文字が作れたり、暗闇の中で複数の明かりを灯したりすることもできます。
演出の幅がかなり広がるので、覚えておいて損はしない知識だと思います。

長々と書きましたが、ここらへんで終わろうと思います。
読んでくださりありがとうございました。