Day - 08. UI Toolkit 살펴 보기

저번시간에 이어서  LayerMaskField 부터 살펴 보겠습니다

Field쪽이 탈탈 털려서 이것도 아마 모를거 같아요 그래도 정리라도 해볼게요 

 

시작합니다 ^^

 

Controls

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
LayerMaskField	사용자가 레이어 그룹을 선택할 수 있는 팝업 메뉴	UnityEditor.UIElements	None	BaseField<int>의 모든 속성

 

실습 하기 

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


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

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;

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

        LayerMaskField field = new LayerMaskField();
        root.Add(field);
    }
}

c# 코드에서 작성 하는거였네요..

그림 이전 포스팅도 싹다 수정 해야 겠네요 

이거 다 작성하고 수정하러 다녀와야 겠어요 

 

이건 레이어 필드 

 

EnumField

 

이전 포스팅 (https://smilejsu.tistory.com/2333)을 참고해주세요 

---

 

 

Controls

 

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
ProgressBar	작업의 진행 상황을 보여주는 진행률 표시줄.	UnityEditor.UIElements	None	All attributes of BindableElement low-value high-value title

low-value: 진행률 표시줄의 가장 낮은 값을 나타내는 부동 소수점입니다. 기본값은 0입니다.
high-value: 진행률 표시줄의 가장 높은 값을 나타내는 부동 소수점입니다. 기본값은 100입니다.
title: 진행률 표시줄의 제목을 나타내는 문자열입니다.

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

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;

        // 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/TestWindow.uxml");
        VisualElement container = visualTree.Instantiate();
        root.Add(container);


        ProgressBar progressBar = new ProgressBar();
        progressBar.value = 50;
        progressBar.title = "Progress Bar";
        root.Add(progressBar);
    }

    
}

 

 

반응형

---

 

다음은Text input 입니다 

Controls

 

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
TextInputBaseField<TValueType>	확인란으로 표시되는 토글 버튼입니다.	UnityEngine.UIElements	None	BaseFieldTraits<string, UxmlStringAttributeDescription>의 모든 속성 text, max-length password mask-character readonly

text: 필드의 텍스트 값
max-length: 필드에 포함될 수 있는 최대 문자 수입니다. 기본값 -1은 텍스트 길이에 제한이 없습니다.
password: maskCharacter 문자를 사용하여 필드 내용을 표시할지 또는 표시할지 여부를 나타내는 부울입니다. false는 기본 설정입니다.
mask-character: 암호가 true일 때 필드 내용을 표시하는 문자입니다. 기본값은 * 문자입니다
readonly: 필드가 읽기 전용임을 나타내는 부울입니다. 기본값은 false입니다.

---

Controls

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

Element	Function	Namespace	Permitted child elements (허용되는 자식 요소)	Attributes
TextField	편집 가능한 텍스트 필드입니다.	UnityEngine.UIElements	None	TextInputBaseField<string>의 모든 속성 multiline

multiline: 텍스트 필드가 여러 줄에 텍스트를 표시하는지 여부를 나타내는 부울입니다. 

여러 줄에 표시하려면 true로 설정하고 텍스트의 줄 바꿈을 무시하고 표시하거나 한 줄에 표시하려면 false로 설정합니다. 

false가 기본값입니다.

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <!--<uie:LayerField label="UXML Field" name="the-uxml-field" />-->
  <!--<uie:ProgressBar title="ProgressBar" high-value="100" low-value="0"></uie:ProgressBar>-->
  <TextField></TextField>
</UXML>

 

 

<?xml version="1.0" encoding="utf-8"?>
<UXML xmlns="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements">
  <TextField label="UXML Field" name="the-uxml-field" value="It's snowing outside." />
</UXML>

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

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;

        // 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/TestWindow.uxml");
        VisualElement container = visualTree.Instantiate();
        root.Add(container);

        // Get a reference to the field from UXML and append to it its value.
        var uxmlField = container.Q<TextField>("the-uxml-field");
        uxmlField.value += "..";

        // Create a new field, disable it, and give it a style class.
        var csharpField = new TextField("C# Field");
        csharpField.value = "It's snowing outside...";
        csharpField.SetEnabled(false);
        csharpField.AddToClassList("some-styled-field");
        csharpField.value = uxmlField.value;
        container.Add(csharpField);

        // Mirror value of uxml field into the C# field.
        uxmlField.RegisterCallback<ChangeEvent<string>>((evt) =>
        {
            csharpField.value = evt.newValue;
        });
    }

    
}

 

 

오늘은 요기까지 ~ 수고하셨습니다^^

 

---

 

 

다음 포스팅 은 IntegerField부터 ~ 

 

 

참고 

https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.ProgressBar.html

https://forum.unity.com/threads/hp-bars-at-runtime-image-masking-or-fill.1076486/

https://docs.unity3d.com/Packages/com.unity.ui@1.0/api/UnityEngine.UIElements.ProgressBar.html

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

https://www.jingfengji.tech/2020/05/11/uielement-ru-men-1-uxml-yuan-su-jie-shao/