유니티 실무 (1) - Drag And Drop

 

 어렸을 적 플래시게임을 해보셨거나 하스스톤, 전략적팀전투 등의 전략게임을 해보신 분들이라면 드래그 앤 드롭이 가져다주는 조작의 편리성이 어마무시하다는 것을 알 것입니다. 단순히 오브젝트를 클릭하고 옮겨서 자신이 하고 싶은 행동을 직관적으로 보여줄 수 있게 하는 기능이지요.  하지만 게임 개발이나 GUI등을 공부해보신 분들이라면 드래그 앤 드롭에서 신경써야 할 부분이 많다는 것도 아실 것입니다.

 

 

드래그 앤 드롭으로 직관적인 게임 플레이가 가능한 게임, 하스스톤.

 

 

 

 유니티 관련 자료를 찾아보다 Drag And Drop의 자료가 적다는 것을 확인하여 작성 해보려 합니다. 제가 하고싶어 하는 프로젝트에서도 많이 사용할 내용으로 예상이 되구요. 저도 공부하면서 작성하는 내용이기에 많이 부족한 내용일 수 있습니다. 필요해 보이는 내용 있으면 지적해주시면 감사하겠습니다.

 

 

 

 새로운 3D 프로젝트를 생성합니다. 제목은 DragAndDrop으로 제작하였으나 마음대로 작성하셔도 상관 없습니다.

 

 

 

드래그 할 이미지의 배경이 되기 위한 Canvas를 생성합니다. Hierachy창에서 우클릭 -> UI -> Canvas를 클릭합니다.

 

 

 

캔버스가 생성되면 캔버스 안에 Image를 생성합니다. Hierachy창 안에 Canvas를 우클릭 -> UI -> Image를 클릭합니다.

 

 

 

 이제 Image를 클릭하여 이동할 수 있도록 Image에 할당 할 스크립트를 생성할 것 입니다. Asset창에서 우클릭 -> Create -> C# Script를 클릭합니다.

 

 

이름은 DragController라 작성하였다.

 

 

 DragController.cs를 다음과 같이 수정한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class DragController : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler, IDropHandler
{
    public void OnBeginDrag(PointerEventData eventData) {
        Debug.Log("OnBeginDrag");
    }

    public void OnDrag(PointerEventData eventData) {
        Debug.Log("OnDrag");
        transform.position = eventData.position;
    }
    
    public void OnDrop(PointerEventData eventData) {
        Debug.Log("OnDrop");
    }
    
    public void OnEndDrag(PointerEventData eventData) {
        Debug.Log("OnEndDrag");
    }
}

 

4행 : UnityEngine 네임스페이스에서 EventSystems를 가져온다. 이는 DragEvent를 다루기 위함이다.

6행 : IBeginHander - 드래그가 시작 될 때 수행되는 OnBeginDrag() 콜백을 수신하려는 경우 구현할 인터페이스입니다.

IDragHandler - 드래그 중에 수행되는 OnDrag() 콜백을 수신하려는 경우 구현할 인터페이스 입니다.

IEndDragHandler - 드래그가 끝날 때 수행되는 OnDrop() 콜백을 수신하려는 경우 구현할 인터페이스 입니다.

IDropHandler - 드래그가 해당 오브젝트 위에서 끝날 때 수행되는 OnEndDrag() 콜백을 수신하려는 경우 구현할 인터페이스 입니다.

8행~22행 : 6행에서 구현한 인터페이스의 기능을 구현한다.

14행 : 드래그 하여 이미지의 position을 변경합니다.

 

 

 

 

 

작성이 완료되었다면 저장 후 DragController.cs를  Image의 inspector창에 드래그 하여 Component를 추가 합니다. 이후 게임을 실행하면 드래그가 잘 작동이 되는것을 확인할 수 있습니다.