[Unity/UI] 조이스틱 구현 및 절전모드 해제 구현

1. 구현 목표

절전 모드 화면을 구현하고, 조이스틱과 같은 방식으로 원형 핸들을 드래그하면 절전모드 화면이 꺼지는 방식을 구현

2. 설계 방식

UI 구조를 다음과 같이 설계하고, IDragHandler, IBeginDragHandler, IEndDragHandler 를 활용함

using UnityEngine;
using UnityEngine.EventSystems;

public class CircleJoystick : MonoBehaviour, IDragHandler, IBeginDragHandler, IEndDragHandler
{
    [SerializeField] private RectTransform _background;
    [SerializeField] private RectTransform _handle;
    [SerializeField] private GameObject _panel;

    private float _radius;
    private Vector2 centerPos;

    void Start()
    {
        centerPos = _background.position;
        _radius = _background.rect.width;
    }

    public void OnBeginDrag(PointerEventData eventData)
    {
        UpdateHandle(eventData);
    }

    public void OnDrag(PointerEventData eventData)
    {
        UpdateHandle(eventData);
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Vector2 dir = eventData.position - centerPos;

        float distance = dir.magnitude;

        if (distance >= _radius)
        {
            dir = dir.normalized * _radius;

            ClosePopup();
        }

        _handle.position = centerPos;
    }

    void UpdateHandle(PointerEventData eventData)
    {
        Vector2 dir = eventData.position - centerPos;

        dir = Vector2.ClampMagnitude(dir, _radius);

        _handle.position = centerPos + dir;
    }

    void ClosePopup()
    {
        _panel.SetActive(false);
    }
}

3. 결과