Unity 드래그 앤 드롭 UI 가이드

이 문서는 Unity에서 커스텀 에디터 창 내에 드래그 앤 드롭 UI를 만드는 방법에 대한 가이드를 제공합니다. UI 툴킷을 사용하여 이러한 UI 컴포넌트를 구현할 수 있습니다.

개요

드래그 앤 드롭은 UI 디자인에서 일반적으로 사용되는 기능으로, 이 기능을 커스텀 에디터 창이나 Unity 애플리케이션에서 사용할 수 있습니다. 본 예시에서는 여러 슬롯과 하나의 오브젝트를 커스텀 에디터 창에 추가하고, 오브젝트를 슬롯으로 드래그할 수 있는 기능을 구현할 것입니다.

준비 사항

이 가이드는 Unity 에디터, UI 툴킷 및 C# 스크립팅에 익숙한 개발자를 위해 작성되었습니다. 시작하기 전에 다음 내용을 숙지하십시오:

• UI 빌더
• 시각적 트리
• UXML
• USS
• 포인터 이벤트

커스텀 에디터 창 생성

1. Unity에서 프로젝트를 생성합니다.
2. Assets 폴더 내에 DragAndDrop이라는 폴더를 만들고 모든 파일을 저장합니다.
3. DragAndDrop 폴더에서 마우스 오른쪽 버튼을 클릭하고 Create > UI Toolkit > Editor Window를 선택합니다.
4. UI Toolkit Editor Window Creator에서 DragAndDropWindow를 입력하고 Confirm을 클릭합니다.

이렇게 하면 커스텀 창에 대한 C# 스크립트, UXML, USS 파일이 자동 생성됩니다.

C# 스크립트 작성

DragAndDropWindow.cs 파일을 열고 아래와 같이 수정합니다:

using UnityEditor;
using UnityEngine;
using UnityEngine.UIElements;

public class DragAndDropWindow : EditorWindow
{
    [MenuItem("Window/UI Toolkit/Drag And Drop")]
    public static void ShowExample()
    {
        DragAndDropWindow wnd = GetWindow<DragAndDropWindow>();
        wnd.titleContent = new GUIContent("Drag And Drop");
    }

    public void CreateGUI()
    {
        VisualElement root = rootVisualElement;

        var visualTree = AssetDatabase.LoadAssetAtPath<VisualTreeAsset>("Assets/Drag and Drop/DragAndDropWindow.uxml");
        VisualElement labelFromUXML = visualTree.Instantiate();
        root.Add(labelFromUXML);

        var styleSheet = AssetDatabase.LoadAssetAtPath<StyleSheet>("Assets/Drag and Drop/DragAndDropWindow.uss");
    }
}

슬롯 및 오브젝트 생성

1. DragAndDropWindow.uxml 파일을 더블 클릭하여 UI 빌더를 엽니다.
2. Add Existing USS를 클릭하고 DragAndDropWindow.uss를 선택합니다.
3. 아래와 같은 VisualElement UI 컨트롤을 추가합니다:

스타일링

• slot1과 slot2는 흰색 배경을 가지고 80픽셀 x 80픽셀의 정사각형입니다.
• object는 검은색 배경을 가진 50픽셀 x 50픽셀의 둥근 점입니다.

<ui:UXML xmlns:ui="UnityEngine.UIElements">
    <Style src="project://database/Assets/DragAndDrop/DragAndDropWindow.uss" />
    <ui:VisualElement name="slots">
        <ui:VisualElement name="slot_row1">
            <ui:VisualElement name="slot1" />
            <ui:VisualElement name="slot2" />
        </ui:VisualElement>
        <ui:VisualElement name="slot_row2">
            <ui:VisualElement name="slot1" />
            <ui:VisualElement name="slot2" />
        </ui:VisualElement>
    </ui:VisualElement>
    <ui:VisualElement name="object" />
</ui:UXML>

스타일 시트 예시

.slot {
    width: 80px;
    height: 80px;
    margin: 5px;
    background-color: rgb(255, 255, 255);
    border-top-radius: 10px;
}

.object {
    width: 50px;
    height: 50px;
    position: absolute;
    left: 10px;
    top: 10px;
    border-radius: 30px;
    background-color: rgb(0, 0, 0);
}

드래그 앤 드롭 로직 정의

드래그 앤 드롭 기능을 구현하기 위해 DragAndDropManipulator.cs 파일을 다음과 같이 만들고 작성합니다:

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

public class DragAndDropManipulator : PointerManipulator
{
    // Constructor, Callback Registration, Event Handlers
    // Logic for handling pointer events during drag operations.

    private Vector2 targetStartPosition { get; set; }
    private Vector3 pointerStartPosition { get; set; }
    private bool enabled { get; set; }
    private VisualElement root { get; }

    // Event handling methods omitted for brevity.
}

드래그 앤 드롭 활성화

커스텀 창이 열릴 때 드래그 앤 드롭을 활성화하려면 CreateGUI() 메서드에 다음을 추가합니다:

DragAndDropManipulator manipulator = new(rootVisualElement.Q<VisualElement>("object"));

이제 메뉴 바에서 Window > UI Toolkit > Drag And Drop을 선택하여 커스텀 에디터 창을 열면 오브젝트를 슬롯에 드래그할 수 있습니다.

추가 리소스

• 드래그 앤 드롭 이벤트
• 커스텀 에디터 창에서 전환 만들기

이 문서에서 다룬 내용을 통해 Unity에서 드래그 앤 드롭 UI를 적절히 구현할 수 있습니다. 추가적인 질문이 있다면 Unity 공식 문서를 참조하거나 커뮤니티에 질문해 보세요.