Day - 02. UI Toolkit 살펴 보기

빠르게 복습해봅니다

 

UI Toolkit > Editor Window를 선택하고 

 

윈도우 이름을 적어주면 

이렇게 창이 하나 뜨고 

 

파일도 만들어 집니다 

 

MyWindow.cs 파일을 열어 보면 다음과 같은 코드가 보이는데 

3가지 방법으로 윈도우에 Label을 표시를 하고 있습니다 

 

아래 파일은 스타일을 담당하는 스타일 시트 파일 입니다 

확장자는 .uss 

코드를 열어 보면 완전 css랑 비슷하네요 

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

uss속성관련은 문서를 참고하세요 

https://docs.unity3d.com/Manual/UIE-USS-SupportedProperties.html

 

 

---

Color

UI Toolkit supports the following literal color values and functions:

• A Hexadecimal value: #FFFF00 (rgba one byte per channel), #0F0 (rgb)
• The RGB function: rgb(255, 255, 0)
• The RGBA function: rgba(255, 255, 0, 1.0)
• Color keywords: blue, transparent

 

---

16진수 코드

#dbac9d

Label {
    font-size: 40px;
    -unity-font-style: bold;
    color: #dbac9d;
}

 

 

rgb() 함수 

Label {
    font-size: 40px;
    -unity-font-style: bold;
    color: rgb(255, 255, 0);
}

 

 

 

rgba() 함수 (a값은 0 ~ 1사이)

Label {
    font-size: 40px;
    -unity-font-style: bold;
    color: rgba(255, 255, 0, 0.2);
}

 

 

 

 

 

 

색상 키워드(red, blue등)

Label {
    font-size: 40px;
    -unity-font-style: bold;
    color: red;
}

 

 

 

---

 

 

다음은 MyWindow.uxml 파일을 살펴 봅시다 

 

화살표를 눌러 열어 보면 인라인 스타일도 들어 있네요 

Unity UXML(Extensible Markup Language) 파일은 사용자 인터페이스의 구조를 정의하는 텍스트 파일입니다.

UXML 형식은 HTML, XAML 및 XML에서 영감을 받았다고 하네요 

 

이전에 이러한 형식으로 작업한 적이 있다면 UXML과의 유사점을 찾을 수 있습니다. 

그러나 UXML 형식에는 Unity를 사용하는 효율적인 방법을 제공하기 위해 약간의 차이점이 있습니다.

 

전 사실 XML을 별로 좋아하지는 않아요 ㅎ 

 

Unity가 지원하는 UXML 형식과 UXML 템플릿 작성, 로드 및 정의에 대한 세부 정보를 살펴 봅시다 

또한 새 요소를 정의하는 방법과 UQuery를 사용하는 방법을 알아 봅시다 

 

UXML을 사용하면 Unity 내에서 사용자 인터페이스를 쉽게 구축할 수 있습니다.

 

XML에서 사용자 인터페이스(UI)의 구조를 정의하고 

UI에 대한 스타일시트를 사용해 레이아웃을 설정 할수 있다고 하네요 

 

새로운 요소 정의 (Defining new elements)

 

UI Toolkit을 사용하여 고유한 사용자 인터페이스 구성 요소 및 요소를 정의할 수 있습니다.

UXML 파일을 사용하여 새 요소를 정의하려면 

 

1. VisualElement 또는 해당 하위 클래스 중 하나에서 새 클래스를 파생시킨다 

2. 새 클래스는 기본 생성자를 구현해야 한다 

 

예를 들어 다음 코드는 새 StatusBar 클래스를 파생시키고 기본 생성자를 구현합니다.

 

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class StatusBar : VisualElement
{
    private string status;
    public string Status { get; set; }

    public StatusBar()
    {
        this.Status = String.Empty;
    }
}

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

Unity - Scripting API: VisualElement

UI Toolkit이 UXML 파일을 읽을 때 새 클래스를 인스턴스화하려면 클래스에 대한 팩토리를 정의해야 합니다. 

공장에서 특별한 작업을 수행해야 하는 경우가 아니면 UxmlFactoy<T>에서 공장을 파생시킬 수 있습니다.

 

팩토리 클래스를 컴포넌트 클래스 안에 넣는 것이 좋습니다.

 

예를 들어 다음 코드는 UxmlFactory<T>에서 해당 팩토리를 파생하여 StatusBar 클래스에 대한 팩토리를 정의하는 방법을 보여줍니다. 팩토리의 이름은 UxmlFactory입니다.

 

VisualElement 클래스가 이미 이렇게 클래스를 포함 하고 있네요 

그래서 new 키워드로 재정의 하라고 하나바요 

