Day - 01. UI Toolkit 살펴 보기

유니티 버전 2020.3.21f1

 

Editor Window 선택 

 

창이 하나 열리고 

4개의 파일이 생겨났다 

 

PresetTemplate.uss 파일은 편집기 창의 스타일 지정 프로세스를 단순화하기 위해 미리 만들어진 스타일 시트다.

 

css 문법과 거의 비슷함 

 

윈도우창을 닫고 

여기서 다시 열수 있음 

 

 

 

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


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

    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);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PresetWindow.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/PresetWindow.uss");
        VisualElement labelWithStyle = new Label("Hello World! With Style");
        labelWithStyle.styleSheets.Add(styleSheet);
        root.Add(labelWithStyle);
    }
}

 

 

<?xml version="1.0" encoding="utf-8"?>
<engine:UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:engine="UnityEngine.UIElements"
    xmlns:editor="UnityEditor.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
>
    <engine:Label text="Hello World! From UXML" />
</engine:UXML>

 

 

Label {
    font-size: 20px;
    -unity-font-style: bold;
    color: rgb(68, 138, 255);
}

---

Visual Elements

 

모든 UIElement의 기본 빌딩 블록은 VisualElement입니다
모든 요소는 VisualElement 또는 VisualElement의 하위 클래스이므로 UI ​​계층 구조는 서로 부모가 되는 VisualElement의 컬렉션입니다.

 

https://docs.unity3d.com/kr/2019.1/Manual/UIElements.html

UIElements 개발자 가이드 - Unity 매뉴얼

https://docs.unity3d.com/ScriptReference/UIElements.VisualElement.html

Unity - Scripting API: VisualElement

 

각 편집기 창에는 계층 구조의 최상위 요소를 나타내는 rootVisualElement 속성이 있습니다.
루트는 Unity가 알고 그릴 수 있도록 VisualElement를 자식으로 추가해야 합니다.



Exploring UXML Documents
UXML 형식은 Unity에 고유하지만 HTML, XAML 및 XML과 같은 다른 마크업 언어에서 힌트를 얻습니다.
이들 중 하나에 익숙하다면 UXML로 작업하는 동안 많은 유사점을 발견할 수 있습니다.
이것이 생소하다면 잠시 시간을 내어 시작 UXML 문서에 익숙해지십시오.

https://docs.unity3d.com/Manual/UIE-UXML.html

Unity - Manual: The UXML format

 

 

 

 

PresetWindow.uxml 파일을 열어 내용을 살펴봅시다 
이것은 편집기 창의 rootVisualElement에 첨부된 기본 UXML 문서입니다 

박스밖에 코드는 편집기 창의 레이아웃에 직접적인 영향을 미치지 않는 코드이다 

<engine:Label text="Hello World! From UXML" />

일부 텍스트가 있는 간단한 레이블 VisualElement가 해당 행을 생성했습니다. 

VisualElement의 유형과 해당 속성의 두 가지 주요 부분으로 구성됩니다.

 

 

VisualElement 분석

여기에서 VisualElement의 유형은 engine에서 파생된 레이블로 컨트롤을 기본 제공합니다.
이는 자체 사용자 정의 속성을 사용하여 미리 정의된 모양과 기능을 가지고 있음을 의미합니다.

 

 

모든 VisualElement는 이름 및 클래스와 같은 공통 속성 세트와 함께 제공됩니다.

https://docs.unity3d.com/Manual/UIE-WritingUXMLTemplate.html

Unity - Manual: Writing UXML Templates

text 속성은 레이블에 고유하지만 모든 VisualElement는 다음 속성을 공유합니다.

이름: 고유해야 하는 요소의 식별자입니다. 
이름은 USS 및 C#에서 요소를 찾는 데 도움이 됩니다

클래스: 요소를 특성화하는 공백으로 구분된 식별자 목록입니다. 
클래스는 주로 스타일을 지정하기 위한 것입니다.

고유한 VisualElement를 만들 수도 있다 
Writing UXML Templates
https://docs.unity3d.com/Manual/UIE-WritingUXMLTemplate.html

Unity - Manual: Writing UXML Templates

레이블의 텍스트 속성을 변경해보자 

<engine:Label text="Hello Unity! From UXML" />

