UI 빌더 및 C# 스크립트를 사용하여 간단한 전환 만들기

버전: 2021.3+

이 예시에서는 유사 클래스와 C# 이벤트로 트리거되는 단순한 전환을 만드는 방법을 보여 줍니다.

개요 예시

이 예시에서 마우스 포인터를 그 위에 놓으면 회전하고 확대/축소되는 세 개의 레이블이 있는 커스텀 에디터 창을 생성합니다. 전환은 3초 동안 지속됩니다.

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

선행 조건

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

• UI 빌더
• USS
• 유사 클래스
• 이벤트 처리

에디터 창 파일 만들기

메뉴를 사용하여 세 개의 기본 레이블이 있는 에디터 창 파일을 만듭니다.

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

2. create-a-transition이라는 폴더를 생성하여 이 예시의 파일을 저장합니다.

3. 폴더 안에서 프로젝트 창을 오른쪽 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.

4. C# 상자에 TransitionExample을 입력합니다. 그러면 다음 파일이 생성됩니다.

   • TransitionExample.cs
   • TransitionExample.uss
   • TransitionExample.uxml

UI 빌더로 전환 만들기

UI 빌더에서 StyleSheets 창을 사용하여 레이블에 호버 스타일을 생성하여 전환을 트리거합니다. 호버가 아닌 레이블에서 전환을 설정합니다. 호버에서 전환을 설정하면 커서가 레이블을 벗어나면 전환이 이루어지지 않습니다.

1. UI 빌더에서 TransitionExample.uxml을 엽니다.

2. StyleSheets 창에서 Add new selector를 클릭하고 Label:hover를 입력하여 레이블에 호버 스타일을 추가합니다.

3. Enter 키를 누르고 USS 선택자 목록에서 Label:hover를 선택합니다.

4. 인스펙터의 Transform 섹션에서 다음 작업을 수행하여 레이블의 크기를 조정하고 회전합니다.
   • Scale 행에서 X 값을 1.1로 변경합니다.
   • Rotate 행에 10을 입력합니다.

5. StyleSheets 창에서 Add new selector를 클릭하고 Label을 입력하여 레이블에 스타일을 추가합니다.

6. Enter 키를 누르고 USS 선택자 목록에서 Label을 선택합니다.

7. Transition Animations 섹션에서 Duration 행에 3을 입력합니다.

8. UI 빌더를 저장하고 닫습니다. 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;
   }
   

9. Unity에서 Window > UI Toolkit > Transition Example을 선택합니다.

10. 두 번째 및 세 번째 레이블 위에 마우스 포인터를 놓습니다. 그러면 레이블이 3초 동안 회전하며 크기가 커집니다.

C# 스크립트로 전환 만들기

C#에서 첫 번째 레이블에 이전 섹션에서 수행한 것과 동일한 전환을 만듭니다. 포인터 이벤트를 사용하여 전환을 트리거합니다.

1. 텍스트 편집기에서 TransitionExample.cs를 엽니다.

2. 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;
   
           // VisualElements objects can contain other VisualElement following a tree hierarchy.
           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);
       }
   
       // When the user enters or exits the Label, set the rotate and scale.
       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;
       }
   
       // Unregister all event callbacks.
       void OnDisable()
       {
           cSharpLabel.UnregisterCallback<PointerOverEvent>(OnPointerOver);
           cSharpLabel.UnregisterCallback<PointerOutEvent>(OnPointerOut);
       }
   }
   

3. Unity에서 Window > UI Toolkit > Transition Example을 선택합니다.

4. 첫 번째 레이블 위에 마우스 포인터를 놓습니다. 그러면 레이블이 3초 동안 회전하며 크기가 커집니다.

추가 리소스

• USS 전환