プチメタ3.0

刺激を受けた物事に対する感想や考察、資産運用や英語学習、自己成長に関することなど。


ゲーム画面でよく使われる半透明表現とその仕組み


ゲーム画面に画像を表示するときは
プレイヤーに与えたい印象によって
さまざまな表現を使い分けるが、
その中でも一番基本的な半透明表現について解説する。

すべての色は3色のバランスで決まる

「光の三原色」と呼ばれる理屈で、
コンピューター上で表現される色は
赤(R)と緑(G)と青(B)の混ぜ具合で決まる。

RGB(255,0,0) RGB(255,0,255) RGB(255,165,0)
RGB(0,250,154) RGB(255,228,181) RGB(139,69,19)
RGB(255,255,255) RGB(0,0,0) RGB(128,128,128)

RGBの各要素は0~255の範囲で指定するので
その組み合わせは 256 × 256 × 256 = 約1677万種類ほど。




背景もキャラクターもすべて同じように
このRGBのバランスで管理されている。


また、背景とキャラクターが重なる部分は
キャラクター側のRGB値によって上書きされる

つまり背景側のRGB値を考慮する必要がないため、
計算がシンプルで処理が軽い。

半透明は互いのRGB値を合成する


半透明の場合はキャラクター越しに背景が透けて見えるが、
これは背景側のRGB値が干渉しているということだ。
具体的には、背景とキャラクターそれぞれのRGB値を
半分ずつ合わせた値が使われている




透明度を変化させたい場合は
使用するRGB値のバランスを変える。
キャラクターを薄く表示させる場合は
その分、背景側のRGBが多く使われるというわけだ。


半透明処理は美しく自然な表示になるが、
背景側のRGB値と合わせて計算しないといけないため、
画像の面積が大きくなるほど処理負荷が高くなる。

半透明の代わりにディザが使われることもある


処理負荷の高い半透明表示を使わずに
同様に背景が透けて見える効果を再現するため、
ディザリングが使われることもある(ディザ抜き)。
これは一定の割合でピクセルを間引いて表示する方法だ。




ピクセルの隙間から背景が見えるため、
半透明に近い効果が得られるし、
間引く度合いを調整することで透け具合を変えられる。
各ピクセル自体は不透明なので
背景側のRGB値が一切必要なく、処理負荷が軽いのが特徴だ。

画像を明るく見せる加算合成


通常の半透明とは違って背景とキャラクターのRGB値を
ただ足すだけなのが「加算合成」
だ。


互いのRGB値が足されるということは
RGB(255,255,255)である白に近づくため、
画像を明るく見せる効果を生む。
(最大値は255なのでそれ以上にはならない)


何かが輝いているように見せたい場合や
神々しい存在に感じさせたい場合によく使われるが、
白い画像はそれ以上白くならないので
雪景色の背景など、もともと明るい画像だと変化が少ない。
(魔法を放つシーンで画面を暗くするのはこのため)




また、RGB値を足し合わせるということは
各要素がすべて0である黒い画像は
背景に何の影響も与えないということだ。


つまり、加算合成では
白や黒に近い画像は効果が薄くなるので
使用する素材の色味をよく考える必要がある。

与えたい印象に合わせて表現方法を変える


同じ画像を使ってもその表現方法によって
見た人に与える印象がかなり変わるので、
ゲーム開発やデザインに関わる人は
こういった特性をしっかり理解しておく必要があるだろう。



mclover.hateblo.jp

総アクセス数