[Editor] 적 생성 Editor Window 제작 과정 part.1

깃헙 링크 : https://github.com/ljs1206/TestProject

GitHub - ljs1206/TestProject: this Repository organized what I studied

문득 개발 하다 보니까 적을 만들때 계속 수동으로 만드는게 불편하기도 해서 그 과정을 모듈화 해서 Eidtor로 만들면 편할 거 같다는 생각이 들어서 모듈화를 하는 과정을 담은 블로그를 쓰게 되었다. 어느정도 만든 게 어떤 식으로 만들었지 설명을 하면서 다음 글 부턴 수정한 날에 어떤 것을 추가했는지를 써볼 예정이다...

혹시 필요하다면 Package를 남길테니 다운로드 해주면 좋을 거 같다.

TestAsset.unitypackage

0.02MB

 

일단 기본적으로 UIToolkit를 사용해서 EditorWindow을 만들었음을 알린다.

지금 까지 만든 Window는 저 정도이고 생성 + 비주얼라이저(이름 변경 가능) 정도 만들었다. 변경 사항이들이 생길 때마다 글을 추가할 예정이다.

 

UIToolkit과 EditorWindow 연동시키기

저런 식으로 Eidtor Window를 만들게 되면 UIToolkit과 연동되는 Uxml, Uss, C#Script를 전부 다 만들어 준다. 그럼 짜잔! 이런 식으로 EditorWindow가 만들어진다!

먼저 Uxml 파일로 들어가서 필요없는 것들이 좀 있어서 지워줄 예정이다.

저기에 있는 라벨들을 지워주고 C# 스크립트를 수정해보자

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class TestWindowVisual : EditorWindow
{
    [SerializeField]
    private VisualTreeAsset m_VisualTreeAsset = default;

    [MenuItem("Window/UI Toolkit/TestWindowVisual")]
    public static void ShowExample()
    {
        TestWindowVisual wnd = GetWindow<TestWindowVisual>();
        wnd.titleContent = new GUIContent("TestWindowVisual");
    }

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object
        VisualElement root = rootVisualElement;

        // VisualElements objects can contain other VisualElement following a tree hierarchy.
        VisualElement label = new Label("Hello World! From C#");
        root.Add(label);

        // Instantiate UXML
        VisualElement labelFromUXML = m_VisualTreeAsset.Instantiate();
        root.Add(labelFromUXML);
    }
}

아마 이름 빼곤 다 똑같을 거다. VisualTessAsset은 Uxml를 불러오는 거다.

ShowExample은 Window를 보여주는 역활을 한다. 이때 Uxml을 표시해준다.

CreateGUI는 실제 GUI를 표현해주는 함수이다. root는 필수고 (Uxml의 최상위 오브젝트임)

아래 label은 필요가 없으니 삭제한다.

나머지는 필요하니 놔두고 중요한게 있는데

labelFromUXML.style.flexGrow = 1;

이 코드를 꼭 추가 하자 안하면 아예 아무것도 안보인다. 왜 이러냐면 Uxml에서 설정해도 여기서 상위 VisualElement의 grow가 0이라서 하위 자식도 전부 다 안보이게 된다 그러니까 꼭 넣어주자.

코드는 이정도면 충분하고 일단 Uxml에서 GUI 배치를 하겠다.

UIToolkit 기본 설정들

이 설정을 켜서 뷰를 Dark 모드로 설정할 수 있게 만들 것이다. 제가 Dark 모드를 사용해서 그런 것이니 Editor로 Light를 사용하면 Light 사용하면 보기 편할 것이다.

넓이랑 높이는 800x600으로 사용할 예정이다. 따라서 뷰에서도 800x600으로 사용한다.

먼저 설정한 프리팹들을 관리하는 Eidtor부터 만들어 보겠다.

생김새의 특징으로는 왼쪽이 프리팹들을 표시해주는 부분과 오른쪽 인스펙터 부분으로 나뉜다는 부분이다. 먼저 비교작 간단한 왼쪽부터 만들어 보겠다.

 

