徳島ゲーム開発ごっこ 技術ブログ

ゲームを作るために役に立ったり立たなかったりする技術を学んでいきます!

【Unity】 色の16進数情報とタグを使ってカラフルな人生を送る

ColorUtility と使ったお話。
ColorUtility を初めて使ったわけでもないのですが、このクラスの存在をよく忘れてしまうのでメモ書き。
f:id:urahimono:20211103215504p:plain


この記事にはUnity2020.3.21f1を使用しています。
.Netのバージョン設定には.Net4.x を使用しています。

カラータグを使おう

UI.TextTextMeshPro のテキストの色を変えたければ、 color プロパティをいじればいいですよね。
ですが、文字ごとに色を変えたい場合はこうはいきません。

UI.TextTextMeshPro のテキストには html のようなタグが使えます。
タグの中には Color があり、これを使うことで文字ごとに色を変えれます。
タグを使う条件として、 UI.Text の場合は supportRichText を、
TextMeshPro の場合は richText のプロパティを有効にしておく必要がありますよ。
Inspector 的にはこれらですね。

f:id:urahimono:20211103215515j:plainf:id:urahimono:20211103215517j:plain

では早速使ってみましょう。

// GameManager.cs
using UnityEngine;
using UnityEngine.UI;
public class GameManager : MonoBehaviour
{
    private void Start()
    {
        Text textUI = GetComponentInChildren<Text>();
        textUI.text = "大坪奈津子の\n<color=magenta>脳内</color><color=yellow>アドベンチャー</color>";
    }
} // class GameManager

f:id:urahimono:20211103215533j:plain

カラフルな文字が出てきた!

ちなみに Debug.Log() などのログシリーズでもこのタグ機能は使えるんですよ。
使ってみましょう。

// GameManager.cs
using UnityEngine;
public class GameManager : MonoBehaviour
{
    private void Start()
    {
        Debug.Log("<color=red>ゴジカル</color>");
        Debug.LogWarning("<color=yellow>バンリク</color>");
        Debug.LogError("<color=cyan>いまナニさんぽ</color>");
    }
} // class GameManager

f:id:urahimono:20211103215546j:plain

ログがカラフルになりましたね。
キャラクターやコリジョンなど分野ごとに色を変えれば見やすいかもしれませんね。

ちなみにカラーの名前を指定していますが、16進数で色情報を指定することもできます。
こんな感じですね。

// GameManager.cs
using UnityEngine;
using UnityEngine.UI;
public class GameManager : MonoBehaviour
{
    private void Start()
    {
        Text textUI = GetComponentInChildren<Text>();
        textUI.text = "<color=#FF84E1>脳アド</color>";
    }
} // class GameManager

f:id:urahimono:20211103215604j:plain

さて、最後にシリアライズしたカラー情報を指定するようにしてみましょう。
ただ、Color クラスの情報をどうやって16進数に変換すればいいんだ……?
まあ rgb の値は持ってこれるから、 0.0 - 1.0 の値を16進数に変換することは出来なくないけど面倒くさいなぁ……。

Color クラスにそんな便利な関数はない。
でも ColorUtility クラスには変換出来る関数が用意されているぞ!
助かるー。

ColorUtility.ToHtmlStringRGB() docs.unity3d.com

今回はアルファ値は使わないので、 ToHtmlStringRGB() のほうでOKですね。

// GameManager.cs
using UnityEngine;
using UnityEngine.UI;
public class GameManager : MonoBehaviour
{
    [SerializeField]
    private Color m_color = default;

    private void Start()
    {
        string hexText = ColorUtility.ToHtmlStringRGB(m_color);
        Text textUI    = GetComponentInChildren<Text>();
        textUI.text    = $"<color=#{hexText}>脳アド</color>";
    }
} // class GameManager

f:id:urahimono:20211103215632j:plain

f:id:urahimono:20211103215640j:plainf:id:urahimono:20211103215642j:plain

はーい、出来ました。
さあこれでゲーム中のありとあらゆるテキストをカラフルにしていきましょう。