UXML 파일을 저장하고 Unity로 이동합니다.

아무 것도 변경되지 않은 것을 볼 수 있습니다.

UXML 변경 사항을 다시 로드하려면 편집기 창을 닫고 다시 열어야 합니다.

레이블의 텍스트 문자열 중 하나만 변경된 이유는 PresetWindow.cs가 코드에서 다른 두 레이블을 생성하기 때문이다 

 

---

Exploring the USS Document

CSS는 USS의 영감이며 많은 선택자와 속성이 유사합니다.
레이아웃 시스템은 Yoga Layout Engine을 사용합니다.
https://yogalayout.com/

Yoga Layout | A cross-platform layout engine

 PresetWindow.uss를 열고 내용을 확인합니다.

Label {
    font-size: 20px;
    -unity-font-style: bold;
    color: rgb(68, 138, 255);
}

현재 이 스타일 시트는 편집기 창 내에서 하나의 레이블에만 영향을 주지만 나중에 PresetWindow.cs에서 변경할 것입니다.

스타일 시트는 모든 VisualElement로 설정할 수 있으며 해당 VisualElement의 모든 자식에도 영향을 미칩니다.
유니버설 스타일 시트를 생성하려면 rootVisualElement에 스타일 시트를 할당해야 합니다.


레이블: 이 경우 유형 선택기입니다. 스타일 시트가 켜져 있는 VisualElement의 자식인 레이블 유형의 모든 VisualElement에 스타일을 적용합니다.

font-size: 레이블의 글꼴 크기에 영향을 줍니다.

-unity-font-style: 텍스트의 글꼴 스타일을 설정하는 사용자 지정 Unity 속성입니다. 옵션에는 굵게, 기울임꼴 등이 있습니다.

color: 텍스트의 색상을 수정하는 텍스트 속성입니다.

---

주 편집기 창 컨트롤러 탐색

 

Unity의 UIElements에서 UXML 및 USS 문서는 동적이므로 여러 편집기 스크립트에서 재사용할 수 있습니다.
이를 통해 편집기 창의 레이아웃과 논리를 분리할 수 있습니다.
또한 PresetWindow.cs가 UXML, USS 문서 및 논리를 함께 제공한다는 의미입니다.


이 컨트롤러 파일의 주요 기능은 다음과 같습니다.


Opening Window
편집기 창을 여는 제어 논리 및 방법을 제공합니다.

Starting Logic
UXML 문서 연결 및 USS 문서를 VisualElements에 적용하는 것과 같은 작업이 포함됩니다.

Event Management
사용자가 버튼을 클릭하고 편집기 창과 상호 작용할 때 발생하는 일을 지시합니다.

Creating Dynamic Elements
UXML은 정적이기 때문에 일부 VisualElement를 생성할 수 없습니다. 
다양한 수의 요소를 만들고 싶을 수 있으며 이를 수행하기 위한 논리가 필요합니다.



PresetWindow.cs를 열면 다음 코드가 표시됩니다. 
너무 많아 보이더라도 걱정하지 마세요. 분해하면 간단합니다.

 

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


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

    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);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/PresetWindow.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/PresetWindow.uss");
        VisualElement labelWithStyle = new Label("Hello World! With Style");
        labelWithStyle.styleSheets.Add(styleSheet);
        root.Add(labelWithStyle);
    }
}

 

 

 

 

---

 

Setting up the Editor Window


이전에는 편집기 창을 열기 위해 Window > UIToolkit > PresetWindow를 선택했다

해당 위치에 메뉴 항목이 존재하는 이유는 MenuItem 속성을 사용하여 설정한 메뉴 경로 문자열 때문입니다.

다음과 같이 변경해보자 

[MenuItem("Test/Preset Window")]

파일을 저장하고 Unity를 다시 열고 Test라는 도구 모음에 생성된 새 메뉴를 확인합니다.
Test > 프리셋 창을 선택하면 편집기 창을 더 쉽게 열 수 있습니다.

 

 

다음은 이 코드를 살펴보자 

PresetWindow wnd = GetWindow<PresetWindow>();
wnd.titleContent = new GUIContent("PresetWindow");

