[Unity] 유니티 조이스틱 만들기(D-Pad)

안녕하세요

많은 모바일 게임에서는 캐릭터를 컨트롤하기 위해 조이스틱을 사용합니다.

조이스틱 사용 게임 화면 (브롤스타즈)

유니티에서 조이스틱을 구현해보도록 하겠습니다.

일단 바닥과 이동시킬 오브젝트인 큐브를 생성하도록 하겠습니다.

그리고 이동을 명확하게 보기 위해 카메라의 위치를 변경합니다.

image UI를 생성합니다.

Image Object를 왼쪽 구석으로 이동합니다.

그 후 SourceImage를 Knob으로 변경하겠습니다.

그리고 Color도 변경합니다.

Image 오브젝트의 하위 오브젝트 하나 더 생성합니다.

오브젝트 이름이 같아서 헬갈릴 수 있기 때문에 오브젝트 이름을 상위 image오브젝트를 Joystickback, 하위 image오브젝트를 Joystick으로 이름을 변경하겠습니다.

JoyStick Object를 클릭하여 Width와 Height, Source Image를 변경합니다.

Cube의 정면 위치를 표시하기 위해, Cube의 하위에 Cube 오브젝트를 하나 더 추가합니다.

추가한 큐브의 크기와 위치를 변경하여, 정면에 위치시킵니다.

그다음 Canvas에 스크립트를 추가합니다.

 

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class JoyStick : MonoBehaviour, IPointerDownHandler, IDragHandler, IPointerUpHandler
{
    RectTransform m_rectBack;
    RectTransform m_rectJoystick;
 
    Transform m_trCube;
    float m_fRadius;
    float m_fSpeed = 5.0f;
    float m_fSqr = 0f;
 
    Vector3 m_vecMove;
 
    Vector2 m_vecNormal;
 
    bool m_bTouch = false;
 
 
    void Start()
    {
        m_rectBack = transform.Find("Joystickback").GetComponent<RectTransform>();
        m_rectJoystick = transform.Find("Joystickback/Joystick").GetComponent<RectTransform>();
 
        m_trCube = GameObject.Find("Cube").transform;
 
        // JoystickBackground의 반지름입니다.
        m_fRadius = m_rectBack.rect.width * 0.5f;
    }
 
    void Update()
    {
        if (m_bTouch)
        {
            m_trCube.position += m_vecMove;
        }
            
    }
 
    void OnTouch(Vector2 vecTouch)
    {
        Vector2 vec = new Vector2(vecTouch.x - m_rectBack.position.x, vecTouch.y - m_rectBack.position.y);
 
        
        // vec값을 m_fRadius 이상이 되지 않도록 합니다.
        vec = Vector2.ClampMagnitude(vec, m_fRadius);
        m_rectJoystick.localPosition = vec;
 
        // 조이스틱 배경과 조이스틱과의 거리 비율로 이동합니다.
        float fSqr = (m_rectBack.position - m_rectJoystick.position).sqrMagnitude / (m_fRadius * m_fRadius);
 
        // 터치위치 정규화
        Vector2 vecNormal = vec.normalized;
 
        m_vecMove = new Vector3(vecNormal.x * m_fSpeed * Time.deltaTime * fSqr, 0f, vecNormal.y * m_fSpeed * Time.deltaTime * fSqr);
        m_trCube.eulerAngles = new Vector3(0f, Mathf.Atan2(vecNormal.x, vecNormal.y) * Mathf.Rad2Deg, 0f);
    }
 
    public void OnDrag(PointerEventData eventData)
    {
        OnTouch(eventData.position);
        m_bTouch = true;
    }
 
    public void OnPointerDown(PointerEventData eventData)
    {
        OnTouch(eventData.position);
        m_bTouch = true;
    }
 
    public void OnPointerUp(PointerEventData eventData)
    {
        // 원래 위치로 되돌립니다.
        m_rectJoystick.localPosition = Vector2.zero;
        m_bTouch = false;
    }
}