unity ui toolkit 으로 리스트 만들기

https://docs.unity.cn/kr/2021.3/Manual/UIE-HowTo-CreateRuntimeUI.html

첫 런타임 UI 만들기 - Unity 매뉴얼

 

1. 우선 ui toolkit을 열어야 한다. 아래 처럼 열어주자. 

 

2. 다음으로 처음보는 창에 놀라지 말고, 새로운 파일을 만들어준다.

3. 원문에서는 unity default runtime theme을 고르라고 되어있는데 해당 화면은 안보인다. 스킵.

 

다음 단계를 진행한다.

 

4. 아래 이미지 좌측 중간의 hierarchy 탭에서 unsaved file.uxml을 눌러주고, 맨 우측 익스펙터창에서 size 아래에 있는 Match Game View를 눌러준다.

그럼 이렇게 게임 사이즈에 맞는 ui가 보여지게 된다.

 

 

5. 좌측 맨하단 Library 탭에서 visual element를 끌어다가 Hierarchy 탭에 옮겨주자. 

그러면

요렇게 엘리먼트 창이 보여진다. 아마도 이 위에 ui를 배치는 것 같다.

 

6. Visual element 창 사이즈 조절.  visualElement를 선택하면 우측 인스펙터 창에 이렇게 뜬다. 

visual

Flex 탭을 열어주고, Grow를 1값으로 한다. 

그럼 이렇게 전 영역을 덮게 된다.

 

7. 필요시 정렬기능을 넣어주고, 백그라운드 색을 넣어준다. 

 

8. 새로운 Visual element를 넣어준다. 

위 이미지 처럼 넣어줘봤다.

 

9. 자식 Visual element를 정렬하기

 새로 만든 element의  인스펙터 창에서 Direction을 row로 하고, 픽셀 높이를 350으로 해보자. 

10. 리스트 추가하기

 

좌측 맨 하단 라이브러리 탭에서 ListView 컨테이너를 옮겨주자.

11. 리스트 이름을 적절히 바꿔주고, 마진과 크기를 설정해준다.

 

12. 만들어진 UXML 템플릿을 저장하자. 

 

13. 만든 UXML을 런타임 씬에 표시할 차례다

 

프로젝트 뷰에 가서 우클릭 -> Create -> UI toolkit -> Panel Setting Asset을 눌러주자. 

만들고나면

이렇게 보여진다.

 

14. unity 메인의 Hierarchy 창으로 가서 

우클릭, UI Toolkit -> UI Document를 눌러준다.

 

15.  UI Documnet 객체에 만들어둔 UI 할당. Panel Setting값과 Source Asset에 넣어주면 된다. 

16. 플레이 버튼을 눌러서 플레이해보자. 

생각보단 예쁘진 않지만 어찌되었건 UI가 나온다. 

 

17. 리스트에 보여질 객체를 만들어 준다. 

 

유니티 메인에서 객체를 추가하는 형태로 만들어줬다. 

 

 

 

이제 리스트와 객체를 이어줄 차례다. 하나하나 살펴보자. 

 

18. 리스트를 관리할 컨트롤러 스크립트를 만들어준다. ActorListController.cs 라는 이름으로 만들었다.

 

스크립트 내용은 다음과 같다. 

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

using UnityEngine.UIElements;

public class ActorListController : MonoBehaviour
{
    public void InitializeList(VisualElement root, VisualTreeAsset listElementTemplate)
    {
    }
}

19. 메인뷰를 위한 스크립트를 만들어준다.

 

mainview.cs라고 만들었고, 그 내용은 다음과 같다. 

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

public class MainView : MonoBehaviour
{
    [SerializeField]
    VisualTreeAsset m_ListEntryTemplate;

    void OnEnable()
    {
        // The UXML is already instantiated by the UIDocument component
        var uiDocument = GetComponent<UIDocument>();

        // Initialize the character list controller
        var actorListController = new ActorListController();
        actorListController.InitializeList(uiDocument.rootVisualElement, m_ListEntryTemplate);
    }
}

20. UI 도큐먼트 객체에 mainview.cs를 부착해주자. 

21. 어라 List Entry Template가 비는데?

 

지금만들어준다. UI 빌더 창을 다시 열자. 

 

Window -> UI Toolkit -> UI Builder로 가면된다.

 

기존게 남아있으면 new 로 새로운걸 만들어주자. 

 

22. VisualElement와 Label 컨트롤을 추가해주자.

크기 위치 등은 적절히 세팅해주고 ListEntry.uxml로 저장하자.

 

23. list entry controller도 만들어준다. ActorListEntryController.cs 라고 명명했고 코드는 다음과 같다.

 

using UnityEngine.UIElements;

public class CharacterListEntryController
{
    Label m_NameLabel;

    public void SetVisualElement(VisualElement visualElement)
    {
        m_NameLabel = visualElement.Q<Label>("CharacterName");
    }

    public void SetCharacterData(CharacterData characterData)
    {
        m_NameLabel.text = characterData.m_CharacterName;
    }
}

 

23. list entry template 할당하기

위 이미지처럼 방금 만든 uxml 파일을 붙이면 된다. 

 

24. 액터 리스트 가져오기

 

ActorListController에 하단 코드를 넣어서 actor list 객체에 접근하여 하위 노드를 가져오도록 해준다.

 

    void EnumerateAllCharacters()
    {
        actorListObject = GameObject.Find("ActorList");


        actorList = new List<string>();

        int numOfChild = actorListObject.transform.childCount;
        for (int i = 0; i < numOfChild; i++)
        {
            Debug.Log(actorListObject.transform.GetChild(i).name);
            actorList.Add(actorListObject.transform.GetChild(i).name);
        }
    }

 

25. UI 요소와 게임 로직 요소 연결해주기

 

    // UXML template for list entries
    VisualTreeAsset ui_ListEntryTemplate;

    // UI element references
    ListView ui_ActorList;
    
        public void InitializeList(VisualElement root, VisualTreeAsset listElementTemplate)
    {
        EnumerateAllCharacters();

        // Store a reference to the template for the list entries
        ui_ListEntryTemplate = listElementTemplate;

        // Store a reference to the character list element
        ui_ActorList = root.Q<ListView>("ActorList");


        FillCharacterList();

    }
    
    
    void FillCharacterList()
    {
        Debug.Log("start fill up");

        // Set up a make item function for a list entry
        ui_ActorList.makeItem = () =>
        {
            // Instantiate the UXML template for the entry
            var newListEntry = ui_ListEntryTemplate.Instantiate();

            // Instantiate a controller for the data
            var newListEntryLogic = new ActorListEntryController();

            // Assign the controller script to the visual element
            newListEntry.userData = newListEntryLogic;

            newListEntryLogic.SetVisualElement(newListEntry);

            


            // Return the root of the instantiated visual tree
            return newListEntry;
        };

        // Set up bind function for a specific list entry
        ui_ActorList.bindItem = (item, index) =>
        {
            Debug.Log(index.ToString());
            (item.userData as ActorListEntryController).SetActorData(actorList[index]);
        };



        // Set a fixed item height
        ui_ActorList.fixedItemHeight = 45;

        // Set the actual item's source list/array
        ui_ActorList.itemsSource = actorList;
    }

26. 실행해보기

 

 

 

actor list가 나오는 것을 확인할 수 있다. 어떻게 예쁘게 쓸지는 이제부터 고민해보자.