Unity 에디터 스크립팅의 일부로, 에디터 내 도구를 생성하기 위한 다른 경로를 제공합니다.
더 자세히 알고 싶다면 Unity3d 편집기 확장 튜토리얼을 확인하면 된다 
https://www.raywenderlich.com/939-extend-the-unity3d-editor

Extend the Unity3d Editor

 

Creating VisualElements Without UXML

편집기 창이 열리고 활성화되면 Unity는 OnEnable()을 호출합니다.
여기에서 모든 초기 레이아웃 코드, 바인딩 및 이벤트 트리거를 설정해야 합니다.

// Each editor window contains a root VisualElement object
VisualElement root = rootVisualElement;

이 코드는 이 편집기 창의 계층 구조 맨 위에 있는 VisualElement인 rootVisualElement에 대한 참조를 가져옵니다.
앞에서 설명한 것처럼 편집기 창에 요소를 추가하려면 VisualElements를 rootVisualElement에 자식으로 추가해야 합니다.

UXML 문서를 사용하여 구조화된 레이아웃으로 VisualElement를 생성할 수 있다는 것을 이미 보았지만 VisualElement를 동적으로 생성할 수도 있습니다.

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

Label은 VisualElement의 하위 클래스인 TextElement의 하위 클래스입니다.

이것이 이 코드에서 레이블을 VisualElement로 만드는 방법입니다.

 // 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("반갑습니다. Unity from C#");
        root.Add(label);

---

Attaching UXML and USS to the Editor Window

 

UXML 문서의 주요 장점은 여러 곳에서 사용할 수 있다는 것입니다.
Unity는 이를 달성하기 위해 상위 및 하위 관계가 있는 VisualElement의 계층 구조인 Visual Tree를 사용합니다.

각 편집기 창에는 상단에 rootVisualElement가 있는 고유한 시각적 트리가 있습니다.
UXML 문서를 편집기 창에 추가하면 두 개의 시각적 트리가 병합됩니다.


다음 코드는 UXML 파일에 대한 참조를 가져오고 해당 Visual Tree를 편집기 창의 Visual Tree에 통합합니다.

// Import UXML
var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>
    ("Assets/Editor/PresetWindow.uxml"); // 1
VisualElement labelFromUXML = visualTree.CloneTree(); // 2
root.Add(labelFromUXML); //3

PresetWindow.uxml이 생성하는 시각적 트리를 저장하는 변수를 만듭니다.
VisualTree.CloneTree()를 사용하여 비주얼 트리를 복제합니다.
트리는 labelFromUXML 변수에 관계를 저장합니다
root.Add(labelFromUXML)를 사용하여 labelFromUXML을 루트에 추가합니다. 
이렇게 하면 두 개의 시각적 트리가 병합됩니다.


USS는 해당 VisualElement의 모든 자식뿐만 아니라 해당 VisualElement에 영향을 미칩니다.

// A stylesheet can be added to a VisualElement.
// The style will be applied to the VisualElement and all of its
// children.
var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>
    ("Assets/Editor/PresetWindow.uss");
VisualElement labelWithStyle = new Label("Hello World! With Style");
labelWithStyle.styleSheets.Add(styleSheet);
root.Add(labelWithStyle);

이것은 단순히 PresetWindow.uss가 첨부된 labelWithStyle이라는 새 레이블을 만들고 루트에 추가합니다.

 

---

Modifying UXML and USS Attachments

현재 PresetWindow.uxml 및 PresetWindow.uss의 첨부 파일은 그다지 유용하지 않습니다.
원하는 것은 PresetWindow.uxml을 루트에 첨부하고 PresetWindow.uss가 범용 스타일 시트로 작동하도록 하는 것입니다.
CreateGUI() 에서 모든 코드를 제거하고 다음으로 교체하여 이 변경을 수행합니다.

PresetWindow.cs를 저장하고 편집기 창을 다시 로드하고 변경 사항을 확인합니다.

 

 

PresetWindow가 안열려서 TestWindow로 다시 만들어서 테스트 했습니다 

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


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

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

        VisualElement label = new Label("Hello World! From C#");
        root.Add(label);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/TestWindow.uxml");
        //VisualElement labelFromUXML = visualTree.Instantiate();
        var uxmlRoot = visualTree.CloneTree();
        root.Add(uxmlRoot);
        //root.Add(labelFromUXML);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/TestWindow.uss");
        //VisualElement labelWithStyle = new Label("Hello World! With Style");
        //labelWithStyle.styleSheets.Add(styleSheet);
        //root.Add(labelWithStyle);
        root.styleSheets.Add(styleSheet);
    }
}

