챗GPT게임개발62: UI 빌더를 통해 단계별로 인벤토리 UI(스크롤뷰) 구성하기

안녕하세요. 인텔리원스튜디오(IntelliOneStudio)입니다.

이번 시간에는 Unity의 UI 빌더를 사용하여 인벤토리 UI를 구성하는 방법에 대해 알아볼까해요.

 

[참고] Unity에 대한 경험이 없었지만 챗GPT를 활용해서 3주만에 개발했어요. 약간의 수정은 있었지만 99% 코딩은 챗GTP가 했어요. 개발에 참고하세요.

* APP Store 에서 다운로드 

https://apps.apple.com/kr/app/%EB%86%8D%EB%B6%80%EC%9D%98-%EA%BF%88/id6479183930

‎농부의 꿈

 

*Google Play 에서 다운로드

https://play.google.com/store/apps/details?id=com.intellione.farmersfirstdream&pcampaignid=web_share

농부의 꿈 - Google Play 앱

 

아래와 같이 ChatGPT에게 질문했어요.

※ ChatGPT 답변 내용 중 제가 별도로 표시한 파란색 내용을 기준으로 읽으시면 좀 더 이해가 쉽게 될거예요.

[질문] 안녕 ChatGPT, Unity UI 빌더를 사용해서 인벤토리 UI를 구성하려고 하는데, 어떻게 하면 될까? 구체적인 예시를 보여줄 수 있어?

[답변]

안녕하세요! Unity의 UI 빌더를 사용하여 인벤토리 UI를 구성하는 방법을 단계별로 설명해드릴게요. 먼저 UI 빌더를 통해 UXML 파일을 생성하고, 그 다음으로 C# 스크립트를 작성하여 UI 요소를 동적으로 추가하는 방법을 소개하겠습니다.

1. UXML 파일 생성

먼저, UI 빌더를 사용하여 인벤토리 UI의 기본 구조를 정의하는 UXML 파일을 생성해야 합니다. 아래와 같은 두 개의 UXML 파일을 만드세요.

InventoryContainer.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement name="InventoryContainer" style="background-color: rgb(255, 255, 255); height: 500px; position: absolute; bottom: 0; width: 100%; flex-direction: row; align-items: center; justify-content: center; margin-bottom: 0;">
        <ui:ScrollView name="InventoryScrollView" horizontal-scrolling="true" mode="Horizontal" touch-scroll-type="Elastic" vertical-scroller-visibility="Hidden" style="flex-direction: row; align-items: center; justify-content: center; height: 290px; width: 100%; flex-grow: 1; bottom: 100px;">
            <ui:VisualElement name="InventoryContent" style="flex-direction: row; align-items: center; justify-content: flex-start; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; width: 100%; height: 280px; flex-grow: 0; background-image: none; -unity-slice-bottom: 0;" />
        </ui:ScrollView>
    </ui:VisualElement>
</ui:UXML>

 

InventoryEntry.uxml

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <ui:VisualElement name="InventoryEntry" style="flex-grow: 0; width: 280px; height: 280px; flex-direction: column; margin: 5px; position: relative; align-items: auto; justify-content: center; align-self: auto; overflow: visible; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgb(231, 29, 29);">
        <ui:VisualElement name="Item" style="flex-grow: 1; align-items: center; justify-content: flex-end; flex-direction: column-reverse; position: absolute; width: 220px; height: 220px; align-self: center;" />
        <ui:Label tabindex="-1" text="0" display-tooltip-when-elided="true" name="ItemCount" style="position: absolute; right: auto; bottom: 5px; background-color: rgb(255, 255, 255); width: 25px; height: 25px; -unity-text-align: middle-center; background-image: none; align-items: center; justify-content: center; align-self: center;" />
    </ui:VisualElement>
</ui:UXML>​

2. C# 스크립트 작성

다음으로, UXML 파일을 사용하여 UI를 구성하는 C# 스크립트를 작성합니다.

using UnityEngine;
using UnityEngine.UIElements;

public class InventoryUI : MonoBehaviour
{
    private UIDocument uiDocument;
    private VisualElement inventoryContent;
    public VisualTreeAsset inventoryEntryTemplate;
    public Sprite[] itemSprites; // 다양한 스프라이트를 배열로 할당

