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

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

【Unity】GUIStyleでエディタの色を変えてみたよ

 夏が終わりましたが、今年も実に色のないものでした。
 だからこそせめて、エディタ上くらいはカラフルにしたいものです。
 今回はGUIStyleを使って、エディタに色を付けていきましょう。


この記事にはUnity2018.2.8f1を使用しています。
.Netのバージョン設定には.Net4.x (4.6相当)を使用しています。

あらすじ

  • GUIStyleを使って、テキストの色を変えてみる。
  • GUIStyle.normalGUIStyle.focusedを設定してテキストの色を変える。
  • new GUIStyle()を使う場合は、各GUIの設定をしてあげないと体裁を保てない。
  • EditorStylesクラスに各GUIのデフォルトの設定があることがわかった。
  • だが、EditorStylesのプロパティをそのまま変更すると、他のGUIにも影響が出てしまった。
  • new GUIStyle()に引数でEditorStylesのプロパティを渡すことで解決した。

エディタを拡張する準備をしちゃうぞ!

 以前、GUI.colorを使って、エディタの背景色を変えることにチャレンジしてみました。
www.urablog.xyz

 今回はGUIStyleを使って、エディタのテキストの色を変えてみようと思いますよー。
 ではまずエディタを拡張する準備をしましょうか。
 適当なコンポーネント用のスクリプトと、それのエディタを拡張するスクリプトを作っちゃいます。
TestComponent.cs

using UnityEngine;

public class TestComponent : MonoBehaviour
{

} // class TestComponent

TestComponentEditor.cs

using UnityEngine;
using UnityEditor;

[CustomEditor(typeof(TestComponent))]
public class TestComponentEditor : Editor
{
    public override void OnInspectorGUI()
    {

    }

} // class TestComponentEditor

GUIStyleを使っちゃうぞ!

 準備が整ったので、さっそくGUIStyleを使っていきましょう。
docs.unity3d.com

 うーむ、プロパティがいっぱいあって何を使えばいいのかがわからない……。
 今回はテキストの色を変えていきたいので、GUIStyle.normalGUIStyle.focusedあたりのプロパティを使えばいいのかな。
 このプロパティのtextColorの値をいじれば、色が変わってくれるはず、たぶん。

 この設定したGUIStyleの値を、試しにテキストフィールドで使ってみましょうか。
 確か引数でGUIStyleを指定できた気がする。
docs.unity3d.com

TestComponentEditor.cs

public override void OnInspectorGUI()
{
    EditorGUILayout.TextField("ラベル 1", "テキスト 1");

    GUIStyle style  = new GUIStyle();
    style.normal.textColor  = Color.red;    // 通常時の色
    style.focused.textColor = Color.blue;   // フォーカス時の色

    EditorGUILayout.TextField("ラベル 2", "テキスト 2", style);
}

 よし、設定できたぞ!
 結果を見てみよう。

f:id:urahimono:20180922045530p:plain

 何かしらね、コレ……。
 うん、まあテキストの色が変わっているのは確認できるね。
 ただ、ラベル1のテキストフィールドと比べてみて分かる通り、全然違うものになっちゃってるよね!
 もはやこれをテキストフィールドと呼ぶわけにはいかないよね。

 どうしてこんなことに……。
 おそらくこれは、テキストの色の設定しかしていないから、こんなことになってしまったのだろう。
 前述したとおり、GUIStyleにはborderなどのたくさんのプロパティがあった。
 これらのプロパティの値をテキストフィールド用の値に設定してあげねばならないのだろう。
 な、なんと面倒くさい。

ざんねん!わたしのぼうけんは ここでおわってしまった!

EditorStylesを使っちゃうぞ!

 諦めるのはまだ早い!
 さすがにどこかに、各エディタGUIのデフォルトの値が用意されているに違いないんだ!
 どこかなー、どこかなー。

 ここだ!
 EditorStylesクラス!
docs.unity3d.com 

 このクラスには、各エディタGUIのデフォルトの値が用意されているのだ!
 これを使えば、さきほどの問題は解決できるぞ。
 テキストフィールドの場合は、textFieldのプロパティを使えば良さそうだ。

TestComponentEditor.cs

public override void OnInspectorGUI()
{
    EditorGUILayout.TextField("ラベル 1", "テキスト 1");

    GUIStyle style  = EditorStyles.textField;
    style.normal.textColor  = Color.red;    // 通常時の色
    style.focused.textColor = Color.blue;   // フォーカス時の色

    EditorGUILayout.TextField("ラベル 2", "テキスト 2", style);
}

 よし、スクリプトができたぞ!
 結果を見てみよう。

f:id:urahimono:20180922045613p:plain

 うん、うまく出来たようだ。
 GUIStyleを設定していないラベル1のテキストの色まで変わっていることを除けばな!

 しかも、被害はこれだけじゃないんだよ。
 このGameObjectのコンポーネント全体をみてみよう。

f:id:urahimono:20180922045624p:plain

 全てのテキストの色がーーーーー。

 どうしてこんなことに……。
 おそらくEditorStyles.textFieldの値を直接書き換えているからだろう。
 EditorStyles.textFieldの値を書き換えてしまったことにより、この世(Unity)のテキストフィールドの理の全てが変わってしまったんだろう。
 僕は何ということをしてしまったのか。

ざんねん!わたしのぼうけんは ここでおわってしまった!
 

組み合わせて使っちゃうぞ!

 とりあえずEditorStylesのプロパティを直接書き換えることが危険なことはわかった。
 ではどうすればいいのか。

 GUIStyleのスクリプトリファレンスを見直すことで問題は解決できた。
 そう、GUIStyleのコンストラクタには、引数にGUIStyleを指定するものがあるのだ。
docs.unity3d.com

 このコンストラクタに、EditorStylesのプロパティを指定してあげれば良いのではないだろうか。
 試してみよう。

TestComponentEditor.cs

public override void OnInspectorGUI()
{
    EditorGUILayout.TextField("ラベル 1", "テキスト 1");

    GUIStyle style  = new GUIStyle(EditorStyles.textField);
    style.normal.textColor  = Color.red;    // 通常時の色
    style.focused.textColor = Color.blue;   // フォーカス時の色

    EditorGUILayout.TextField("ラベル 2", "テキスト 2", style);
}

f:id:urahimono:20180922045639p:plain

 遂にできたぞ!
 これが僕の望んでいた形だ!

 長い旅だった気がする。

 この調子でどんどんエディタを拡張していくぞー!

 とりあえずこの部屋にある窓でも試しに割ってみようかな。

ざんねん!わたしのぼうけんは ここでおわってしまった!