다음은 방금 수행한 작업에 대한 단계별 분석입니다.
rootVisualElement에 대한 참조를 설정합니다.
PresetWindow.uxml의 Visual Tree에 대한 참조를 가져와 루트에 첨부했습니다.
PresetWindow.uss 및 PresetTemplate.uss에서 스타일 시트에 대한 참조를 설정한 다음 루트에 첨부합니다. 
이 스타일 시트는 이제 보편적입니다!
PresetWindow.cs를 저장하고 편집기 창을 다시 로드하고 변경 사항을 확인합니다

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using UnityEditor.UIElements;


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

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

        VisualElement label = new Label("Hello World! From C#");
        root.Add(label);

        // Import UXML
        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Editor/TestWindow.uxml");
        //VisualElement labelFromUXML = visualTree.Instantiate();
        var uxmlRoot = visualTree.CloneTree();
        root.Add(uxmlRoot);
        //root.Add(labelFromUXML);

        // A stylesheet can be added to a VisualElement.
        // The style will be applied to the VisualElement and all of its children.
        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/TestWindow.uss");
        var styleSheet2 = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Editor/PresetTemplate.uss");
        //VisualElement labelWithStyle = new Label("Hello World! With Style");
        //labelWithStyle.styleSheets.Add(styleSheet);
        //root.Add(labelWithStyle);
        root.styleSheets.Add(styleSheet);
        root.styleSheets.Add(styleSheet2);
    }
}

 

PresetWindow.cs 내에서 생성된 VisualElements를 제거하고 PresetWindow.uxml 내에서 생성된 레이블만 남겼습니다.

PresetWindow.uss 스타일 시트는 이제 보편적인 PresetWindow.uxml에 영향을 미칩니다.

 

 

---

Creating Preset Window Layouts

 

이제 몇 가지 이론을 다루었으므로 사전 설정 창의 기본 레이아웃 만들기로 넘어갈 수 있습니다.

이것은 편집기 창 내의 다른 섹션에 대한 계획입니다. UXML 내에서 섹션 또는 패널을 빈 VisualElement로 나타낼 수 있습니다.

편집기 창 내의 다른 섹션에는 각각 고유한 기능이 있습니다.

 

Button Bar 
사전 설정 생성 및 삭제와 같은 작업 버튼이 있습니다.

Preset List
생성한 사전 설정으로 채울 목록 보기.

Description
편집기 창의 목적에 대한 간단한 설명입니다.

Preset Settings
변경하고 저장할 수 있는 사전 설정의 모든 설정.

예상 레이아웃을 UXML로 쉽게 복제할 수 있는 Visual Tree로 나눌 수 있습니다

 

---

 

Creating Layouts in UXML

 

PresetWindow.uxml을 열고 다음 레이블 VisualElement를 삭제합니다.

 

<engine:Label text="Hello World! From UXML" />

이제 새 VisualElements를 삽입할 수 있는 빈 섹션이 있습니다.

PresetWindow.uxml을 저장하고 Unity에서 편집기 창을 다시 로드합니다. 깨끗하고 빈 창이 표시됩니다.

 //VisualElement label = new Label("Hello World! From C#");
        //root.Add(label);

 

 

PresetWindow.uxml의 빈 섹션에 다음 코드를 삽입합니다.

 

<engine:VisualElement name="ButtonHolder">
    <!-- 1 -->
  </engine:VisualElement>

  <engine:VisualElement name="Container">

    <engine:VisualElement name="LeftPanel">
      <!-- 2 -->
    </engine:VisualElement>

    <engine:VisualElement name="RightPanel">

      <engine:VisualElement name="RightTopPanel">
        <!-- 3 -->
      </engine:VisualElement>

      <engine:VisualElement name="RightBottomPanel">
        <!-- 4 -->
      </engine:VisualElement>

    </engine:VisualElement>

  </engine:VisualElement>

 