    void Awake()
    {
        Debug.Log("InventoryUI Awake called");

        uiDocument = GetComponent<UIDocument>();
        if (uiDocument == null)
        {
            Debug.LogError("UIDocument is null");
            return;
        }

        inventoryContent = uiDocument.rootVisualElement.Q<VisualElement>("InventoryContent");
        if (inventoryContent == null)
        {
            Debug.LogError("InventoryContent is null");
            return;
        }

        if (inventoryEntryTemplate == null)
        {
            Debug.LogError("InventoryEntryTemplate is not assigned");
            return;
        }

        // 기존 InventoryEntry를 제거
        inventoryContent.Clear();

        // 예시로 20개의 인벤토리 엔트리를 추가
        for (int i = 0; i < 20; i++)
        {
            // 스프라이트 배열의 인덱스를 순환하며 스프라이트를 할당
            Sprite itemSprite = itemSprites[i % itemSprites.Length];
            AddInventoryEntry(i.ToString(), itemSprite);
        }
    }

    void AddInventoryEntry(string itemCount, Sprite itemSprite)
    {
        Debug.Log("Adding inventory entry");

        VisualElement inventoryEntry = inventoryEntryTemplate.CloneTree();
        if (inventoryEntry == null)
        {
            Debug.LogError("Failed to clone InventoryEntry template");
            return;
        }

        Label itemCountLabel = inventoryEntry.Q<Label>("ItemCount");
        if (itemCountLabel == null)
        {
            Debug.LogError("ItemCount label is null");
            return;
        }

        itemCountLabel.text = itemCount;

        // Item 요소에 이미지 추가
        VisualElement itemElement = inventoryEntry.Q<VisualElement>("Item");
        if (itemElement == null)
        {
            Debug.LogError("Item element is null");
            return;
        }

        Image itemIcon = new Image();
        itemIcon.sprite = itemSprite; // 스프라이트 할당
        itemIcon.style.width = new StyleLength(StyleKeyword.Auto);
        itemIcon.style.height = new StyleLength(StyleKeyword.Auto);
        itemElement.Add(itemIcon);

        inventoryContent.Add(inventoryEntry);
    }
}

 

 

스크립트 사용 방법도 알아봐요

이 스크립트는 사용하는 방법에 대해서도 물어볼께요.

[질문] 안녕 ChatGPT, 이 스크립트를 Unity 프로젝트에서 어떻게 사용하면 될까?

[답변]

이 스크립트를 Unity 프로젝트에서 사용하려면 다음 단계를 따르면 됩니다.

1. 스크립트 및 UXML 파일 추가

위의 UXML 파일과 C# 스크립트를 작성한 후, Unity 프로젝트의 적절한 폴더에 추가합니다.

2. UIDocument 설정

Hierarchy 창에서 UI Document 게임 오브젝트를 생성하고, InventoryUI 스크립트를 추가합니다. UIDocument의 Visual Tree Asset 필드에 InventoryContainer.uxml을 할당합니다.

3. VisualTreeAsset 할당

InventoryUI 스크립트의 Inventory Entry Template 필드에 InventoryEntry.uxml을 할당합니다.

4. Sprite 할당

InventoryUI 스크립트의 Item Sprites 배열에 사용할 스프라이트들을 할당합니다.

5. 게임 실행

모든 설정이 완료되면 게임을 실행하여 인벤토리 UI가 제대로 작동하는지 확인합니다. 인벤토리에 20개의 항목이 표시되고, 각 항목에는 스프라이트와 개수가 표시됩니다.

이러한 단계를 통해 UI 빌더와 C# 스크립트를 사용하여 동적 인벤토리 UI를 구성할 수 있습니다.

 

결과는 이렇게 나와요.

챗GPT 만들어 준 코드에서 한줄의 변경도 없이 사용해서 스크롤뷰를 통한 인벤토리 UI를 만들었어요.

 

오늘은 ChatGPT를 통해 Unity의 UI 빌더를 사용하여 인벤토리 UI를 구성하는 방법을 배워봤습니다. 단 몇 줄의 요청 사항을 통해 바로 적용 가능한 코드를 제공받을 수 있다는 점이 놀랍네요.

 

오늘도 활기찬 하루되세요.

 

지금까지, 언제나 성장하는 인텔리원스튜디오(IntelliOneStudio)입니다.

감사합니다.