에디터 창 간에 드래그할 수 있는 드래그 앤 드롭 UI 만들기
버전:2021.3+
이 예시에서는 UI 툴킷의 드래그 이벤트와 UnityEditor.DragAndDrop 클래스를 사용하여 창 간에 드래그 앤 드롭 UI를 활성화하는 방법을 보여줍니다.
개요 예시
이 예시에서는 두 개의 커스텀 에디터 창을 생성합니다.에셋을 프로젝트(Project) 창에서 에디터 창으로 드래그할 수 있습니다.또한 동일한 에셋을 한 창에서 다른 창으로 드래그할 수 있습니다.
이 예시에서 생성한 완성된 파일은 GitHub 저장소에서 확인할 수 있습니다.
선행 조건
이 가이드는 Unity 에디터, UI 툴킷, C# 스크립팅에 익숙한 개발자용입니다.시작하기 전에 먼저 다음을 숙지하십시오.
에디터 창의 콘텐츠 정의
빌트인 시각적 요소가 있는 UXML 파일에 각 에디터 창의 콘텐츠를 정의합니다.각 에디터 창에는 배경, 헤더, 드롭 영역, 텍스트가 있습니다.USS 파일에 시각적 요소의 스타일을 지정합니다.
임의의 템플릿을 사용하여 Unity 프로젝트를 생성합니다.
drag-and-drop-across-window라는 이름의 폴더를 만들어 모든 파일을 저장합니다.-
다음 콘텐츠가 포함된
DragAndDrop.uxml이라는 이름의 UI 문서를 생성합니다.<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"> <ui:VisualElement class="background"> <ui:VisualElement class="header"> <ui:Label text="Drag And Drop Sample" display-tooltip-when-elided="true" class="header__label" /> </ui:VisualElement> <ui:VisualElement class="drop-area"> <ui:Label text="Drag an asset here..." display-tooltip-when-elided="true" class="drop-area__label" /> </ui:VisualElement> </ui:VisualElement> </ui:UXML> -
다음 콘텐츠가 포함된
DragAndDrop.uss라는 이름의 스타일시트를 생성합니다..background { flex-grow:1; background-color: rgba(30, 30, 30, 255); } .header { align-items: center; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; background-color: rgba(112, 128, 144, 255); border-left-color: rgba(211, 211, 211, 255); border-right-color: rgba(211, 211, 211, 255); border-top-color: rgba(211, 211, 211, 255); border-bottom-color: rgba(211, 211, 211, 255); border-left-width:2px; border-right-width:2px; border-top-width:2px; border-bottom-width:2px; } .header__label { font-size:18px; color: rgba(255, 255, 255, 255); } .drop-area { flex-grow:1; align-items: center; justify-content: center; margin-left:10px; margin-right:10px; margin-top:10px; margin-bottom:10px; padding-left:5px; padding-right:5px; padding-top:5px; padding-bottom:5px; background-color: rgba(112, 128, 144, 255); border-left-color: rgba(211, 211, 211, 255); border-right-color: rgba(211, 211, 211, 255); border-top-color: rgba(211, 211, 211, 255); border-bottom-color: rgba(211, 211, 211, 255); border-left-width:2px; border-right-width:2px; border-top-width:2px; border-bottom-width:2px; border-top-left-radius:20px; border-bottom-left-radius:20px; border-top-right-radius:20px; border-bottom-right-radius:20px; } .drop-area--dropping { opacity:0.4; background-color: rgba(0, 100, 0, 255); } .drop-area__label { -unity-font-style: italic; color: rgba(255, 255, 255, 255); } DragAndDrop.xml을 더블 클릭하여 UI 빌더에서 엽니다.DragAndDrop.uss를 기존 USS로 추가합니다.
매니퓰레이터를 생성하여 이벤트 콜백 저장
매니퓰레이터는 입력과 관련된 이벤트 콜백을 등록하고 등록 취소하는 오브젝트입니다.C# 스크립트에서 커스텀 매니퓰레이터를 생성하여 에디터 창에 포인터 이벤트와 드래그 이벤트를 등록합니다.
drag-and-drop-across-window폴더에Editor라는 이름의 폴더를 만듭니다.-
Editor폴더에 다음 콘텐츠가 포함된DragAndDropManipulator.cs라는 이름의 C# 파일을 생성합니다.using UnityEngine; using UnityEditor; using UnityEngine.UIElements; namespace Samples.Editor.General { // The DragAndDropManipulator class is a private class within DragAndDropWindow. public partial class DragAndDropWindow { // DragAndDropManipulator is a manipulator that stores pointer-related callbacks, so it inherits from // PointerManipulator. class DragAndDropManipulator :PointerManipulator { // The Label in the window that shows the stored asset, if any. Label dropLabel; // The stored asset object, if any. Object droppedObject = null; // The path of the stored asset, or the empty string if there isn't one. string assetPath = string.Empty; public DragAndDropManipulator(VisualElement root) { // The target of the manipulator, the object to which to register all callbacks, is the drop area. target = root.Q<VisualElement>(className:"drop-area"); dropLabel = root.Q<Label>(className:"drop-area__label"); } protected override void RegisterCallbacksOnTarget() { // Register a callback when the user presses the pointer down. target.RegisterCallback<PointerDownEvent>(OnPointerDown); // Register callbacks for various stages in the drag process. target.RegisterCallback<DragEnterEvent>(OnDragEnter); target.RegisterCallback<DragLeaveEvent>(OnDragLeave); target.RegisterCallback<DragUpdatedEvent>(OnDragUpdate); target.RegisterCallback<DragPerformEvent>(OnDragPerform); } protected override void UnregisterCallbacksFromTarget() { // Unregister all callbacks that you registered in RegisterCallbacksOnTarget(). target.UnregisterCallback<PointerDownEvent>(OnPointerDown); target.UnregisterCallback<DragEnterEvent>(OnDragEnter); target.UnregisterCallback<DragLeaveEvent>(OnDragLeave); target.UnregisterCallback<DragUpdatedEvent>(OnDragUpdate); target.UnregisterCallback<DragPerformEvent>(OnDragPerform); } // This method runs when a user presses a pointer down on the drop area. void OnPointerDown(PointerDownEvent _) { // Only do something if the window currently has a reference to an asset object. if (droppedObject != null) { // Clear existing data in DragAndDrop class. DragAndDrop.PrepareStartDrag(); // Store reference to object and path to object in DragAndDrop static fields. DragAndDrop.objectReferences = new[] { droppedObject }; if (assetPath != string.Empty) { DragAndDrop.paths = new[] { assetPath }; } else { DragAndDrop.paths = new string[] { }; } // Start a drag. DragAndDrop.StartDrag(string.Empty); } } // This method runs if a user brings the pointer over the target while a drag is in progress. void OnDragEnter(DragEnterEvent _) { // Get the name of the object the user is dragging. var draggedName = string.Empty; if (DragAndDrop.paths.Length > 0) { assetPath = DragAndDrop.paths[0]; var splitPath = assetPath.Split('/'); draggedName = splitPath[splitPath.Length - 1]; } else if (DragAndDrop.objectReferences.Length > 0) { draggedName = DragAndDrop.objectReferences[0].name; } // Change the appearance of the drop area if the user drags something over the drop area and holds it // there. dropLabel.text = $"Dropping '{draggedName}'..."; target.AddToClassList("drop-area--dropping"); } // This method runs if a user makes the pointer leave the bounds of the target while a drag is in progress. void OnDragLeave(DragLeaveEvent _) { assetPath = string.Empty; droppedObject = null; dropLabel.text = "Drag an asset here..."; target.RemoveFromClassList("drop-area--dropping"); } // This method runs every frame while a drag is in progress. void OnDragUpdate(DragUpdatedEvent _) { DragAndDrop.visualMode = DragAndDropVisualMode.Generic; } // This method runs when a user drops a dragged object onto the target. void OnDragPerform(DragPerformEvent _) { // Set droppedObject and draggedName fields to refer to dragged object. droppedObject = DragAndDrop.objectReferences[0]; string draggedName; if (assetPath != string.Empty) { var splitPath = assetPath.Split('/'); draggedName = splitPath[splitPath.Length - 1]; } else { draggedName = droppedObject.name; } // Visually update target to indicate that it now stores an asset. dropLabel.text = $"Containing '{draggedName}'...\n\n" * $"(You can also drag from here)"; target.RemoveFromClassList("drop-area--dropping"); } } } }
에디터 창 생성 및 매니퓰레이터 인스턴스화
C# 스크립트에서 두 개의 커스텀 에디터 창을 생성하고 각 에디터 창에 매니퓰레이터를 인스턴스화합니다.
-
다음 콘텐츠가 포함된
DragAndDropWindow.cs라는 이름의 C# 파일을 생성합니다.using UnityEditor; using UnityEngine; using UnityEngine.UIElements; namespace Samples.Editor.General { public partial class DragAndDropWindow :EditorWindow { // This is the visual tree that contains the UI structure of the window. [SerializeField] VisualTreeAsset uxmlAsset; // This manipulator contains all of the event logic for this window. DragAndDropManipulator manipulator; // This is the minimum size of both windows. readonly static Vector2 windowMinSize = new(300, 180); // These are the starting positions of the windows. readonly static Vector2 windowAPosition = new(50, 50); readonly static Vector2 windowBPosition = new(450, 100); // These are the titles of the windows. const string windowATitle = "Drag and Drop A"; const string windowBTitle = "Drag and Drop B"; // This method opens two DragAndDropWindows when a user selects the specified menu item. [MenuItem("Window/UI Toolkit/Drag And Drop (Editor)")] public static void OpenDragAndDropWindows() { // Create the windows. var windowA = CreateInstance<DragAndDropWindow>(); var windowB = CreateInstance<DragAndDropWindow>(); // Define the attributes of the windows and display them. windowA.minSize = windowMinSize; windowB.minSize = windowMinSize; windowA.Show(); windowB.Show(); windowA.titleContent = new(windowATitle); windowB.titleContent = new(windowBTitle); windowA.position = new(windowAPosition, windowMinSize); windowB.position = new(windowBPosition, windowMinSize); } void OnEnable() { if (uxmlAsset != null) { uxmlAsset.CloneTree(rootVisualElement); } // Instantiate manipulator. manipulator = new(rootVisualElement); } void OnDisable() { // The RemoveManipulator() method calls the Manipulator's UnregisterCallbacksFromTarget() method. manipulator.target.RemoveManipulator(manipulator); } } } 프로젝트 창에서
DragAndDropWindow.cs를 선택하고 DragAndDrop.xml`을 인스펙터의 Uxml 에셋으로 드래그합니다.메뉴에서 Window > UI Toolkit > Drag and Drop(Editor)을 선택합니다.두 개의 Drag and Drop 창이 열립니다.에셋을 프로젝트 창에서 이러한 창의 드롭 영역으로 드래그할 수 있습니다.또한 동일한 에셋을 한 창에서 다른 창으로 드래그할 수 있습니다.