見出し画像

ハイカジ風のゲームをダークな色調にアレンジする②

この記事は、下記の記事の続編です。
https://note.com/modern_lion463/n/n4f550ecbc761

前回に引き続き、弊社が開発中のタワーディフェンスゲームの画面に、視覚効果を適用していきます。
元々はハイパーカジュアル風の明るい色調の画面作りでしたが、前回の記事でゲーム内容に合わせて暗めの色調に変更しました。
今回の記事では、全体的に暗くしたシーンの中で、重要なオブジェクトの明るさや鮮やかさを強める効果を主に用いました。

Bloomを適用する

まずは、みんな大好きBloomの効果を適用します。

Bloom効果は、光源が周囲に柔らかい光を漏らし、光がぼんやりと滲んで見える現象を模倣したものです。
この効果は、カメラのレンズ特性や人間の目の光散乱特性を再現するために使用されます。
実際の世界では、極めて明るい光源(例えば直射日光や強い人工光)を見たとき、その光がレンズや眼球の内部で散乱し、見ている対象の周囲に柔らかい輝きが生じることがあります。
この現象は、特に暗い環境で明るい光源を見たときに顕著に現れます。

下記にBloom適用前と適用後の画像を掲載しました。

Bloom適用前
Bloom適用後

ご覧頂いたように、Bloomを適用したのは、下記の三箇所です。

  • タワーを配置可能な位置を示す逆三角形の矢印

  • 防衛ライン(ここを越えられたらライフを失う)

  • 敵が出現してくるUFOのライト

これらの要素Bloomで光らせたのは、もちろん視覚的な効果もありますが、このゲームの中でやるべき事を開始時に直感的に理解してもらうという目的がメインです。
どこから敵が攻めてきてどこに向かうのか、それを防ぐためのタワーをどこに配置できるのかを、この効果で表しています。

ゲーム開始後は、Bloom効果はほとんど分からないくらいまで弱めています。
上記の情報は既に頭に入っていることが期待されるので、インゲームの要素に集中してもらうためです。

ケチャップを鮮やかにする

続いて、このゲームの重要な要素であるケチャップの赤みを強めます。
前回の記事で全体をダークな色調でまとめた際、ケチャップの色も少し暗くなってしまいました。
そのため、ケチャップの色だけを明るくする処理を行いました。
下記が、適用前と適用後の画面です。

ケチャップの色が少し暗くなってしまった
ケチャップの色を鮮やかにする

ここで行なっている処理は単純です。
まずはケチャップのエフェクトを他のオブジェクトとは別のレイヤーに移します。
そして、ケチャップのレイヤーだけをレンダリングするカメラを、メインのカメラと同じ位置に置きます。
今まで追加してきたポストエフェクト処理は、すべてメインカメラのみに適用します。

そうするととで、メインカメラからの映像の上に、ポストエフェクトを適用していない鮮やかなケチャップの重ねることができます。

Chromatic Aberrationを適用

最後の仕上げにChromatic Aberrationを適用しました。
Chromatic Aberration(色収差)は、レンズを通過する光の波長ごとに屈折率が異なるために発生する現象で、これにより画像の端などで色がずれて見える効果が生じます。
特に古いカメラや安価なレンズを使用した時に意図せず生じる現象ですが、あえてこれを用いることで、安っぽいカメラを通じてゲームの世界を覗き見している印象を与えることができます。

ただし使いすぎると邪魔になるので、通常時はほんの少し違和感を感じさせる程度に抑えています。
敵が防衛ラインを通過しライフを失った時などにだけ、カメラの揺れと同時に色のズレを強め、衝撃による映像の乱れを表現しています。

記事の執筆用に強めの色収差を適用した状態

まとめ

全体的に暗めの色調の中に明るさや鮮やかさを強調したオブジェクトを導入することで、画面全体にメリハリを持たせることができました。

この記事で行う作業は、とりあえずここまでとします。
また進捗があれば、続編を公開しようと思います。


この記事が気に入ったらサポートをしてみませんか?