[💬] uitoolkit 공부하고 제일 잘 쓰고있는것.

[익명(39.123)]

그것은 바로 PropertyDrawer에 uitoolkit을 활용하는 것임.

간단한 문제상황을 만들고 커스텀ui로 문제를 해결하는 예제를 만들어본다.

유니티로 게임을 만들면서 커스텀 클래스를 사용할 일은 길가에 채이는 돌처럼 많다.

가령 간단한 검사( 문자 "$"를 포함하지 않는다.) 가 필요한 스트링이 필요한 상황이라고 해보고 아래와 같은 클래스를 만들었다.

[Serializable]

public class MyString

{

// 이것은 "$" 를 포함하면 안되는 스트링이다. 이유는 없다 왜냐하면 이 코드는 예제코드니까.

// 에디터에서 수정한 이후에 런타임에서는 변경될 필요가 없는 스트링.

[SerializeField] private string doNotUseDollar;

public string Value => doNotUseDollar;

#if UNITY_EDITOR

public static bool CheckValidation(string value)

{

return !value.Contains("$");

}

#endif

}

근데 문제가 발생했다. 이 스트링값은 사람이 에디터에서 입력해줘야 하는 값인데, 입력과정에서 실수가 일어날 확률이 높다.

런타임에서 에디터로부터 입력된 값을 함수에서 사용 전에 오류 여부를 체크를 할 수도 있지만,

사실 저런것은 애초에 잘못들어가 있으면 안되는 값이기 때문에 에디터에서만 검사를 하기로 결정했다.

그렇다면 실수를 없애기 위해 잘못된 값이 들어가면 경고를 해주면 좋겠음.

일단 이 클래스를 사용하는 간단한 컴포넌트를 만들어보자.

public class MyMonoComponent : MonoBehaviour

{

[SerializeField] private MyString test;

[SerializeField] private MyString[] testArray;

private void Awake()

{

Debug.Log(test.Value);

}

}

그리고 유니티에 추가하면

이렇게 나오겠지?

그러면 이제 값을 입력할 때 잘못 입력하면 (여기서는 $를 입력한 경우)

아래 그림처럼 잘못 입력한 필드가 빨갛게 되면 값을 입력하다가 실수했을 때 바로 알수있겠지?

이걸 구현하는 것은 사실 아주 간단하고 여러가지 구현방법이 있음. 취향에 맞게 좋아하는 방법을 쓰면 되는건데

나는 uitoolkit을 사용하고 나서는 아래처럼 구현하는 것을 매우 좋아하게 되었음.

uitoolkit사용 방법을 공부했다면,

응당 uitoolkit에서 빌딩블록으로 사용하는 VisualElement라는 클래스를 다루게 될 것임.

uitoolkit에서 제공하는 UIBuilder를 사용하면 간편하게 uxml파일을 편집할수 있음

편집된 uxml파일은 VisualTree를 어떻게 구성할지에 대해 적어논 파일임.

VisualTree는 VisualElement들로 구성되어 있고

이름처럼 트리구조이기 때문에 최상단 root에서부터 하위 VisualElement까지 접근하기 위해

하위구조를 쿼리해오기 위한 Q<T> 또는 Query(string id) 함수를 제공함.

그렇다면 어떤 VisualElement 하위요소에 접근하기 위해, id나, 해당 요소의 클래스이름이 필요한 것은 알고 있을거임

이제 이걸 이용할거임.

UIBuilder에서 보면 기본적으로 제공되는 UIElement 들이 있다.

스크립트에서는 아래와 같은 클래스를 사용할 수 있다. (귀찮아서 밑에 3개만 적음)

UnityEngine.UIElements.Label

UnityEngine.UIElements.TextField

UnityEngine.UIElements.PropertyField

여기서 UnityEngine.UIElements.TextField의 구조를 살펴보자.

최상단 VisualElement로 "TextField"가 있고 그 하위로 "Label"과 "#unity-text-input"이 있음을 알 수 있따.

그러면 MyString.doNotUseDollar 의 값이 변경되는 것을 콜백으로 등록하고, 스트링을 검사하는 함수를 실행해서 그 값에 따라

"#unity-text-input"의 background 컬러를 변경해주면 될거임.

그것을 위해 일단 Editor폴더를 생성하고 MyStringProperyDrawer.cs 파일을 만들자.

(namespace에 맞는 위치에 생성해주자, 여기서는 Asset/Editor/MyStringProperyDrawer.cs)

그리고 아래의 코드를 입력해보자.

using UnityEditor;

using UnityEngine;

using UnityEngine.UIElements;

[CustomPropertyDrawer(typeof(MyString))]

public class MySerializableClassPropertyDrawer : PropertyDrawer

{

public override VisualElement CreatePropertyGUI(SerializedProperty property)

{

}

}

얼마전의 나처럼 PropertyDrawer를 처음 사용해보는 사람을 위해 잠깐 설명하고 넘어감.

