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

弊社のUnityチームには、タワーディフェンス好きのエンジニアが多く在籍しており、空いた時間でコツコツとオリジナルのタワーディフェンスゲームを開発しています。
仕事ではハイパーカジュアルゲームを手掛けることが多く、ここまでは自然と絵作りもハイカジ風になっていました。
ですが、このゲームの世界観を考慮すると、もっとダークな色合いの方が似合っているのではないかと考え、思い切って大々的に絵作りの方針を変更してみました。

タイトル画面に使用しているのが、変更後のゲーム画面です。
まだまだ改善点は多く、現在もまだ引き続き改善中ですが、ここまでの過程を記事にしてみましたので、ぜひご覧ください。
完成後に後半の記事を公開する予定です。

変更前のゲーム画面

変更前のゲーム画面は、ハイパーカジュアルと呼ばれるジャンルに多く使用される、平面的で明るい色調になっていました。
これはこれで多くの人に受け入れられやすい絵作りと言えますが、ホットドッグ型の宇宙人の襲来をケチャップで撃退するというシュールな世界観には、もっと攻めた絵作りの方が相応しいのではないかと考え始めました。

オブジェクトに光沢を適用

まずは、敵味方の各ユニットのマテリアルに光沢を持たせました。
こうするとこで、ホットドックはよりホットドッグらしく見え、またケチャップのチューブはプラスチック素材に、トースターは金属素材に見えるようになります。

地面にテクスチャを適用

続いて、地面に荒地のテクスチャを適用しました。

Color Curvesで色味を補正

ここからは、色味や明暗のバランスを調整して、より特徴的な雰囲気作りを行なっていきます。
まずは、Color Curvesを使って赤色のカーブを下に添付した画像のように調整しました。
これは、画面全体から「赤の色味を引く」という調整を行なっています。言葉からはイメージしにくいですが、画面全体の青や緑が強まることになります。
ただし、ケチャップの強烈な赤味は、カーブをこのくらい曲げた程度では弱回りません。
結果的に、ケチャップ以外の要素からは赤味が抜き取られ、ケチャップの赤味が強調されることになります。

明るさを調整

テクスチャを適用し赤味を補正したことで、画面全体が暗くなりました。
最後の仕上げにさらに画面が暗くなる効果を適用する予定なので、ここで一度全体の明るさを引き上げておきます。
今回は、Lift Gamma Gainを使用しました。
シーン内のライトや環境光の強さを変更することでも似たようなことができますが、環境光が強すぎると物体が影を落とさなくなったり、副作用も生じます。
そのため、画質の最終的な微調整には、Lift Gamma Gainのような「ポストプロセス（Post-Processing）」で行なった方が良いようです。

影を強調

明るさを調整したことで、全体的にぼんやりとした印象になりました。
そのため、少しだけ明暗の差を強調します。
今回はShadows Midtones Highlightsを使用しました。
オーディオやギターの音作りなどで高音部と低音部を強調した音を「ドンシャリ」と呼びますが、ここでやっていることも基本的には同じです。
ハイライトを引き上げ、影を引き下げることで、画面が全体的に派手な印象になります。

Vignette（ビネット）を適用

最後の仕上げに「Vignette（ビネット）」を適用します。
ビネットは、画面の端を暗くすることで中央部分に視覚的な焦点を当てる効果を指します。これは、画面にドラマチックな見栄えを実現するために使用されます。

ここで豆知識。「Vignette（ビネット）」の語源はフランス語で「ブドウの木」または「葡萄園」を意味する「Vigne」に由来しています。この用語は、もともと18世紀の本や文書でページの周辺に描かれた、ブドウの蔓や葉をモチーフにした装飾的なデザインを指していました。
時間が経つにつれて、「Vignette」という言葉は、文書や写真などの周辺部が中心に向かって徐々に消えていくような効果、特に周辺部が暗くなるようなデザインや効果を指すようになりました。このビジュアル効果は、視覚的な焦点を中心に集めるため、または芸術的な感覚を加えるために使用されます。

旧バージョンはこちらから

旧バージョンはこちらからご購入頂けます。
価格はお安くなっておりますので、ぜひプレイして頂き感想など頂けますと幸いです！