Day - 05. UI Toolkit 살펴 보기

UXML elements reference

 

다음 표에는 UnityEngine.UIElements 및 UnityEditor.UIElements 네임스페이스에서 사용할 수 있는 UXML 요소가 간략하게 나와 있습니다.

 

 

이건 너무 많이서 좀 오래 걸리겠네요...

 

 

Base elements

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
VisualElement	모든 시각적 요소에 대한 기본 클래스입니다.	UnityEngine.UIElements	임의의 수의 VisualElement	class, style, name, picking-mode, Position, Ignore, tooltip, focusable, focus-index, tabindex, view-data-key

class: 공백으로 구분된 이름 목록입니다.
style: 요소의 스타일을 지정하는 USS 지시문.
name: 이 요소에 대한 고유한 문자열 식별자입니다.
선택 모드: 위치 또는 무시로 설정합니다. 기본값은 위치입니다.
툴팁: 요소를 마우스로 가리키면 문자열이 표시됩니다.
focusable: 요소가 초점을 맞출 수 있는지 여부를 나타내는 부울입니다. 기본값은 false(포커스 불가능)로 설정됩니다. 이것은 더 이상 사용되지 않는 focus-index 요소를 대체합니다.
tabindex: 요소의 탭 위치와 트리에서의 위치를 ​​정의하는 정수입니다. 양수 값은 탭 우선 순위를 높입니다. 기본값은 0입니다. 이것은 더 이상 사용되지 않는 focus-index 요소를 대체합니다.
view-data-key : 요소 직렬화에 사용되는 키를 정의하는 문자열입니다.
이 요소는 다른 속성도 허용합니다.

 

 

 

---

 

 

Base elements

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
BindableElement	SerializedProperty에 바인딩할 수 있는 요소입니다. 속성 값과 표시된 값이 동기화됩니다.	UnityEngine.UIElements	임의의 수의 VisualElement	binding-path

binding-path: 이 요소가 바인딩되는 속성의 경로입니다.

 

 

 

 

---

 

 

Base elements

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
Box	이 요소는 VisualElement와 유사하지만 내용 주위에 상자를 그립니다.	UnityEngine.UIElements	임의의 수의 VisualElement	VisualElement의 모든 속성

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: 100; height: 100; border-width: 2; border-color: red;"></Box>
</UXML>

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

 

width를 auto로 주면 

<Box style="width: auto; height: 100; border-width: 2; border-color: red;"></Box>

크기에 따라 자동으로 늘어났다 줄어든다 

 

Box안에 요소를 넣을수도 있다 

Label을 넣어 봤다 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
    <Label text="Hello UIElement!!!" />
  </Box>
</UXML>

 

 

 

---

 

Base elements

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
TextElement	텍스트를 표시하는 요소입니다.	UnityEngine.UIElements	None	VisualElement의 모든 속성 text: 요소가 표시해야 하는 텍스트입니다.

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
    <TextElement text="Hello Unity!" style="font-size: 20"/>
  </Box>
</UXML>

font-size도 변경해봤다

 

 

 

---

 

Base elements

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
Label	텍스트를 표시하는 요소입니다.	UnityEngine.UIElements	None	TextElement의 모든 속성

 

TextElement랑 뭐가 다른가 봤더니 Label이 TextElement를 상속 받고 있었다 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
    <Label text="테스트"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
    <Label text="홍길동"/>
  </Box>
</UXML>

일부러 많이 넣어 봤다 박스를 벗어나는지 보기 위해서 

역시 벗어 난다 

 

 

 

---

Base elements

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

 

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
Image	이미지를 표시합니다.	UnityEngine.UIElements	None	VisualElement의 모든 속성

focus-index 기본값은 0입니다.

focusable 기본값은 true입니다.

 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
    <Label text="Unity Logo"/>
    <Image style="background-image: url(../Images/unity_logo.png); width: 50; height: 50;"/>
  </Box>
</UXML>

경로는 .uxml로부터 상대 경로 입니다 

 

width, height 속성이 없으면 나타나지 않습니다 

<Image style="background-image: url(../Images/unity_logo.png);"/>

 

크기를 조금 키워봤습니다 

 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
    <Label text="Unity Logo"/>
    <Image style="background-image: url(../Images/unity_logo.png); width: 256px; height: 256px;"/>
  </Box>
</UXML>

박스 밖에다가도 넣어 보고 

크기도 더 키워보고 창도 조절 해보고 

이만하면 된거 같네요 

 

참고:

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

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

 

---

 

 

 

Base elements

 

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
IMGUIContainer	Draws IMGUI content	UnityEngine.UIElements	None	VisualElement의 모든 속성

focus-index default value is 0
focusable default value is true

 

https://docs.unity3d.com/Manual/GUIScriptingGuide.html

옜날 버전 gui를 표시 하는 컨테이너인가바요 

이제는 이거 진짜 쓸일이 있나 싶기도 하고... 아무튼 

 

참고 

https://github.com/Unity-Technologies/UIElementsExamples/blob/master/Assets/Examples/Editor/E13_SerializedProperties.cs

 

 

 

---

Base elements

 

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
Foldout	콘텐츠를 표시하거나 숨기는 토글 버튼이 있는 요소입니다.	UnityEngine.UIElements	Any number of VisualElement	All attributes of BindableElement

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <Foldout>
    <Box style="width: auto; height: 100; border-width: 2; border-color: red;">
      <Label text="Unity Logo"/>
    </Box>
    <Image style="background-image: url(../Images/unity_logo.png); width: 64px; height: 64px;"/>
  </Foldout>
</UXML>

 

---

 

일단 오늘은 여기까지 하고 다음에는 Templates 부터 다시 할게요 ~ 

수고 많으셨습니다 ~