2017年12月21日

Unity 意外と楽しいエディター拡張 ~レイアウト編~


エディター拡張について忘れないうちにいろいろメモ。今回はレイアウト変更に役立つ機能を紹介…


※このページの内容の動作確認にはUnity5.6を使用しています。
前回までの内容で、インスペクタ上でのプロパティの変更・保存は自由にできるようになりました。今回は、見た目を調整するときに特に役に立った処理をささっと4つほど紹介したいと思います。

Space

EditorGUILayout.LabelField("----- Space -----");

GUILayout.Space(20);

EditorGUILayout.LabelField("----- Space -----");

EditorGUILayout.Space();

EditorGUILayout.LabelField("----- Space -----");

空白を挿入したいときは GUILayout.Space(幅) か EditorGUILayout.Space() を使います。EditorGUILayoutのほうは引数なしで1行分の幅の調整が自動で行われます。

GUIStyle

GUIStyle centerbold = new GUIStyle()
{
 alignment = TextAnchor.MiddleCenter,
 fontStyle = FontStyle.Bold,
};

EditorGUILayout.LabelField("Properties", centerbold);
EditorGUILayout.PropertyField(prop1);
EditorGUILayout.PropertyField(prop2);

ラベルの表示形式を変えたい場合はGUIStyleクラスを使うと便利です。上の例ではcenterboldという名前のGUIStyleオブジェクトを作成。中央揃えと太字になるように値を設定して、それをLabelFieldに渡しています。richText = trueに設定すればリッチテキストで<b>とか<color>とかのタグを使えるようにもできます。

BeginHorizontal + EndHorizontal / BeginVertical + EndVertical

EditorGUILayout.BeginHorizontal();

GUILayout.Button("Button 1");
GUILayout.Button("Button 2");
GUILayout.Button("Button 3");

EditorGUILayout.EndHorizontal();

GUILayout.Button("Button 4");

Begin~とEnd~は必ずセットで扱います。BeginHorizontalとEndHorizontalの間にはさまれた部分は横に並んだ1つのグループとして表示され、 BeginVerticalとEndVerticalの間の要素は縦に並んで表示されます。上の例ではボタンを3つ並べて表示しています。複雑な入れ子にすることも可能です。

GUI.skin.box / "box"

EditorGUILayout.BeginVertical(GUI.skin.box);

EditorGUILayout.LabelField("Button A & B");

EditorGUILayout.BeginHorizontal();

GUILayout.Button("Button A");
GUILayout.Button("Button B");

EditorGUILayout.EndHorizontal();

EditorGUILayout.EndVertical();

さっきのBeginHorizontalとBeginVerticalの引数にGUI.skin.boxを渡すとそのグループを四角で囲むことができます。ひとつのかたまりだということが見た目にもわかりやすくなるのでオススメです。上の例ではVerticalのグループの中にHorizontalを入れ子にしています。ちなみにGUI.skin.boxを指定する以外に、文字列で"box"と入力してもOKです。スタイルがあらかじめ登録されているんですね。


以上、この4つを使うだけでもインスペクタがぐぐぐいっと見やすくなると思います。「widthとかheightとかいちいち計算しながらRect指定するのめんどくせえ!ぐぎぎぎ!」などと現代社会のストレスで圧し潰されそうな人でもこれなら手軽に設定できそうですね。ただし、GUI、GUILayout、EditorGUILayout、GUIStyle…と、似たような名前のクラスが山ほどでてくるのでそこだけごっちゃにならないようにしましょう。

0 件のコメント:

コメントを投稿