챗GPT게임개발60:Unity에서 UI Builder를 사용하여 UI 디자인 및 이벤트 처리하기

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

오늘은 GPT-4, GPT-4o를 활용해서 Unity에서 UI Builder를 사용하는 방법을 살펴볼게요.

[오늘의 목표] GPT-4, GPT-4o를 활용해서 Unity로 구현한 UI Builder를 통한 UI 디자인 및 이벤트 처리

• UI Builder 설치 및 설정
• UXML 및 USS 파일 생성
• UI 디자인 및 스타일 설정
• UIDocument 설정
• C# 스크립트를 작성하여 UI 이벤트 처리
• 게임 실행 및 테스트

[참고] 챗gpt를 활용하여 개발/배포한 게임(소요기간 : 3주)

게임 개발과 Unity 사용 경험 없이 챗GPT를 활용해서 만들었어요.

아래 링크를 통해서 다운로드해보세요.

 

[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 앱

 

UI Builder 설치 및 설정하기

먼저 Unity에서 UI Builder를 사용하기 위해 필요한 설정을 해볼게요.

• Unity 에디터에서 패키지 매니저 열기:
  • Unity 메뉴에서 Window -> Package Manager를 선택해요.
• UI Builder 설치:
  • Package Manager 창에서 Unity Registry를 선택해요.
  • UI Builder를 검색하고 설치해요.

UXML 및 USS 파일 생성하기

UI 요소와 스타일을 정의하기 위해 필요한 파일을 생성해볼게요.

• UXML 파일 생성:
  • 프로젝트 뷰에서 Assets 폴더를 마우스 오른쪽 버튼으로 클릭해요.
  • Create -> UI Toolkit -> Editor Window를 선택해요.
  • 파일 이름을 MainUI.uxml로 설정하고 저장해요.
• USS 파일 생성:
  • 프로젝트 뷰에서 Assets 폴더를 마우스 오른쪽 버튼으로 클릭해요.
  • Create -> UI Toolkit -> Style Sheet를 선택해요.
  • 파일 이름을 MainUI.uss로 설정하고 저장해요.

UI 디자인

이제 UI Builder를 열고 UI 요소를 디자인해볼게요.

• UI Builder 열기:
  • Window -> UI Toolkit -> UI Builder를 선택해요.
  • UI Builder 창이 열려요.
• UXML 파일 열기:
  • UI Builder 창에서 File -> Open을 선택해요.
  • MainUI.uxml 파일을 선택하여 열어요.
• UI 요소 추가:
  • UI Builder의 Library 패널에서 Controls 아래의 다양한 UI 요소를 드래그 앤 드롭하여 Hierarchy 패널에 추가해요.
  • 예를 들어, Button, Label, VisualElement 등을 추가해요.
• 속성 설정:
  • Hierarchy 패널에서 추가한 요소를 선택해요.
  • Inspector 패널에서 요소의 속성을 설정해요.
    • Label: 텍스트를 "Welcome to the Game!"으로 설정해요.
    • Button: 이름을 startButton으로 설정하고, 텍스트를 "Start Game"으로 설정해요.
• 스타일 설정:
  • StyleSheets 패널에서 + 버튼을 클릭하여 MainUI.uss 파일을 연결해요.
  • Hierarchy 패널에서 요소를 선택하고, Inspector 패널에서 스타일 클래스를 추가해요.

예제: 간단한 UI 만들기

• MainUI.uxml:

<?xml version="1.0" encoding="utf-8"?>
<ui:UXML xmlns:ui="UnityEngine.UIElements">
  <ui:VisualElement class="container">
    <ui:Label text="Welcome to the Game!" class="label"/>
    <ui:Button name="startButton" text="Start Game" class="button"/>
  </ui:VisualElement>
</ui:UXML>

• MainUI.uss:

.container {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
.label {
    font-size: 24px;
    color: white;
}
.button {
    font-size: 18px;
    margin-top: 10px;
}

 

UIDocument 설정하기

생성한 UI를 연결하기 위해 UIDocument를 설정해볼게요.

• UIDocument 추가:
  • 계층 뷰에서 빈 게임 오브젝트를 생성하고 이름을 UI Root로 설정해요.
  • UI Root 게임 오브젝트를 선택하고, Add Component 버튼을 클릭하여 UIDocument를 추가해요.
• UIDocument 설정:
  • UI Root 오브젝트의 UIDocument 컴포넌트에서 Source Asset에 MainUI.uxml 파일을 할당해요.
  • MainUI.uxml 파일에서 Style Sheets 항목에 MainUI.uss 파일을 추가해요.

UI 이벤트 처리하기

UI 요소와 상호작용하기 위해 스크립트를 작성하고 연결해볼게요.

 

Assets 폴더에서 C# 스크립트를 생성하고 이름을 UIScript.cs로 설정해요.

using UnityEngine;
using UnityEngine.UIElements;

public class UIScript : MonoBehaviour
{
    private Button startButton;

    void OnEnable()
    {
        // UIDocument 컴포넌트에서 rootVisualElement 가져오기
        var uiDocument = GetComponent<UIDocument>();
        var root = uiDocument.rootVisualElement;

        // UXML에서 버튼 가져오기
        startButton = root.Q<Button>("startButton");

        // 버튼 클릭 이벤트 핸들러 등록
        startButton.clicked += OnStartButtonClicked;
    }

    void OnDisable()
    {
        // 버튼 클릭 이벤트 핸들러 해제
        startButton.clicked -= OnStartButtonClicked;
    }

    void OnStartButtonClicked()
    {
        Debug.Log("Start button clicked!");
        // 여기에 게임 시작 로직 추가
    }
}

 

스크립트 연결:

• UI Root 게임 오브젝트에 UIScript 스크립트를 추가해요.

실행 및 테스트하기

• Unity 에디터에서 게임을 실행하면 UI가 표시되고, 버튼을 클릭하면 콘솔에 "Start button clicked!" 메시지가 출력돼요.

결론

Unity의 UI Builder를 사용하여 UI를 디자인하고, 이를 코드와 연동하는 방법을 배웠어요.

 

UI Toolkit과 UI Builder를 활용하면 직관적이고 효율적으로 UI를 개발할 수 있어요. 

 

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

감사합니다.