여기서 하는 모든 작업은 UXML에서 위의 Visual Tree 다이어그램을 복제하는 것입니다. 편집기 창의 각 섹션을 내용으로 채울 수 있는 빈 VisualElements로 나눌 수 있습니다. 다음과 같이 일부 이름을 변경했습니다.

 

LeftPanel: 프리셋 목록을 참조합니다. 

RightTopPanel: 이전에 설명이었습니다. 

RightBottomPanel: 이전에는 사전 설정 설정이었습니다. 

레이아웃이 깔끔해졌으니 이제 원하는 모양으로 만들 차례입니다.

 

---

 

Making the Button Holder Layout

첫 번째 단계는 결국 도구의 버튼을 유지하게 될 영역의 레이아웃을 변경하는 것입니다. 

시작하려면 PresetWindow.uss를 열고 그 안에 있는 모든 것을 제거한 다음 다음 코드를 삽입하십시오.

#ButtonHolder 
{
	height: 50px;
	width: auto;
	background-color: rgb(21, 132, 67);

	display: flex;
	flex-direction: row;
}

# 기호를 사용하면 이름 선택기를 사용하고 ButtonHolder로 스타일을 지정할 수 있습니다. 배경색을 짙은 녹색으로 변경하고 높이를 고정 크기로 설정하고 너비를 자동으로 설정했습니다.

 

# 기호 선택기를 사용하여 이름 속성을 기반으로 VisualElements를 선택하는 방법에 주목하십시오.

display가 flex로 설정되면 모든 자식 요소는 HTML/CSS에서 일반적으로 사용되는 Flexbox 레이아웃 시스템을 사용합니다.

또한 flex-direction을 row로 설정했습니다. 즉, #ButtonHolder의 자식인 VisualElement는 왼쪽에서 오른쪽으로 표시됩니다.

PresetWindow.uss를 저장하고 편집기 창을 확인하십시오. 다음이 표시됩니다.

 

 

다음으로 Main Container의 레이아웃이 올바르게 보이도록 합니다.


Setting up the Main Container’s Layout


기본 컨테이너의 레이아웃 변경을 시작하려면 #ButtonHolder 섹션 아래에 다음 코드를 삽입하세요.



렇게 하면 Unity가 패널을 오른쪽에서 왼쪽으로 정렬할 수 있도록 플렉스 방향의 행이 있는 컨테이너가 생성됩니다. 그러나 편집기 창을 저장하고 다시 로드하면 변경 사항이 없음을 알 수 있습니다.



편집기 창의 높이에 따라 #Container의 height 속성이 변경되기를 원하기 때문입니다. 이 문제를 해결하려면 PresetWindow.cs를 열고 CreateGUI() 함수 아래에 다음 코드를 추가합니다.


private void CreateGUI()
{
    // Set the container height to the window
    rootVisualElement.Q<VisualElement>("Container").style.height = new 
        StyleLength(position.height);
        
}

rootVisualElement.Q<VisualElement>("Container").style.height = new StyleLength(position.height);

 

 

Unity는 편집기 창이 열려 있는 모든 프레임에서 OnGUI()를 실행하므로 이 영역을 사용하여 UIElement에 대한 동적 변경을 수행할 수 있습니다.

모든 프레임에서 PresetWindow.cs는 rootVisualElement를 쿼리하여 이름이 Container인 VisualElement 유형의 개체를 찾습니다.

쿼리가 VisualElement를 찾으면 요소의 높이를 편집기 창의 높이인 position.height로 변경합니다. VisualElement의 스타일에 길이 값이 필요한 경우 StyleLength 클래스를 사용합니다.

때로는 새로운 레이아웃 주제를 이해하려고 할 때 비주얼이 소화하기 더 쉽기 때문에 다음과 같이 자세히 설명합니다.

 

쿼리는 UIElements에서 매우 중요합니다. UXML 문서에서 생성한 VisualElements의 참조를 얻는 기본 방법이기 때문입니다.

PresetWindow.cs를 저장하고 편집기 창을 엽니다.

 

 

---

 

 

참고

https://docs.unity3d.com/2020.3/Documentation/Manual/UIE-UITK-package.html

https://www.raywenderlich.com/6452218-uielements-tutorial-for-unity-getting-started

http://gyanendushekhar.com/2020/12/30/getting-started-with-ui-toolkit-unity-3d/