原カバンは鞄のお店ではありません。

Unityを使ったゲーム制作のあれこれを綴っていきます。

【Unity】色の三属性(色相・彩度・明度)を使った画面造り

年始の挨拶

「新年明けましておめでとうございます。今年もよろしくお願いいたします。」と年始の挨拶がいい加減億劫な皆さんこんにちは。社会人になると学生のような一年毎の大きな変化がないので年の節目とか結構どうでも良いのですが、この挨拶だけは毎年同調圧力の下で強いられます。
年始といっても一週間ぐらいの休暇期間が開けただけなのに、顔を合わせる度に同じ挨拶をしなければならないのは非常に面倒くさい。これって日本だけなのでしょうか。海外ではどうなんでしょうね?

 

デモンズソウル

年末にPS5が購入できたものの、あまりに遊ぶゲームがないので懐かしさも手伝ってPS5版デモンズソウルを購入しました。

気が付くとPS3版の発売から13,4年も経つみたいですが、さすがに全てのソウルシリーズの祖というだけあって今プレイしても遊びごたえのあるゲームだと思います。
当時は苦戦したデーモン達が以外にあっさり倒せたり、逆に金目黒骸骨や黒ファントムに苦戦したり、とPS3版を懐かしい気持ちで振り返りながら楽しむことが出来ました。
PS3版より画面が美麗になった分、ホラー感は減りましたが(PS3版では怖かったラトリア1がちっとも怖くない)リアルな画質で迫力があるし、最近のソウルシリーズにはない仕様(ソウル傾向等)は初め遊ぶ方には新鮮で面白いと感じるのではないでしょうか。

 

色相・彩度・明度

技術畑の私にとって色を決定する要素と言えば光の3原色(RGB)のみで、それ以外の要素に関してはあまり意識していませんでした。
でずがデザイン方面では色はRGBではなく色相・彩度・明度の尺度(色の三属性)で測るのが基本のようです。
色相・彩度・明度の三属性はそれぞれ「H(Hue)=色相」「S(Saturation)=彩度」「V(Value)=明度」の文字で表現され、色を決定するツールではRGBと合わせて画面上に表示されていることが多いです。

 

このうち色相はわかりやすくて、赤・黄・緑・青のように、色を特徴づける色みのことで色相環と呼ばれる色相を円上に配置したものを使って表現されます。

 

彩度明度はそれぞれ「色の鮮やかさ」と「色の明るさ」の尺度を指すのですが、言葉で説明するのは少しわかりづらい為、光の三原色(RGB)とその混色に対して彩度と明度を段階的に変えた表を下に作ったので、これを参照してイメージを掴んでください。

 

彩度・明度を変えた奥行表現

先程のカラー表から彩度と明度を変更すると、色みを保ったまま色の濃淡や明るさを変えられるという事がわかると思います。
この性質が画面作りにどのように利用できるかというと、例えば下のような山間部を表現した画面の場合、

山の部分は奥行に関係なく同じ色のマテリアルで作られているため、最奥にある山でも近くに感じる画面となっています。

これを奥行に応じて彩度・明度を変えた色のマテリアルを配置するようにしてみます。

具体的には奥に行くほど彩度が低くて明度は高くなるように、手間は逆に彩度が高くて明度が低い色を配置します。色相は変更しません。
そうすると

元の画面と比べると画面に奥行きが出るようになったと思います。

次にこの彩度・明度の関係を保ったまま、今度は色相を変えてみます。
インパクトを出すために一か所の色相を大きく変えて、合わせてSkyBoxも変更すると個性的な画面が出来ると思います。

 

彩度・明度の違いによる季節の表現

彩度の高低と明度の高低はそれぞれの組み合わせて四季を表現するグループに分けることができます。

実際にこのグループを使うとどのくらい違いが出るのか検証してみました。
箱庭的なモデルが欲しかったので下のアセットに付属していたサンプルを使いました。

このアセットのWorld - Tropicalというプレハブを使います。

このモデルに使わているマテリアルの色をすべて夏のグループ(高明度&低彩度)に沿った色のマテリアルに変更します。

 

かなり夏感が増した画面になりました。

 

次にWorld - Forrestというプレハブに対して

冬のグループ(低明度&高彩度)に沿った色のマテリアルに変更します。

 

冬の訪れを感じる画面になったと思います。

 

まとめ

色は色相・彩度・明度の尺度で考えると以下の表現が簡便に行えることがわかりました。

  • 低彩度高明度=奥、高彩度低明度=手前で奥行表現
  • 彩度・明度の違いによる季節感の表現

また、色相を同じにすると画面に統一感が出て、逆に一部を大きく変えると個性的な画面となることが分かりました。
今後はこれらのことを考慮して画面造りに励んでいきたいと思います。

 

◇プライバシーポリシー

●個人情報の利用目的

当ブログでは、メールでのお問い合わせ、メールマガジンへの登録などの際に、名前(ハンドルネーム)、メールアドレス等の個人情報をご登録いただく場合がございます。

これらの個人情報は質問に対する回答や必要な情報を電子メールなどをでご連絡する場合に利用させていただくものであり、個人情報をご提供いただく際の目的以外では利用いたしません。

●個人情報の第三者への開示

当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。

・本人のご了解がある場合
・法令等への協力のため、開示が必要となる場合

個人情報の開示、訂正、追加、削除、利用停止
ご本人からの個人データの開示、訂正、追加、削除、利用停止のご希望の場合には、ご本人であることを確認させていただいた上、速やかに対応させていただきます。

アクセス解析ツールについて

当サイトでは、Googleによるアクセス解析ツール「Googleアナリティクス」を利用しています。

このGoogleアナリティクスはトラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。
この機能はCookieを無効にすることで収集を拒否することが出来ますので、お使いのブラウザの設定をご確認ください。

●免責事項

当サイトからリンクやバナーなどによって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。

当サイトのコンテンツ・情報につきまして、可能な限り正確な情報を掲載するよう努めておりますが、誤情報が入り込んだり、情報が古くなっていることもございます。

当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。

●プライバシーポリシーの変更について

当サイトは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。

修正された最新のプライバシーポリシーは常に本ページにて開示されます。