Unity UI, 더블클릭, 드래그 앤 드랍

 게임 중 장비를 장착하거나, 그 순서를 바꿀 때, [드래그 앤 드랍], [더블 클릭] 기능으로 유저들에게 편의를 제공 해 줄 수 있다.

사실 이 기능들이 구현이 어려운 건 아니나, 조금 작업이 귀찮긴 하다. 그래도 많이 쓰이는 만큼 알아두면 좋을 것이다.

 

1.  더블 클릭(double click)

 

 

 나는 장비나 아이템을 장작할 때, ui에 [장착/해제]버튼을 구현 해 두었다. 그렇지만, 위와 같이, 더블 클릭 해 [장착/해제]를 할 수 있다면, 유저들이 더 편하게 게임을 이용할 수 있을 거라고 생각했다.

 

public class EquipSlot : MonoBehaviour, IPointerClickHandler
{
    .....


    float currentTimeClick;
    public void OnPointerClick(PointerEventData eventData)
    {
        //더블 클릭 시,        
        //일부폰에서는 clickCount가 잘 안될 때가 있으므로, 
        if (Mathf.Abs(currentTimeClick - lastTimeClick) < 0.75f)
        {
            if(UserData != null)
            {
                if (UserData.m_equip_state)
                    //장착
                else
                    //해제
            }
        }
    }
    
    
}

 

 [더블클릭] 기능 구현은 매우 간단하다. 위와같이, IPointerClickHandler인터페이스 등록하고, OnPointerClick함수를 구현하면 된다.

(따로 오브젝트에 이벤트 트리거를 등록할 필요 없다.)

 

 

2. 드래그 앤 드랍(drag and drop)

 

 

 스킬을 같은 경우, 장착한 위치를 쉽게 위치를 변경할 수 있도록 [드래그 앤 드랍]으로 구현 해 주었다. [드래그 앤 드랍]은 스킬 장착 이외에도,스킬을 드래그 해서 사용한다던지 타워를 드래그해서 옮긴다던지 등의 기능을 구현할 때 많이 사용되곤 한다.

 

 [드래그 앤 드랍]을 구현하기 위해선, 스크립트를 먼저 작성 해 주자.

 

public class EquipedSlot : MonoBehaviour
{
	....

    public void OnDragBegin(BaseEventData data)
    {
        //드래그 시작 시, 이미지 오브젝트를 하나 생성한다.
        if(UserSkill != null)
        {
            m_drag_image = jdResourceManager.Instance.GetGameObjectFromPrefab("Prefab/UI/Common/SkillDragImage")
                                                   .GetComponent<SkillDragImage>();
            m_drag_image.Init(this);
            m_drag_image.transform.SetParent(this.transform.parent);
            m_drag_image.transform.localPosition = this.transform.localPosition;
        }		
    }

    public void OnDrag(BaseEventData data)
    {
        //생성한 이미지를, 드래그 위치에 맞춰 이동 시킨다.
        if(m_drag_image != null)
        {
            PointerEventData pointer_data = (PointerEventData)data;
            m_drag_image.transform.position = pointer_data.position;
        }

    }

    public void OnDragEnd(BaseEventData data)
    {
        //드랍 했을 때, 생성한 이미지를 없앤다.
        if(m_drag_image != null)
        {
            m_drag_image.Drop();
            UnityEngine.Object.Destroy(m_drag_image.gameObject);
            m_drag_image = null;
        }        
    }
}

 

 슬롯에 드래그를 시작하면, 유저에게 보여줄 이미지 오브젝트 하나를 생성한다. 그리고 드래그하는 손 위치에 맞춰, 이미지 오브젝트를 이동시키고, 마지막으로 드래그가 끝날 때, 원하는 기능을 구현 해 주면 된다. 

 

 위 스크립트를 먼저 작성 한 후, GameObject에 Event Trigger 컴포넌트를 등록 해 주어야 한다. 아래와 같이 컴포넌트를 추가하고, [Begin Drag], [End Drag], [Drag] 세 개의 이벤트를 등록 해 주자.