Version: 2022.2
언어: 한국어
에디터 창 간에 드래그할 수 있는 드래그 앤 드롭 UI 만들기
루핑 전환 만들기

전환 이벤트 만들기

버전:2021.3+

이 예시는 전환 이벤트의 수명 주기를 보여줍니다.

개요 예시

이 예시에서는 버튼과 컬러 팔레트가 있는 커스텀 에디터 창을 만듭니다.버튼을 클릭하면 다음이 나타납니다.

  • 컬러 팔레트가 파란색에서 녹색으로 바뀌는 전환이 시작됩니다.
  • 전환 중에 전송되는 전환 이벤트입니다.
  • 이벤트의 지속 시간입니다.

이 예시에서 생성한 완성된 파일은 이 GitHub 저장소에서 찾을 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.

예시 생성

  1. 템플릿을 사용하여 Unity에서 프로젝트를 생성합니다.

  2. 메뉴에서 Assets > Create > UI Toolkit > Editor Window를 선택합니다.

  3. UI Toolkit Editor Window Creator 창에서 TransitionExample을 입력합니다.

  4. 변경 사항을 저장합니다.이렇게 하면 TransitionExample.cs, TransitionExample.uss, TransitionExample.uxml로 세 개의 파일이 생성됩니다.

  5. 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);
    
        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;
    
            // Each editor window contains a root VisualElement object
            VisualElement root = rootVisualElement;
    
            // Instantiate UXML
            VisualElement uxmlAsset = m_VisualTreeAsset.Instantiate();
            root.Add(uxmlAsset);
    
            // Get the relevant elements by querying the root element
            clickMeButton = root.Q<Button>(className:ClickMeButtonClass);
    
            colorChanger = root.Q<VisualElement>(className:ColorChangerClass);
    
            eventLabel = root.Q<Label>(name:EventLabelName);
    
            timeLabel = root.Q<Label>(name:TimeLabelName);
    
            // Add callbacks for clicking on the button and monitoring the color changing element.
            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)
        {
            // If two events are sent too close together, add both to the Latest event line.
            // This happens if the delay is set to 0 and the TransitionRun and TransitionStart
            // are sent at the same time, or if the button was pressed before the transition
            // was over, thus sending TransitionCancel and TransitionRun (and potentially
            // TransitionStart) events close together.
            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;
        }
    }
    
  6. 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>
    
  7. 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);
    }
    
  8. TransitionExample.cs를 선택하고 TransitionExample.uxml이 아직 없는 경우 인스펙터의 Visual Tree Asset 필드에 끌어다 놓습니다.

  9. 이 예시를 사용해 보려면 메뉴에서 Window > UI Toolkit > Transition Example을 선택합니다.

  10. 버튼을 클릭하면 컬러 전환과 전송된 이벤트에 대한 설명을 볼 수 있습니다.TransitionRunEventTransitionStartEvent 사이에 긴 지연이 있습니다.긴 기간 동안 버튼을 다시 클릭하여 전환을 인터럽트할 수 있습니다.

추가 리소스

에디터 창 간에 드래그할 수 있는 드래그 앤 드롭 UI 만들기
루핑 전환 만들기