ProperyDrawer클래스는 특정 Serializable Class가 유니티 인스펙터에서 그려지는 방법을 표현할 수 있게 해주는 클래스임.

공식문서가 설명이 더 잘되어있음. 설명이 필요한 사람은 읽어보고 오도록

https://docs.unity3d.com/kr/2021.3/Manual/editor-PropertyDrawers.html

프로퍼티 드로어 - Unity 매뉴얼

https://docs.unity3d.com/kr/2022.3/Manual/editor-PropertyDrawers.html

프로퍼티 드로어 - Unity 매뉴얼

그런데 여기서 재미난점은 내가 콩의 저주로 링크를 두번단것이 아니라는 점임

각각 2021.3과 2022.3 버전의 다른 문서임.

그런데 2022.3 버전 문서에는 다음과 같은 문구가 추가되어있음.

커스텀툴 만들 때는 uitoolkit을 써라는 거임. 그렇다면 한번 써줘야 되지 않을까??

(나는 유니티가 uitoolkit을 계속 발전시켜서 장기적으로는 웹/앱디자인철학을 인게임에도 적용할 수 있게 하고,

더불어 flutter나 react native처럼 복잡한 ui기능을 지원하는 제품을 만들어 게임 외에도 다양한 시장을 노리려는 시도로 보고있음)

그렇다면 어떻게 쓸까?

문서에 예제는 아래와 같이 OnGUI함수를 오버라이드 하라고 한다. 이것은 전통적인 방법이다.

using UnityEditor;

using UnityEngine;

[CustomPropertyDrawer(typeof(Ingredient))]

public class IngredientDrawer :PropertyDrawer

{

// Draw the property inside the given rect

public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)

{

...생략...

}

}

그러나 CreatePropertyGUI함수를 오버라이드하면 VisualElement를 사용할 수 있다.

 CreatePropertyGUI함수는 특정 Serializable Class를 표현하기 위한 VisualElement를 반환하는 함수이다.

일단은 MyString을 표현하기 위해

1) TextField를 생성하고

2) TextField와 MyString.doNotUseDollar 프로퍼티를 바인딩하고

3) TextField의 값이 변경 될 때 4) 역할을 하는 함수를 콜백으로 등록

4) string값을 검사해서 "#unity-text-input"의 background를 true면 진한회색배경, false면 빨간색으로 변경.

을 할거임.

아래 주석을 달아논 코드를 보면서 설명하겠음.

using UnityEditor;

using UnityEngine;

// VisualElement를 사용하기 위해 필요하다.

using UnityEngine.UIElements;

// MyString을 어떻게 인스펙터에 그릴 것인가.

[CustomPropertyDrawer(typeof(MyString))]

public class MySerializableClassPropertyDrawer : PropertyDrawer

{

// 아래에서 사용할 색상을 미리 정해두었다.

private static readonly Color InvalidBackgroundColor = Color.red;

private static readonly Color BackgroundColor = new Color(0.157f, 0.157f, 0.157f);

public override VisualElement CreatePropertyGUI(SerializedProperty property)

{

// 루트 VisualElement 생성

var container = new VisualElement();

var doNotUseDollarProperty = property.FindPropertyRelative("doNotUseDollar");

// TextField (VisualElement) 생성.

var doNotUseDollarField = new TextField

{

// mvvm모델의 binding이라는 개념을 공부해보자. 여기서 설명하기에는 길다.

// 대충 말하면 내부적으로 딕셔너리가 있고 바인딩패스는 키가 된다고 이해하면 된다.

bindingPath = doNotUseDollarProperty.propertyPath,

label = property.displayName

};

// TextField에 콜백 등록.

doNotUseDollarField.Reg1sterValueChangedCallback(value =>

{

// 변경된 값을 검사.

var isValid = MyString.CheckValidation(value.newValue);

//UI Builder에서 TextField의 구조를 봤던것을 기억하는가? (기억 안나면 위에 그림 다시 보고오면 좋을듯)

// TextField는 하위에 unity-text-input라고 이름붙여진 VisualElement를 가지고 있다.

var textInput = doNotUseDollarField.Q("unity-text-input");

// 윗줄처럼 하면 "unity-text-input" VisualElement를 반환받을 수 있다.

// 그리고 스타일을 설정해주자.

textInput.style.backgroundColor = isValid ? BackgroundColor : InvalidBackgroundColor;

});

// 맨처음 만든 컨테이너 하위에 텍스트필드를 추가한다.

container.Add(doNotUseDollarField);

return container;

}

}

UIBuilder에서 VisualTree를 만드는 방법을 참조해 propertyDrawer를 정의할 수 있었다.

[익명(112.152)]

정보추

[ㅆㅇㅆ(124.216)]

와우

[ㅆㅇㅆ(124.216)]

저거로도 쓰는거구나. 개추