Unity 탭 메뉴 생성 가이드

이 가이드는 Unity의 UI 툴킷을 사용하여 런타임 탭 메뉴를 만드는 방법을 설명합니다. 이 예제에서는 세 개의 탭을 만들고, 각 탭에 해당하는 콘텐츠를 표시하게 됩니다. 탭을 클릭하면 연결된 콘텐츠가 표시되고, 나머지 콘텐츠는 숨겨집니다.

개요

본 예시에서는 메뉴에 3개의 탭을 추가하고, 클릭 시 해당 탭과 연관된 콘텐츠가 표시되도록 합니다.

선행 조건

이 가이드는 Unity, UI 툴킷, Flexbox, C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기에 앞서 아래 내용을 숙지해야 합니다:

• 레이블
• USS (Unity Style Sheets)
• UI 빌더
• Flexbox를 사용한 요소 위치 지정

탭 메뉴 요소 정의

1. Unity에서 프로젝트 생성:
2. GameObject > UI Toolkit > UI Document를 클릭하여 샘플 씬에 UI 문서를 추가합니다.
3. Assets에 TabbedMenu라는 이름의 폴더를 만들어 모든 파일을 저장합니다.
4. UI 문서 생성:
5. TabbedMenu 폴더에 TabbedMenu.uxml라는 이름의 UI 문서를 생성합니다.
6. TabbedMenu.uxml을 더블 클릭하여 UI 빌더에서 엽니다.
7. 루트 아래에 tabs와 tabContent라는 이름의 VisualElement 두 개를 추가합니다.
8. 각 탭과 콘텐츠에 필요한 레이블을 추가합니다.

UI 빌더 계층 구조

UI 빌더의 최종 계층 구조는 다음과 같습니다:

탭 메뉴 스타일 정의

USS를 사용하여 탭과 탭 콘텐츠의 레이아웃을 정의합니다. 아래는 탭 스타일을 정의하기 위한 TabbedMenu.uss 의 내용입니다.

/* Style for tabs */
#tabs {
    flex-direction: row;
    background-color: rgb(229, 223, 223);
    -unity-font-style: bold;
    font-size: 14px;
}

/* Sets each label in tabs to have the same size.*/
.tab {
    flex-grow: 1;
}

/* Adds background color for the selected tab */
.currentlySelectedTab {
    background-color: rgb(173, 166, 166);
}

/* Style for tabContent */
#tabContent {
    background-color: rgb(255, 255, 255);
    font-size: 20px;
}

/* Hides the unselected tab content */
.unselectedContent {
    display: none;
}

씬 설정

1. SampleScene에서 UIDocument 게임 오브젝트를 생성하고 UI 문서를 소스 에셋으로 추가합니다.
2. UIDocument 게임 오브젝트를 선택하고, TabbedMenu.uxml 파일을 드래그하여 인스펙터의 UI Document 컴포넌트의 Source Asset 필드에 추가합니다.

탭 메뉴 로직 정의

탭 클릭 시 콘텐츠를 변경하는 C# 스크립트를 생성합니다:

1. TabbedMenu 폴더에 TabbedMenuController.cs 생성:

// This script defines the tab selection logic.
using UnityEngine.UIElements;

public class TabbedMenuController {
    // Define member variables
    // ...

    public TabbedMenuController(VisualElement root) {
        // ...
    }

    public void RegisterTabCallbacks() {
        // ...
    }

    private void TabOnClick(ClickEvent evt) {
        // ...
    }

    private static bool TabIsCurrentlySelected(Label tab) {
        // ...
    }

    private UQueryBuilder<Label> GetAllTabs() {
        // ...
    }

    private void SelectTab(Label tab) {
        // ...
    }

    private void UnselectTab(Label tab) {
        // ...
    }

    private static string GenerateContentName(Label tab) => {
        // ...
    }

    private VisualElement FindContent(Label tab) {
        // ...
    }
}

1. TabbedMenu 폴더에 TabbedMenu.cs 생성:

// This script attaches the tabbed menu logic to the game.
using UnityEngine;
using UnityEngine.UIElements;

public class TabbedMenu : MonoBehaviour {
    private TabbedMenuController controller;

    private void OnEnable() {
        UIDocument menu = GetComponent<UIDocument>();
        VisualElement root = menu.rootVisualElement;

        controller = new(root);
        controller.RegisterTabCallbacks();
    }
}

실행 및 검증

1. SampleScene에서 AttachedMenu.cs를 인스펙터에서 추가합니다.
2. 플레이 모드로 전환하고 다른 탭을 클릭하여 콘텐츠를 확인합니다.

추가 리소스

• 런타임 UI 시작하기
• 게임 뷰에서 UI 렌더링
• 팝업 창 만들기

이 가이드가 Unity에서 탭 메뉴를 만드는 데 도움이 되길 바랍니다!