画像の合成ルールについて（メモ）

　RPGを作っていると、なんとなしにゲーム画面に陰影をつけたい…となることもあります。例えば真っ黒の画像に穴を開けて、ドラクエ1のたいまつのようにマスクっぽい処理を加えるとか、そういうのであったり、それにグラデーションをつけてもっと自然にしたり。くらいマップに明かりを灯してみたり。

　これってカンで作ってると、どんどん色がくすんでいくのですが、その理由を自分用にメモっておきます。これ、すぐ忘れるんですよね。

実際に合成してみる

　というわけで、実際に試してみたものをまず用意しました。グレー(#4d4d4d)がもとの色合いです。まずレイヤー1で減算合成します。さらに、その上から加算合成で重ねます。すると、だいたいですが、もとの色合いに戻る…という結果になります。

戻る色と戻らない（くすむ）色がある

　スポイトツールでチェックしてみるとわかりますが、戻っている色もありますが、すこし色合いが飛んでるものもありますね。色が飛ぶものは、元画像の暗い色合いの部分です。

なぜか

　これは簡単で、色の値のRGBのどれかが減算時に失われているからです。

　例えば、樹の5段の葉っぱ部分の中心（3段目）のベースカラーは、元が#389531(56,149,49)に対して、#4d4d4d(77,77,77)で減算すると#004800(0,72,0)、その上で加算合成を行うと#4d954d(77,149,77)になっています。

　もうわかりますね。減算合成した時点で、赤と青の色値が失われているんです。色の値がマイナスになったら、その値はどこかに消えてしまい、加算したときには加算に使った色の値がそのまま与えられ、色が明るくなってしまうんです。

不具合の例

 　先の事例通りのことが起こっています。僕のゲーム「箱庭セレナータ」では、もともとキャラクター付近には「背景透明+白グラデ円」加算（透明度あり）の明かりが灯っていて、ギリギリ近づくと隠し通路が見える…という仕様です。

　詳細を書くと長くなるので省きますが、この仕様のレイヤー下に「視界」という、白減算画像をベースにした処理を加えたことで、もとの壁（黒部分#131314）の色合いが#000000になってしまい、せっかくの隠し通路の色が飛んでしまい、見えなくなっている上に、全体的に画像がくすんだよう(#303030)に見えてしまいました。

　これを解決する方法は、今のところウディタではない様子なので、「視界」は完成版ではなくなるかもしれません。それに、凄まじく処理が重いですしね…。

まとめ

　画像合成処理で色値RGBのうちどれかの値が0になった場合、その色を上から加算合成などで戻そうとしても色飛びが起きているため戻せない。明かり関連を使うときは、この問題に注意すること。です。