【Unity】オブジェクトの色(Color)実装の基礎から応用までを徹底解説!
Unityでは誰しも必ずColor(色)を扱うと思います。
しかし思ったより色に関して情報がまとまっておらず基本的な色の設定で躓いたり「色のLerpってなんだろう」と分からないことも色々とあると思います。
今回は色に焦点を当て、簡単なオブジェクトへの色の設定方法、スクリプトでの応用的な色の設定(Lerp・足し算など)、色にまつわる様々な方法を解説していきます。
Unityでの色について – RGBAとHSVA
Unityにおいて色の設定は様々ありますが、基本的にRGBAかHSVAのどちらかで指定します。
色を設定する場合は主に下のColor Editor(カラーピッカー)で行います。
色相環で大枠の色を選び、真ん中で濃淡を選んだり、下の部分でHSVAの値やカラーコードを入力して選んだりできます。
もちろんRGBAだけでなくHSVAの入力も可能です。
UnityではColor型の構造体が定義されており、RGBAを(0〜1)の値で保存しています。
RGBAやHSVAがどういうものなのか分からない方は、具体的に説明している記事があるので、そちらをご覧ください。
オブジェクトの色の基本的な設定方法
Unityで色を設定する場合大きく2つの方法があります。
- 色を設定したマテリアル(Material)をアタッチする
- 色を設定したスクリプト(Script)をアタッチする
これだけでは良く分からないと思うので、具体的な設定方法を説明していきます。
1.色を設定したマテリアル(Material)をアタッチする
この方法はUnityで一番はじめに教わるオブジェクトの色の付け方にだと思います。
オブジェクトに対して、色を指定したマテリアルを適用することで、オブジェクトがマテリアルの色になるというものです。
スクリプトを書く必要もなく、直感的に色を設定することができます。
設定手順
1.Hierarchyビューで適当なオブジェクト(Sphere)を作成します。
2.Projectビューで新しいMaterialを作成します。名前は何でも構いません。(例ではColorとします。)
3.先ほど作成したMaterialのInspectorビューで、Albedoの欄をクリックします。(下の画像の赤枠内)
4.Color Editorが表示されるので、適当な色を選択してください。
5.色の指定が終わったらColor Editorを閉じ、ProjectビューのMaterialからHierarchyビューのSphereへドラッグアンドドロップします。
6.すると、Sphereの色がMaterialの色に変更されます。
2.色を設定したスクリプト(Script)をアタッチする
スクリプトを使って色を設定することもできます。
主にColorクラスを使い、最も基本的なスクリプトでのカラー設定はnew Colorです。
1 |
<span class="crayon-e">Color </span><span class="crayon-i">color</span> = <span class="crayon-r">new</span> <span class="crayon-e">Color</span><span class="crayon-sy">(r</span><span class="crayon-sy">,</span> g<span class="crayon-sy">,</span> b<span class="crayon-sy">,</span> a<span class="crayon-sy">)</span><span class="crayon-sy">;</span> |
【引数】
r:赤(範囲は0~1)
b:青(範囲は0~1)
g;緑(範囲は0~1)
a:透明度(範囲は0~1)
設定手順
1.Hierarchyビューで適当なオブジェクト(Sphere)を作成します。名前は「Sphere1」とします。
2.CubeのInspectorビューの一番下にある「Add Component」をクリックし、開かれたメニューの一番下にある「New Script」をクリックし、スクリプト名を「SetColor」にします。
3.Projectビューから作成されたSetColorをダブルクリックで開きます。(Visual Studioなどスクリプト編集ツールが立ち上がります)
4.スクリプトを以下に書き換えます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
using System.Collections; using System.Collections.Generic; using UnityEngine; public class SetColor : MonoBehaviour { void Start() { // 現在使用されているマテリアルを取得 Material sphere1 = this.GetComponent<Renderer>().material; // マテリアルの色設定に赤色を設定 sphere1.color = new Color(1.0f, 0.0f, 0.0f, 1.0f); } } |
以上で設定は完了です。
「あれ、マテリアルと同じ感じでSphereの色変わってないじゃん」と思われた方もいらっしゃると思いますが、間違っていないのでご安心ください。
スクリプトの場合、再生ボタンを押した時に確認できます。
理由は、スクリプトはあくまで読み込まないと効果を発揮せず、再生の時だけ読み込まれる仕様になっているためです。
スクリプトでの指定の場合は、Debug(デバッグ)での確認を忘れないようにしましょう。
よく使われる色の設定方法 – ColorクラスのStatic変数
Colorクラスにはよく使われる色は既に用意されています。
black | 黒色。RGBA は (0, 0, 0, 1) |
blue | 青色。RGBA は (0, 0, 1, 1) |
clear | RGBA を (0, 0, 0, 0) にします。 |
cyan | シアン。RGBA は (0, 1, 1, 1) |
gray | 灰色。RGBA は (0.5, 0.5, 0.5, 1) |
green | ソリッドグリーン。RGBA は (0, 1, 0, 1) |
grey | gray と一緒。RGBA は (0.5, 0.5, 0.5, 1) |
magenta | マゼンタ。RGBA は (1, 0, 1, 1) |
red | 赤色。RGBA は (1, 0, 0, 1) |
white | 白色。RGBA は (1, 1, 1, 1) |
yellow | 黄色。RGBA は (1, 0.92, 0.016, 1) |
先述のスクリプトでRGB値を指定する代わりに上のStatic変数を使い、黒色に変更するスクリプトは以下になります。
new Color(r,g,b,a,)ではなく、Color.blackという書き方をします。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
using System.Collections; using System.Collections.Generic; using UnityEngine; public class SetColor : MonoBehaviour { void Start() { // 現在使用されているマテリアルを取得 Material sphere1 = this.GetComponent<Renderer>().material; // マテリアルの色設定に黒色を設定 sphere1.color = Color.black; } } |
応用的な色の設定方法
ここからは色に関する少し応用の部分を説明します。
- メタリック化・光沢を出す
- 色の足し算
- 色の線形補間
- グラデーション
今回は以上の4つに焦点を当てて解説していきます。
メタリック化・光沢を出す
オブジェクトのメタリックや光沢を表現したい場合は、マテリアル(Material)での設定が簡単です。
マテリアルのInspectorビューで「Metallic」と「Smoothness」で設定できます。(この2つによって表面の反射性やライトのレスポンスを変更されて表現します。)
- Metallic=数字が大きいほど金属に近くなり、数字が小さいほど無機質な感じになります。
- Smoothness=数字が大きいほど光を反射するようになり、数字が小さいほど光を反射しなくなります。
MetallicとSmoothnessの数値を変更するとこんな感じです。適切な数値に変更してみてください。
色の足し算
色も簡単に足し算することができます。(下の例は紫になります)
1 |
sphere1.color = Color.blue + Color.red; |
足し算の計算方法はRGBA毎に足し算をして、各値が0~1となります。
1を超える場合は1になります。
Blueは(0,0,1,1)、Redは(1,0,0,1)なので、(1,0,1,1)紫となります。
2色間での点滅 – 色の線形補間(Lerp)
2色で点滅させる方法として、Lerpを使用する方法があります。
LerpはColorの関数で、色の線形補間を実施します。
Vector3に対して線形補間ができるように、Unityでは色に対しても線形補間ができるのです。
色の線形補間だと、2色の間にある任意の色を表現することになります。
Vector3の線形補間について興味を持った方は以下の記事をご一読ください!
色のLerpによって以下のような2色での点滅を実装することができます。
これで使用したスクリプトは以下になります。ぜひ修正を加えて自分の思う色を表現してみてください。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
using System.Collections; using System.Collections.Generic; using UnityEngine; public class Gradation : MonoBehaviour { void Update() { // 現在使用されているマテリアルを取得 Material mat = this.GetComponent<Renderer>().material; // マテリアルの色設定に赤色を設定 mat.color = Color.Lerp(Color.red, Color.blue, Mathf.PingPong(Time.time, 1)); } } |
グラデーションの実装方法
オブジェクトの色をグラデーションにしたい場合は主に
- シェーダーを使う
- 有料のアセットを使う(例えばUI Gradient)
で実装します。
グラデーションの実装は大分長くなり別の記事で書きたいと思うので、本記事では詳細は割愛します。
シェーダーに関して学びたい方はこちらをご参考ください。
まとめ
今回はUnityでのColorについて解説しました。
本記事をもとに基本的な部分を掴んでいただき、自分が表現したい色の世界を創り上げていただければ幸いです。
Unityについて他にも色々と解説しているので是非そちらもご一読ください。
参考記事→)【Unity入門】ゲーム開発ができるようになる基礎知識まとめ

この記事はいかがでしたか?
もし「参考になった」「面白かった」という場合は、応援シェアお願いします!