Unity 사용자 매뉴얼 2022.3 (LTS)

사용자 인터페이스(UI) 생성

UI 툴킷 이벤트로 동작하는 컨트롤

이벤트 예시: 커스텀 에디터 창에서 전환 만들기

이 예시는 UI 빌더와 C# 스크립트를 사용하여 간단한 전환을 만드는 방법을 보여줍니다. 이 예시에서 생성하는 커스텀 에디터 창은 마우스를 레이블 위로 가져가면 회전하고 확대/축소됩니다. 전환은 3초 동안 지속됩니다.

선행 조건

이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자를 위한 것입니다. 시작하기 전에 다음을 숙지하십시오: - UI 빌더 - USS - Pseudo-classes - 이벤트 처리

에디터 창 파일 만들기

에디터 창 파일을 자동으로 만들기 위해 다음 단계를 따르십시오:

1. Unity 프로젝트를 생성하고 'create-a-transition'이라는 폴더를 만듭니다.
2. 폴더 안에서 프로젝트 창을 오른쪽 클릭합니다.
3. Create > UI Toolkit > Editor Window를 선택합니다.
4. C# 상자에 TransitionExample을 입력합니다.

그러면 다음 파일이 생성됩니다:

UI 빌더에서 전환 만들기

UI 빌더에서 두 번째 및 세 번째 레이블에 대한 전환을 만든 후, 사용자가 레이블을 가리키면 레이블의 크기를 조정하고 회전하도록 설정합니다. 전환이 3초 동안 지속되도록 합니다.

1. UI 빌더에서 TransitionExample.uxml을 엽니다.
2. StyleSheets 창에서 Add new selector를 클릭하고 Label:hover를 입력합니다.
3. 인스펙터의 Transform 섹션에서 레이블의 크기를 조정하고 회전합니다.
4. Scale에서 X값을 1.1로 변경하고 Rotate에 10을 입력합니다.
5. StyleSheets 창에서 Add new selector를 클릭하고 Label을 입력합니다.
6. Transition Animations 섹션의 Duration에 3을 입력합니다.

다음은 TransitionExample.uss 파일의 예시입니다:

.custom-label {
    font-size:20px;
    -unity-font-style: bold;
    color: rgb(68, 138, 255);
}

Label:hover {
    scale:1.1 1;
    rotate:10deg;
}

Label {
    transition-duration:3s;
}

C#에서 전환 만들기

C#에서 첫 번째 레이블에 대해 이전 섹션에서 수행한 것과 동일한 전환을 만듭니다. TransitionExample.cs를 열고 아래와 같이 내용을 변경합니다:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;

public class TransitionExample : EditorWindow
{
    [SerializeField]
    VisualTreeAsset m_VisualTreeAsset;

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

    public void CreateGUI()
    {
        // Each editor window contains a root VisualElement object.
        VisualElement root = rootVisualElement;

        // Create a Label and add it to the root.
        cSharpLabel = new Label("Hello World! From C#");
        root.Add(cSharpLabel);

        // Create transition on the new Label.
        cSharpLabel.style.transitionDuration = new List<TimeValue>{ new TimeValue(3) };

        // Record default rotate and scale values.
        defaultRotate = cSharpLabel.resolvedStyle.rotate;
        defaultScale = cSharpLabel.resolvedStyle.scale;

        // Set up event handlers to simulate the use of the :hover pseudo-class.
        cSharpLabel.RegisterCallback<PointerOverEvent>(OnPointerOver);
        cSharpLabel.RegisterCallback<PointerOutEvent>(OnPointerOut);

        // Instantiate UXML
        VisualElement labelFromUXML = m_VisualTreeAsset.Instantiate();
        root.Add(labelFromUXML);
    }

    // The Label created with C#.
    VisualElement cSharpLabel;

    // The default rotate and scale values for the new Label.
    Rotate defaultRotate;
    Scale defaultScale;

    void OnPointerOver(PointerOverEvent evt)
    {
        SetHover(evt.currentTarget as VisualElement, true);
    }

    void OnPointerOut(PointerOutEvent evt)
    {
        SetHover(evt.currentTarget as VisualElement, false);
    }

    void SetHover(VisualElement label, bool hover)
    {
        label.style.rotate = hover ? new(Angle.Degrees(10)) : defaultRotate;
        label.style.scale = hover ? new Vector2(1.1f, 1) : defaultScale;
    }

    void OnDisable()
    {
        cSharpLabel.UnregisterCallback<PointerOverEvent>(OnPointerOver);
        cSharpLabel.UnregisterCallback<PointerOutEvent>(OnPointerOut);
    }
}

결과 확인

Unity에서 Window > UI Toolkit > Transition Example을 선택한 후, 생성한 레이블 위로 마우스를 가져가면 전환 효과를 확인할 수 있습니다. 레이블이 3초 동안 회전하며 크기가 커집니다.

추가 리소스

• USS 전환
• 이벤트 예시
• 커스텀 에디터 창 내부에 드래그 앤 드롭 UI 생성

저작권 © 2022 Unity Technologies. Publication 2022.3