Unity 사용자 매뉴얼: 루핑 전환 만들기

이 문서는 Unity의 UI Toolkit을 사용하여 루핑 전환을 만드는 방법을 설명합니다. 이 예시는 TransitionEndEvent를 활용하여 Yo-yo와 A-to-B 방식의 루핑 전환을 구현합니다.

개요

이 예시에서는 두 가지 루핑 애니메이션을 구현합니다.

• Yo-yo: 루프가 상태 A에서 시작하여 상태 B로 전환한 후 다시 상태 A로 돌아옵니다.
• A-to-B: 루프가 상태 A에서 시작하여 상태 B로 전환한 후, 전환 없이 상태 A로 돌아옵니다.

루프 전환 효과는 Unity 에디터에서 확인할 수 있습니다. 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.

선행 조건

이 가이드는 Unity 에디터, UI Toolkit 및 C# 스크립팅에 익숙한 개발자를 위한 내용입니다. 시작하기 전에 다음 요소를 숙지하십시오.

• UXML
• USS
• 전환 이벤트

시작하기

1. Unity에서 새 프로젝트를 생성합니다.
2. 프로젝트(페이지) 창에서 loop-transition-example이라는 이름의 폴더를 만듭니다.
3. 폴더를 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.
4. UI Toolkit Editor Window Creator 창에서 LoopingExample을 입력합니다.
5. 변경 사항을 저장합니다. 이렇게 하면 LoopingExample.cs, LoopingExample.uss, LoopingExample.uxml 세 개의 파일이 생성됩니다.

코드 구현

LoopingExample.cs 파일을 다음과 같이 수정합니다.

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class LoopingExample : EditorWindow
{
    [SerializeField] private VisualTreeAsset m_VisualTreeAsset = default;
    private Label _yoyoLabel;
    private Label _a2bLabel;

    [MenuItem("Window/UI Toolkit/Transition Looping Example")]
    public static void ShowExample()
    {
        var wnd = GetWindow<LoopingExample>();
        wnd.titleContent = new GUIContent("TransitionStyle");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;
        VisualElement asset = m_VisualTreeAsset.Instantiate();
        root.Add(asset);
        SetupYoyo(root);
        SetupA2B(root);
    }

    private void SetupYoyo(VisualElement root)
    {
        _yoyoLabel = root.Q<Label>(name: "yoyo-label");
        _yoyoLabel.RegisterCallback<TransitionEndEvent>(evt => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo"));
        root.schedule.Execute(() => _yoyoLabel.ToggleInClassList("enlarge-scale-yoyo")).StartingIn(100);
    }

    private void SetupA2B(VisualElement root)
    {
        _a2bLabel = root.Q<Label>(name: "a2b-label");
        _a2bLabel.RegisterCallback<TransitionEndEvent>(evt =>
        {
            _a2bLabel.RemoveFromClassList("enlarge-scale-a2b");
            _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(10);
        });
        _a2bLabel.schedule.Execute(() => _a2bLabel.AddToClassList("enlarge-scale-a2b")).StartingIn(100);
    }
}

LoopingExample.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="LoopingExample.uss" />
    <ui:VisualElement name="container">
        <ui:VisualElement>
            <ui:Label text="Yo-yo Transition" name="yoyo-label" class="text-style" />
        </ui:VisualElement>
        <ui:VisualElement>
            <ui:Label text="A-to-B Transition" name="a2b-label" class="text-style"/>
        </ui:VisualElement>
    </ui:VisualElement>
</ui:UXML>

LoopingExample.uss 파일을 다음과 같이 수정합니다.

#yoyo-label {
    transition-duration: 3s;
}

.text-style {
    font-size: 20px;
    flex-grow: 0;
    margin: 20px; 
}

.enlarge-scale-a2b {
    scale: 1.5 1.5;
    transition-duration: 3s;
}

.enlarge-scale-yoyo {
    scale: 1.5 1.5;
}

#container {
    flex-grow: 1;
    justify-content: space-around;
    align-items: center;
}

테스트

예제를 테스트하려면 메뉴에서 Window > UI Toolkit > Transition Looping Example을 선택하십시오.

추가 리소스

• USS
• 이벤트 처리
• 전환 이벤트 만들기
• 커스텀 에디터 창에서 전환 만들기
• UI 렌더러

이 문서에서는 Unity UI Toolkit을 활용하여 루핑 전환을 만드는 방법을 배웠습니다. 다양한 전환 효과와 애니메이션을 추가하여 더 풍부한 사용자 인터페이스를 만들 수 있습니다!