[Unity Editor] GUIStyle를 이용하여 인스펙터 group box 만들기

유니티 개발자라면 유니티 에디터를 통해 인스펙터를 꾸며보는 일을 많이 해보거나 관심이 있을 것이다.

필자도 관심이 있어 이것저것 구현을 해보았는데 group box는 어떻게 만드는 건지 너무 궁금했고 만드는 방법을 찾게 되어 글로 적게 되었다.

유니티에서 지원하는 문법을 사용한 거라 자세한 설명은 없습니다.

혹시나 더 좋은 방법이 있다면 댓글로 공유해주세요!!

1. 초기 세팅

일단 아래와 같이 세팅을 해보자.

[CustomEditor(typeof(EditorTest))]
public class SectorEditorTest : Editor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        Transform targetTrans = ((EditorTest)target).transform;

        targetTrans.position = EditorGUILayout.Vector3Field("Position", targetTrans.position);
        targetTrans.rotation = Quaternion.Euler(EditorGUILayout.Vector3Field("Rotation", targetTrans.rotation.eulerAngles));
        targetTrans.localScale = EditorGUILayout.Vector3Field("Scale", targetTrans.localScale);
    }
}

그 결과는 아래와 같이 확인할 수 있다.

2. group box 만들기

여기서 말하는 group box 란 아래와 같이 인스펙터를 그룹핑하는 걸 의미한다.

저런 그룹 박스는 어떻게 만들 수 있을까??

코드는 아래와 같다

[CustomEditor(typeof(EditorTest))]
public class SectorEditorTest : Editor
{
    public override void OnInspectorGUI()
    {
        base.OnInspectorGUI();
        Transform targetTrans = ((EditorTest)target).transform;

        /**
         * 파라미터
         *  - text: 타이틀에 해당하는 개념
         *  - style: GUIStyle style
         */
        GUILayout.BeginVertical("Transform", new GUIStyle(GUI.skin.window));
        targetTrans.position = EditorGUILayout.Vector3Field("Position", targetTrans.position);
        targetTrans.rotation = Quaternion.Euler(EditorGUILayout.Vector3Field("Rotation", targetTrans.rotation.eulerAngles));
        targetTrans.localScale = EditorGUILayout.Vector3Field("Scale", targetTrans.localScale);
        GUILayout.EndVertical();
    }
}

여기서 핵심은 아래 코드이다.

/**
 * 파라미터
 *  - text: 타이틀에 해당하는 개념
 *  - style: GUIStyle style
 */
GUILayout.BeginVertical("Transform", new GUIStyle(GUI.skin.window));

GUILayout.BeginVertical() 과 GUILayout.EndVertical()은 메소드 사이에 있는 내용들을 Vertical로 노출되게 세팅해준다.

GUILayout.BeginHorizontal(), GUILayout.EndHorizontal()도 있는데
이것도 Vertical과 동일하게 메소드 사이에 있는 내용을 Horizontal로 노출되게 세팅해준다.

첫 번째 파라미터인 text는 그룹의 타이틀을 담당하고 있고,

그룹 박스를 표현한 것은 두 번째 파라미터인 new GUIStyle(GUI.skin.window) 이다.

GUIStyle 안에는 여러 스타일들이 존재하고 있는데 그중 window가 바로 그룹 박스와 같이 묶어주는 스타일인 것이다.