スポンサーリンク

【初心者向け】コントラストの高低とゲーム画面の関係について考えてみた

ゲーム制作研究
スポンサーリンク
スポンサーリンク

コントラストの正体とゲームでの活用法

「コントラスト」と言ってもここではいわゆる、画面全体の明度のコントラストについて考えてみたいと思います。

えきふる
えきふる

「コントラスト」という言葉そのものには「対比」「対象」という意味があるよ

こんな人の役に立つかも!
・コントラストが「高い低い」って何だよ!?
・なんだかゲーム画面がパッとしない
・何となくじゃなくてちゃんと狙ってコントラストを調整したい

ゲームやイラストを作成していて、最終的に画面を構成した際にイマイチまとまりが無かったり、
思っていた方向性と違う雰囲気になってしまうことありませんか?私はよくあります。

えきふる
えきふる

何となくで色調補正してきた

今回は色調補正で良く調整する「コントラスト」について考えてみました。
同じ絵でもコントラストを意図的に管理してあげる事で印象を操作できる1つの要因になるかもしれませんので、よければ参考にしてみてください。

コントラストの高低で画面の雰囲気をコントロール

下記は架空のゲーム画面を適当に作成して、色調補正でコントラスト値を上げ下げした絵です。

A.コントラスト低い
B.基準
C.コントラスト高い
えきふる
えきふる

絵のクオリティに関しては言いっこなしで頼む

どんな印象でしたか?
コントラストの低い絵は少し眠たい雰囲気ですが、ボタンは見易いのではと思います。
これは絵の主張が弱いので、その分ボタンの視認性が上がった結果ですね。

コントラストが高い絵はハッキリとしていますが、ボタン等と馴染みすぎているかもしれません。
(実際にはボタン等には枠を作ったりして、単体で視認性をあげたりするとは思います。)

これはコントラストが高いところに人間の目が注目してしまうという特性が原因です。

上記は一例ですが、コントラストが高ければ必ず良い訳ではなく、
ゲームコンセプトや意図に合わせてコントロールする事が何より大事だと私は考えています。

Tips:コントラストが与える印象とゲームに関して考察
コントラストが高い

■印象:硬い/メリハリがある/クール/清んでいる
■ゲームイメージ:ペルソナ5/スプラトゥーン/原神

コントラストが低い

■印象:柔らかい/モヤっとしている/優しい/暖かい
■ゲームイメージ:ポポロクロイス物語/ファイナルファンタジータクティクス/サガフロンティア2

※上記ゲームイメージは主観ですが、水彩のような表現や優しい雰囲気ではコントラストが高すぎない方が雰囲気が出そうですね。

コントラストが高い・低いってどういうこと?

コントラストが高い→画像内の1番明るい場所と1番暗い場所の明度の差が大きいということ。
コントラストが低い→画像内の1番明るい場所と1番暗い場所の明度の差が小さいということ。

下記のグラデーション画像で見るとどういうことか分かり易いかと思います。

A.コントラスト低い
B.基準
C.コントラスト高い
えきふる
えきふる

どのグラデーション画像も画像内では上が一番明るく下が一番暗い色だよ

Aのコントラストが低い画像は完全な白色と黒色がなく中間のグレー色ばかりで境目がぼやっとしていますよね。こういった黒い場所白い場所が曖昧なものは「コントラストが低い」となります。
画面全体も当然締まりの無いものになっていきます。

Cのコントラストが高いものは基準の画像と比べると黒い部分はより黒く、白い部分がより白くなっているかと思います。このように境目はハッキリいているものはコントラストが高いものと言えるでしょう。

なんだか画面がはっきりしない絵や、暗部や明部が強すぎて情報が消えてしまっている絵に関しては
コントラストやレベル補正で調整するとより豊かな表現ができるかもしれません。

一方で透明水彩などの淡い表現ではあまり黒を使わず、重ね塗りや補色を混ぜる等で濃淡を表現することも多いようです。
ですのでコントラストを下げる→黒部分の表現を制限するのは淡さを出すことに対して効果が期待できそうです。

Tips:コントラストを下げるときは他の色調補正と組み合わせた方が良いかも

単純にコントラストを下げると灰色っぽくなるだけになってしまうことも多いと思いますので、
コントラストを下げつつ他の色調補正で調整してあげるとよりイメージに近くなるかと思います。

A.基準
B.コントラスト低
C.コントラスト低+色調補正


上記の一番右(画像C)はコントラストを下げると同時に彩度を上げて色を鮮やかに、ランプの周りだけコントラストの補正を除外して顔まわりだけ少し目立たせてみました。

Tips:黒と白に差が大きいという事は…?

コントラストが高い、暗部と明部の「差が大きい」という事は、間に使える明度数が多いとも言えるのではないかと思います。
つまり、より使える数が多いということはより豊かに絵を表現できるポテンシャルを持っているとも言えるのかもしれません。

コントラスト領域について考えた。

また、コントラストが低い=明部と暗部の差が少ないというのは、何も中間色のグレーだけではなく、上記の低コントラスト領域①のように暗い部分ばかりの領域、②のように明るい部分ばかりの領域
という可能性もありますね。(領域は適当に枠を置いています)

Tips:ゲームエンジン内でもコントラストの調整はできる

汎用的なゲームエンジン等ではポストエフェクトとして画面の色調補正ができるものが付いていることが多いです。画像データに戻らなくとも、ここで最終絵を調整していくのもオススメ。
※ポストエフェクト…カメラから見える画面全体にかけるエフェクト調整のこと。色調補正以外にもブラーやリフレクション、色収差など様々なものがある。

えきふる
えきふる

最後に調整しちゃお

Tips:実は…写真やCGとかの、基本が8bitカラー(256色表示)じゃない方が使える知識なんだよね

イラストはだいたい8bitカラー(256色表示)の範囲で作成されることが多いのではと思いますが、写真やCGのようにこれを超える色数(16bitとか32bit画像とか)でデータとして保存している画像の方がコントラスト調整は効果が大きいと思います。
人間の目では視認できないレベルの暗部の情報も画像には保存してあるので、コントラストを調整してあげるとその暗部のディティールが出てきます。

まとめ

・コントラストが高い=1番黒い所〜1番白い所の差が大きいということ。ハッキリした印象になる。
・コントラストが低い=1番黒い所〜1番白い所の差が小さいということ。淡い印象になる。
・コントラストを調整することで印象や視線を操作できる。
・大事なことはゲームのコンセプトに合ったコントラストはどこか?ということ!

えきふる
えきふる

このゲーム画面のコントラストはこうだと思う!とかあったらぜひ参考にさせて欲しい

スポンサーリンク
ゲーム制作研究
シェアして下さるととっても嬉しいです!
えきふるをフォローする
スポンサーリンク

コメント

タイトルとURLをコピーしました