うら干物書き

ゲームを作りたい!

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

【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

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

 長い旅だった気がする。

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

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

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