Unity 사용자 매뉴얼: 전환 이벤트 만들기

개요

이 문서는 Unity에서 사용자 인터페이스(UI) 툴킷을 사용하여 전환 이벤트를 만드는 방법을 설명합니다. 이 가이드는 버튼 클릭 시 컬러 팔레트가 파란색에서 녹색으로 바뀌는 커스텀 에디터 창의 예시로 설명됩니다.

필요한 사항

• Unity 에디터에 대해 잘 알고 있어야 하며
• UI 툴킷 및 C# 스크립팅에 익숙해야 합니다.

프로젝트 설정

1. Unity에서 새 프로젝트를 생성합니다.
2. 메뉴에서 Assets > Create > UI Toolkit > Editor Window를 선택합니다.
3. 창의 이름을 TransitionExample으로 지정하고 변경 사항을 저장합니다.

이 과정으로 TransitionExample.cs, TransitionExample.uss, TransitionExample.uxml 세 개의 파일이 생성됩니다.

파일 내용 수정

TransitionExample.cs

다음 코드로 파일 내용을 수정합니다.

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

public class TransitionExample : EditorWindow
{
    // 필드 정의
    [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;

    private Button clickMeButton;
    private VisualElement colorChanger;
    private Label eventLabel;
    private Label timeLabel;

    private DateTime lastEvent;
    private static readonly TimeSpan NearlyInstantaneousThreshold = TimeSpan.FromMilliseconds(10);

    // UI 요소의 클래스 이름 정의
    private static readonly string ClickMeButtonClass = "click-me";
    private static readonly string ColorChangerClass = "color-changer";
    private static readonly string ColorChangerTransitionClass = "color-transition";
    private static readonly string EventLabelName = "eventLabel";
    private static readonly string TimeLabelName = "timeLabel";
    private static readonly string TimeBelowThresholdText = "Almost instantaneous.";

    [MenuItem("Window/UI Toolkit/Transition Example")]
    public static void ShowExample()
    {
        TransitionExample wnd = GetWindow<TransitionExample>();
        wnd.titleContent = new GUIContent("TransitionExample");
        wnd.minSize = new Vector2(500f, 400f);
    }

    public void CreateGUI()
    {
        lastEvent = DateTime.Now;
        VisualElement root = rootVisualElement;
        VisualElement uxmlAsset = m_VisualTreeAsset.Instantiate();
        root.Add(uxmlAsset);

        clickMeButton = root.Q<Button>(className: ClickMeButtonClass);
        colorChanger = root.Q<VisualElement>(className: ColorChangerClass);
        eventLabel = root.Q<Label>(name: EventLabelName);
        timeLabel = root.Q<Label>(name: TimeLabelName);

        // 이벤트 등록
        clickMeButton.RegisterCallback<ClickEvent>(OnClickEvent);
        colorChanger.RegisterCallback<TransitionRunEvent>(OnTransitionRun);
        colorChanger.RegisterCallback<TransitionStartEvent>(OnTransitionStart);
        colorChanger.RegisterCallback<TransitionEndEvent>(OnTransitionEnd);
        colorChanger.RegisterCallback<TransitionCancelEvent>(OnTransitionCancel);
    }

    private void OnDisable()
    {
        clickMeButton.UnregisterCallback<ClickEvent>(OnClickEvent);
        colorChanger.UnregisterCallback<TransitionRunEvent>(OnTransitionRun);
        colorChanger.UnregisterCallback<TransitionStartEvent>(OnTransitionStart);
        colorChanger.UnregisterCallback<TransitionEndEvent>(OnTransitionEnd);
        colorChanger.UnregisterCallback<TransitionCancelEvent>(OnTransitionCancel);
    }

    private void OnClickEvent(ClickEvent evt)
    {
        colorChanger.ToggleInClassList(ColorChangerTransitionClass);
    }

    private void OnTransitionRun(TransitionRunEvent evt)
    {
        DisplayLatestEvent("TransitionRunEvent", DateTime.Now);
    }

    private void OnTransitionStart(TransitionStartEvent evt)
    {
        DisplayLatestEvent("TransitionStartEvent", DateTime.Now);
    }

    private void OnTransitionEnd(TransitionEndEvent evt)
    {
        DisplayLatestEvent("TransitionEndEvent", DateTime.Now);
    }

    private void OnTransitionCancel(TransitionCancelEvent evt)
    {
        DisplayLatestEvent("TransitionCancelEvent", DateTime.Now);
    }

    private void DisplayLatestEvent(string eventType, DateTime timestamp)
    {
        var elapsed = timestamp - lastEvent;
        if (elapsed <= NearlyInstantaneousThreshold)
        {
            timeLabel.text = TimeBelowThresholdText;
            eventLabel.text += eventType;
        }
        else
        {
            timeLabel.text = $"{elapsed:s\\.ff} s";
            eventLabel.text = eventType;
        }
        lastEvent = timestamp;
    }
}

TransitionExample.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">
    <Style src="TransitionExample.uss"/>
    <ui:VisualElement class="main-container">
        <ui:Button text="Click Me!" class="click-me"/>
        <ui:VisualElement class="color-changer"/>
        <ui:VisualElement class="label-section">
            <ui:VisualElement class="label-line">
                <ui:Label text="Latest event(s) :  "/>
                <ui:Label name="eventLabel"/>
            </ui:VisualElement>
            <ui:VisualElement class="label-line">
                <ui:Label text="Time since last event :  "/>
                <ui:Label name="timeLabel"/>
            </ui:VisualElement>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

TransitionExample.uss

다음 코드로 파일 내용을 수정합니다.

.click-me {
    width:250px;
    height:50px;
    font-size:40px;
    -unity-font-style: bold-and-italic;
    margin:30px;
}

.color-changer {
    margin:10px;
    width:150px;
    height:150px;
    border-width:10px;
    border-radius:75px;
    background-color: rgb(0, 31, 138);
    transition: background-color 3s ease-in-out 1s;
}

.main-container {
    align-items: center;
    justify-content: space-between;
    flex-grow:1;
    background-color: rgb(60, 60, 60);
}

.label-section {
    margin:10px;
    border-width:2px;
    width:95%;
    align-items: center;
}

.label-line {
    flex-direction: row;
    margin:5px;
    flex-grow:1;
    align-items: center;
    width:90%;
    height:25px;
    font-size:14px;
    padding:0;
}

.color-transition {
    background-color: rgb(177, 221, 111);
}

에디터 메뉴에서 예시 실행

1. TransitionExample.cs 파일을 선택한 후 TransitionExample.uxml이 없는 경우 인스펙터의 Visual Tree Asset 필드에 끌어다 놓습니다.
2. 메뉴에서 Window > UI Toolkit > Transition Example을 선택합니다.
3. 버튼을 클릭하면 컬러 전환과 전송된 이벤트에 대한 설명을 볼 수 있습니다.

추가 리소스

• USS (스타일 시트)
• 이벤트 처리
• 루핑 전환 만들기
• 커스텀 에디터 창에서 전환 생성
• 에디터 창 간에 드래그 앤 드롭 UI 만들기

이 자료는 Unity Technologies에 의해 작성되었습니다. 2022년 출판.