PrefabView

제일 상위 Visual Element를 만들어서 EidtorWindow이름으로 하고 Shrink와 Grow를 1로만 설정 해둔다.

그리고 자식으로 Views를 만들어서 아까 말했던 inspector와 PrefabView 부분을 자식으로 한다. 근데 PrefabView는 계속해서 개체가 추가될 예정이여서 너무 많이 생성되서 UI 바깥으로 나가는 현상을 막기 위해서 ScrollView로 해준다.

그리고 inspector와 View 부분이 정확하게 반을 나올텐데 그 정도는 필요없는 관계로 ScrollView의 Basis를 26%로 설정하면 충분할 것이다. 그리고 Grow를 0으로 해서 나머지를 inspector가 채울 수 있도록 해준다.

 

아까 말했듯 PrefabView부터 꾸며 주겠다. 먼저 검색창을 만드는 방법 SerchBar를 만들어준다.

flex와 Size는 사진처럼 설정해주고

이렇게 해도 아마 첫번째 보여줬던거랑 안 비슷할텐데 그건

이런식으로 설정하면 될거다. (RGB는 39, 39, 39)

PrefabView의 Shrink와 Grow를 1로 하면??

아마 이렇게 만들어졌을 거다.

다음은 오른쪽 인스펙터를 꾸며볼 거다.

 

InspectorView

처음에는  상단 툴바와 버튼을 만들어 볼 거다.

요런식으로 만들어주고 ToolBar의 설정 부터 설명하자면 flex의 shrink와 Grow는 0(크기를 따로 설정해줄 거임)으로 Dir를 row-reverse로 하여 Label이 가장 왼쪽으로 오게 만들어준다.

Size에서 Height부분을 25px로 하면 대충 맞는다.

하위 자식인 Button이 상호작용을 해야하는 관계로 focusable를 활성화 해준다.

 

그다음 라벨은 버튼들을 제외하고 나머지 부분을 채워야 해야하기 때문에 Flex의 Shrink와 Grow를 1로 해준다.

그리고 Text를 왼쪽 정렬과 중앙 정렬을 해준다 (Font는 추가하지 않았는데 취양따라서 추가해도 되긴함)

그리고 이렇게 하면 너무 PrefabView 쪽으로 붙어 있어서 Position을 살짝 오른쪽으로 옮겨준다.(진짜 조금)

 

 

다음은 버튼이다. 버튼은 두개를 만들거라서 style를 따로 뺴두어서 작업했다.

바꾼거는 색깔 말고는 없다. (당연히 Shrink와 Grow는 0으로 나머지 부분을 채우는 용도이기 때문)

 

이렇게 해주면 ToolBar부분은 끝났다!

잘 나오는 모습

 

다음은 

이 파일 네임 부분이다. PrefabView에서 Prefab을 선택했을 때 이름을 띄워주는 부분이다.

이건 UIToolkit에서 TextFeld 하나만 추가하고 이름을 FileName으로 바꿔주면 된다.

필요하면 나중에 수정할 예정이긴하다.

 

이 아래에 있는 큰 부분을 Flex의 Shrink, Grow를 1 배경색과 Border를 변경했다.

(배경색은 60 60 60) (보더는 90 90 90)

 

Dir를 column-reverse로 해서 순서대로 정렬되도록 한다. (이 VisualElenemt에 여러가지 것들을 추가할 예정이라서)

그리거 Justify Content는 flex-end로 해주면 된다.

이렇게 하는 이유는 이런식으로

정렬을 하기 위해서다 Justify context는 안 건들여도 되긴하는데 반대로 정렬하고 싶어서 사용했다.

그리고 이 안에

이런 녀석을 만들어줄 건데.. 원래는 inspectorView를 띄워서 편집이 가능하게 하려고 헀는데 너무 복잡해서 지금은 안만들고 바로 생성자 부분으로 넘어갈 것이다.

 

이 다음은 다음 쳅터로 짤라서 진행하겠다.