이 팩토리를 정의하면 UXML 파일에서 <StatusBar> 요소를 사용할 수 있습니다

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

Unity - Scripting API: UxmlFactory

 

 

 

---

요소의 속성 정의 (Defining attributes on elements)

 

새 클래스에 대한 UXML 특성을 정의하고 이러한 특성을 사용하도록 해당 팩토리를 설정할 수 있습니다.

 

예를 들어 다음 코드는 UXML 특성 클래스를 정의하여 상태 속성을 StatusBar 클래스의 속성으로 초기화하는 방법을 보여줍니다. status 속성은 XML 데이터에서 초기화됩니다.

 

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UIElements;

public class StatusBar : VisualElement
{
    public new class UxmlFactory : UxmlFactory<StatusBar, UxmlTraits> { }

    public new class UxmlTraits : VisualElement.UxmlTraits
    {
        UxmlStringAttributeDescription status = new UxmlStringAttributeDescription { name = "status" };

        public override IEnumerable<UxmlChildElementDescription> uxmlChildElementsDescription
        {
            get { yield break; }
        }

        public override void Init(VisualElement ve, IUxmlAttributes bag, CreationContext cc)
        {
            base.Init(ve, bag, cc);
            ((StatusBar)ve).status = this.status.GetValueFromBag(bag, cc);
        }
    }

    private string status;
    public string Status { get; set; }

    public StatusBar()
    {
        this.Status = String.Empty;
    }
}

 

UxmlTraits는 두 가지 용도로 사용됩니다.

 

팩토리는 이를 사용하여 새로 생성된 객체를 초기화합니다. 

스키마 생성 프로세스는 이를 분석하여 요소에 대한 정보를 얻습니다. 

이 정보는 XML 스키마 지시문으로 변환됩니다.

 

 

 

status 선언은 status라는 XML 속성을 정의합니다.

uxmlChildElementsDescription은 StatusBar 요소에 자식이 없음을 나타내는 빈 IEnumerable을 반환합니다.

Init() 멤버는 XML 파서에서 속성 모음의 상태 속성 값을 읽고 StatusBar.status 속성을 이 값으로 설정합니다.

UxmlTraits 클래스를 StatusBar 클래스 안에 배치하면 Init() 메서드가 StatusBar의 private 멤버에 액세스할 수 있습니다.

새 UxmlTraits 클래스는 기본 클래스 UxmlTraits에서 상속하므로 기본 클래스의 특성을 공유합니다.

Init()는 base.Init()를 호출하여 기본 클래스 속성을 초기화합니다.

 

UxmlStringAttributeDescription 클래스를 사용하여 문자열 특성을 선언합니다.

UI Toolkit은 다음 유형의 특성을 지원하며 각각은 C# 유형을 XML 유형에 연결합니다.

 

