VITALIFY.ASIA logo

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

Author profile
Toshihiko Nagaoka2024/01/04
ハイカジ風のゲームをダークな色調にアレンジする①

弊社のUnityチームには、タワーディフェンス好きのエンジニアが多く在籍しており、空いた時間でコツコツとオリジナルのタワーディフェンスゲーム(HotDog TD)を開発しています。

HotDog TD on Steam
This is an awesome Tower Defense game that you need to protect the world from Alien ’s invasion

仕事ではハイパーカジュアルゲームを手掛けることが多く、ここまでは自然と絵作りもハイカジ風になっていました。ですが、このゲームの世界観を考慮すると、もっとダークな色合いの方が似合っているのではないかと考え、思い切って大々的に絵作りの方針を変更してみました。

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

完成後に後半の記事を公開する予定です。

変更前のゲーム画面

変更前のゲーム画面は、ハイパーカジュアルと呼ばれるジャンルに多く使用される、平面的で明るい色調になっていました。

これはこれで多くの人に受け入れられやすい絵作りと言えますが、ホットドッグ型の宇宙人の襲来をケチャップで撃退するというシュールな世界観には、もっと攻めた絵作りの方が相応しいのではないかと考え始めました。

オリジナルのゲーム画面

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

まずは、敵味方の各ユニットのマテリアルに光沢を持たせました。

こうするとこで、ホットドックはよりホットドッグらしく見え、またケチャップのチューブはプラスチック素材に、トースターは金属素材に見えるようになります。

敵味方の各ユニットのマテリアルに光沢を適用

地面にテクスチャを適用

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

地面にテクスチャを適用

Color Curvesで色味を補正

ここからは、色味や明暗のバランスを調整して、より特徴的な雰囲気作りを行なっていきます。まずは、Color Curvesを使って赤色のカーブを下に添付した画像のように調整しました。

これは、画面全体から「赤の色味を引く」という調整を行なっています。言葉からはイメージしにくいですが、画面全体の青や緑が強まることになります。ただし、ケチャップの強烈な赤味は、カーブをこのくらい曲げた程度では弱回りません。

結果的に、ケチャップ以外の要素からは赤味が抜き取られ、ケチャップの赤味が強調されることになります。

Color Curvesで画面全体の赤味を調整
Color Curvesの設定。赤のカーブの中心部を引き下げる

明るさを調整

テクスチャを適用し赤味を補正したことで、画面全体が暗くなりました。最後の仕上げにさらに画面が暗くなる効果を適用する予定なので、ここで一度全体の明るさを引き上げておきます。

今回は、Lift Gamma Gainを使用しました。シーン内のライトや環境光の強さを変更することでも似たようなことができますが、環境光が強すぎると物体が影を落とさなくなったり、副作用も生じます。

そのため、画質の最終的な微調整には、Lift Gamma Gainのような「ポストプロセス(Post-Processing)」で行なった方が良いようです。

Lift Gamma Gainで全体的に色を明るくする

影を強調

明るさを調整したことで、全体的にぼんやりとした印象になりました。

そのため、少しだけ明暗の差を強調します。今回はShadows Midtones Highlightsを使用しました。

オーディオやギターの音作りなどで高音部と低音部を強調した音を「ドンシャリ」と呼びますが、ここでやっていることも基本的には同じです。

ハイライトを引き上げ、影を引き下げることで、画面が全体的に派手な印象になります。

Shadows Midtones Highlightsでハイライトと影を強調

Vignette(ビネット)を適用

最後の仕上げに「Vignette(ビネット)」を適用します。

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

Vignetteを適用して画面の周辺部を暗くす

ここで豆知識。「Vignette(ビネット)」の語源はフランス語で「ブドウの木」または「葡萄園」を意味する「Vigne」に由来しています。

この用語は、もともと18世紀の本や文書でページの周辺に描かれた、ブドウの蔓や葉をモチーフにした装飾的なデザインを指していました。

時間が経つにつれて、「Vignette」という言葉は、文書や写真などの周辺部が中心に向かって徐々に消えていくような効果、特に周辺部が暗くなるようなデザインや効果を指すようになりました。

このビジュアル効果は、視覚的な焦点を中心に集めるため、または芸術的な感覚を加えるために使用されます。

Steam

HotDog TD on Steam
This is an awesome Tower Defense game that you need to protect the world from Alien ’s invasion

価格はお安くなっておりますので、ぜひプレイして頂き感想など頂けますと幸いです!

1,000社以上の事業成長を支えた圧倒的な『スピードと柔軟性』で、御社のアイデアを最短で形にします。まずは無料で壁打ちしませんか?

無料相談はこちら
#Game & Unity

「Game & Unity」の関連記事

デジタルツイン基盤開発進捗 02 : 今後の展望と3D表示機能の導入

デジタルツイン基盤開発進捗 02 : 今後の展望と3D表示機能の導入

Toshihiko Nagaoka2026/04/16

離散事象シミュレーション(DES)を軸としたデジタルツイン基盤に、3D表示機能を搭載。2Dによる論理検証と3Dによる視覚的直感の統合が、いかに設備投資リスクを抑え、DXにおける意思決定を根本から変革するか。その真価と技術的ロードマップを紐解きます。

デジタルツイン基盤開発進捗 01:.NETによるヘッドレスかつ決定論的な工場シミュレーションの構築
Game & Unity

デジタルツイン基盤開発進捗 01:.NETによるヘッドレスかつ決定論的な工場シミュレーションの構築

Toshihiko Nagaoka2026/04/02

.NETを用いたヘッドレスかつ決定論的な工場シミュレーションの構築手法と、完全な再現性を担保する高度なアーキテクチャ設計を解説します。

【脱Unity】Unity歴10年の筆者が敢えて問う、これからのゲーム開発

【脱Unity】Unity歴10年の筆者が敢えて問う、これからのゲーム開発

Toshihiko Nagaoka2026/03/13

Unityを10年愛用してきたエンジニアが、敢えて「脱Unity」の視点から今後のゲームエンジンの技術選定を考察します。

ぼくはデューパー、なんでもきいてね!