UxmlStringAttributeDescription : A string
UxmlFloatAttributeDescription :  A single precision floating point value in the range of the C# float type.
UxmlDoubleAttributeDescription :  A double precision floating point value in the range of the C# double type.
UxmlIntAttributeDescription :  An integer value in the range of the C# int type.
UxmlLongAttributeDescription :  A long integer value in the range of the C# long type.
UxmlBoolAttributeDescription :  true or false
UxmlColorAttributeDescription :  A string representing a color (#FFFFFF)
UxmlEnumAttributeDescription<T> :  A string representing one of the values for the Enum type T.

 

uxmlChildElementsDescription은 StatusBar 요소가 자식을 허용하지 않음을 나타내는 빈 IEnumerable을 반환합니다.

 

요소가 모든 유형의 자식을 허용하도록 하려면 uxmlChildElementsDescription 속성을 재정의해야 합니다. 예를 들어,

StatusBar 요소가 모든 유형의 자식을 허용하려면 uxmlChildElementsDescription 속성을 다음과 같이 지정해야 합니다.

public override IEnumerable<UxmlChildElementDescription> uxmlChildElementsDescription
{
    get
    {
        yield return new UxmlChildElementDescription(typeof(VisualElement));
    }
}

---

 

네임스페이스 접두사 정의(Defining a namespace prefix)

 

C#에서 새 요소를 정의한 후에는 UXML 파일에서 요소 사용을 시작할 수 있습니다.

새 요소가 새 네임스페이스에 정의된 경우 네임스페이스에 대한 접두사를 정의해야 합니다.

네임스페이스 접두사는 루트 <UXML> 요소에 대한 속성으로 선언되며 요소의 범위를 지정할 때 전체 네임스페이스 이름을 대체합니다.

네임스페이스 접두사를 정의하려면 정의하려는 각 네임스페이스 접두사에 대해 UxmlNamespacePrefix 특성을 어셈블리에 추가합니다.

 

[assembly: UxmlNamespacePrefix("My.First.Namespace", "first")]
[assembly: UxmlNamespacePrefix("My.Second.Namespace", "second")]

 

일단 요기 까지 읽고 다시 실습을...

 

 

---

 

uxml 파일을 수정 합니다 

경로가 docs에 있는거가 좀 변경 되었나바요 

../../ 요기 입니다 

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd">

  <Label text="Select something to remove from your suitcase:"/>
  <Box>
    <Toggle name="boots" label="Boots" value="false" />
    <Toggle name="helmet" label="Helmet" value="false" />
    <Toggle name="cloak" label="Cloak of invisibility" value="false"/>
  </Box>
  <Box>
    <Button name="cancel" text="Cancel" />
    <Button name="ok" text="OK" />
  </Box>
</UXML>

 

 

파일의 첫 번째 줄은 XML 선언입니다. 선언은 선택 사항입니다.

선언이 포함된 경우 첫 번째 줄에 있어야 하며 그 앞에 다른 내용이나 공백이 있으면 안 됩니다.

버전 속성은 필수 항목입니다. 인코딩 속성은 선택 사항입니다.

인코딩이 포함된 경우 파일의 문자 인코딩을 선언해야 합니다.

 

 

다음 줄은 문서 루트 <UXML>을 정의합니다. <UXML> 요소는 네임스페이스 접두사 정의에 대한 속성과 스키마 정의 파일의 위치를 ​​포함합니다. 이러한 속성은 특별한 순서 없이 지정할 수 있습니다

 

UI에서 툴킷에서 각 요소는 UnityEngine.UIElements 또는 UnityEditor.UIElements 네임스페이스에 정의됩니다.

 

 

UnityEngine.UIElements 네임스페이스에는 Unity 런타임의 일부로 정의된 요소가 포함되어 있습니다

UnityEditor.UIElements 네임스페이스에는 Unity 에디터에서 사용할 수 있는 요소가 포함되어 있습니다. 요소를 완전히 지정하려면 해당 네임스페이스를 접두사로 지정해야 합니다.

 

예를 들어 UXML 템플릿에서 Button 요소를 사용하려면 <UnityEngine.UIElements:Button />을 지정해야 합니다.

네임스페이스를 더 쉽게 지정하기 위해 네임스페이스 접두사를 정의할 수 있습니다.

 

예를 들어 xmlns:engine="UnityEngine.UIElements"는 엔진 접두사를 UnityEngine.UIElements로 정의합니다.

 

네임스페이스 접두사가 정의되면 이를 사용하여 네임스페이스를 지정할 수 있습니다.

 

예를 들어 <engine:Button />은 <UnityEngine.UIElements:Button />과 동일합니다.

 

접두사를 제외하여 기본 네임스페이스를 정의할 수도 있습니다.

 

예를 들어 xmlns="UnityEngine.UIElements" 행은 UnityEngine.UIElements를 기본 네임스페이스로 정의합니다.

 

고유한 요소를 정의하는 경우 이러한 요소는 고유한 네임스페이스에 정의될 수 있습니다.

 

UXML 템플릿에서 이러한 요소를 사용하려면 Unity 네임스페이스와 함께 <UXML> 태그에 네임스페이스 정의 및 스키마 파일 위치를 포함해야 합니다.

 

Asset > Create > UI Toolkit > Editor Window를 선택하여 새 UXML 템플릿 에셋을 생성하면 에디터가 자동으로 네임스페이스를 정의합니다.

 

UI 정의는 <UXML> 루트 내에 있습니다. UI 정의는 각각 VisualElement를 나타내는 일련의 중첩된 XML 요소입니다.

 

요소 이름은 인스턴스화할 요소의 C# 클래스 이름에 해당합니다. 대부분의 요소에는 특성이 있으며 해당 값은 C#의 해당 클래스 속성에 매핑됩니다.

 

각 요소는 고유한 속성 집합을 추가할 수 있는 상위 클래스 유형의 속성을 상속합니다.

 

VisualElement는 모든 요소의 기본 클래스이므로 모든 요소에 대해 다음 특성을 제공합니다.

 

name: 요소의 식별자입니다. 이름은 고유해야 합니다.

picking-mode: 마우스 이벤트에 응답하려면 위치로 설정하고 마우스 이벤트를 무시하려면 무시로 설정합니다.

 

 

 

tabindex: 현재 요소의 탭 위치를 정의하는 정수.

<?xml version="1.0" encoding="utf-8"?>
<UXML
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns="UnityEngine.UIElements"
    xsi:noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd"
    xsi:schemaLocation="UnityEngine.UIElements ../../UIElementsSchema/UnityEngine.UIElements.xsd">

  <Label text="Select something to remove from your suitcase:"/>
  <Box>
    <Toggle name="boots" label="Boots" value="false" tabindex="3"/>
    <Toggle name="helmet" label="Helmet" value="false" tabindex="1"/>
    <Toggle name="cloak" label="Cloak of invisibility" value="false" tabindex="2"/>
  </Box>
  <Box>
    <Button name="cancel" text="Cancel" picking-mode="Ignore"/>
    <Button name="ok" text="OK" />
  </Box>
</UXML>

 

 

 

focusable: 요소가 초점을 맞출 수 있는지 여부를 나타내는 부울.

 

class: 요소를 특성화하는 공백으로 구분된 식별자 목록입니다.

클래스를 사용하여 요소에 비주얼 스타일을 지정합니다.

클래스를 사용하여 UQuery에서 요소 집합을 선택할 수도 있습니다.

 

이렇게 색을 바꿀수도 있음 

https://docs.unity3d.com/Manual/UIE-USS-Properties-Reference.html

Unity - Manual: USS properties reference

tooltip: 마우스가 요소 위에 있을 때 툴팁으로 표시되는 문자열입니다.

 

위치를 조절 할수도 있을거 같긴 한데 일단 테스트 

 

 

 

 

 

view-data-key: 요소 직렬화에 사용되는 키를 정의하는 문자열입니다.

음 이건.. 

https://docs.unity3d.com/Manual/UIE-ViewData.html 이거랑 연관이 있는것인가?...

 

ViewData API는 데이터의 일부가 아닌 UI 관련 상태가 도메인 재로드 및 에디터 재시작 후에도 유지되는 문제를 해결합니다.

아이디어는 각 EditorWindow에 영구 데이터 저장소를 갖는 것입니다. 각 VisualElement에는 ViewData 지속성을 사용하도록 설정해야 하는 viewDataKey가 있습니다.

지원하는 요소에 대한 보기 데이터 지속성을 활성화하려면 viewDataKey를 EditorWindow 내에서 고유 키로 설정하십시오.

예를 들어 ScrollView에서 각 스크롤 막대에는 ScrollView 요소 내에서 고유한 고유한 viewDataKey가 있습니다.

crollView에 키가 설정되어 있지 않으면 스크롤 막대가 영구적이지 않습니다. 그렇지 않으면 스크롤 막대가 viewDataKey와 부모 viewDataKey를 결합하여 고유한 전역 키를 만듭니다.

 

아직은 몬지 모르겠음;

 

 

UXML 템플릿 예제는 사용자 인터페이스의 시각적 측면을 정의하지 않습니다.

UI를 그리기 위한 치수, 글꼴 및 색상과 같은 스타일 정보를 별도의 USS 파일에 정의하는 것이 좋습니다(스타일 및 Unity 스타일 시트 참조).

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

 

---

 

Adding styles to UXML

 

스타일시트 파일을 참조하기 위해 UXML 파일은 모든 요소 선언 아래에 <Style> 요소를 사용할 수 있습니다.

예를 들어 UXML 파일과 "styles.uss"라는 USS 파일이 같은 폴더에 있는 경우:

 

<engine:UXML ...>
    <engine:VisualElement class="root">
        <Style src="styles.uss" />
    </engine:VisualElement>
</engine:UXML>

#root {
    width: 200px;
    height: 200px;
    background-color: red;
}

참고: Unity는 루트 <UXML> 요소 아래의 <Style> 요소를 지원하지 않습니다.

인라인 스타일을 UXML 요소의 속성으로 직접 선언할 수도 있습니다.

<engine:UXML ...>
    <engine:VisualElement style="width: 200px; height: 200px; background-color: red;" />
</engine:UXML>

html, css랑 비슷 허구만요

 

 

 

---

Reusing UXML files

 

 

일단 졸려서 여기까지요

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

 

 

반응형

 

 

 

 

 

 

 

---

 

참고 

https://docs.unity3d.com/es/2019.4/ScriptReference/UIElements.Toggle.html

https://forum.unity.com/threads/inspector-like-foldout.791847/

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

https://docs.unity3d.com/Manual/UIE-USS-PropertyTypes.html

https://docs.unity3d.com/Packages/com.unity.ui@1.0/manual/index.html
https://blog.unity.com/technology/whats-new-with-uielements-in-2019-1
https://docs.unity3d.com/2018.4/Documentation/Manual/UIElements.html
https://docs.unity3d.com/2020.1/Documentation/Manual/UIElements.html