[UNITY] 모바일 가상 조이스틱 구현하기(1)

모바일 가상 조이스틱 구현하기(1)

---

 

가상 조이스틱을 구현하기 위해서

젤 처음으로 UI를 디자인 해주었다

 

 

Joystick(하얀 동그라미) 이미지에 자식으로 Lever(파란색 동그라미) 로 구현하였다.

 

 

조이스틱을 구현하기 위해서 나중에 Joystick의 RectTranform 과 Lever의 RectTransform의 위치를 계산하기 위해서

Joystick 게임 오브젝트의 Anchor Presets을  Letf bottom으로 설정해 주어야한다

 

드래그 기능 만들기

 

VirtualJoyStick 이라는 이름의 스크립트를 하나 만들어 준다

스크립트를 생성하고 파일을 열어보면

public class VirtualJoystick : MonoBehaviour
{
	//기본적으로 MonoBehaviour 로 되어있다
}

 

드래그 기능을 사용하기 위해서  

using UnityEngine.EventSystems; 선언 해준다.

EventSystems 은 키보드, 마우스, 터치 이벤트를 오브젝트에 보낼 수 있는 기능을 지원 해준다

 

IBeginDragHandler(드래그 시작), IDragHandler(드래그 하고 있는 경우), IEndDragHandler(드래그가 끝났을 때)

 

I 로 시작하는 핸들러들은 인터페이스 클래스이기 때문에 함수를 지정 해주어야한다

핸들러 위에 커서를 두고 [F12] 키를 누르면 해당 핸들러의 정의로 넘어간다

IBeginDragHandler를 사용하려면 void OnBeginDrag라는 함수를 사용해야 한다.

 

 

[CTRL +.] 단축키를 사용해서 인터페이스 구현을 클릭하면 해당 관련 함수를 자동으로 생성 해준다

 

이제 Joystick과 Lever의 위치 값을 담아 주기 위해서 RectTransform 으로 변수를 두개 선언해준다

    [SerializeField]
    private RectTransform leverTransform;
    private RectTransform rectTransform;

그리고 Awake()에 rectTransform 변수에 대한 정의를 해주어야

rectTransform(Joystick)에 대한 정보를 받아 올 수 있다.

  private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
    }

이제 이벤트 핸들러에 대한 처리를 해주어야 한다

 public void OnBeginDrag(PointerEventData eventData)
    {
        var inputPos = eventData.position - rectTransform.anchoredPosition;
        leverTransform.anchoredPosition = inputPos; 
          Debug.Log("OnBeing : eventData.position : " + eventData.position
            + "\n rectTransform.anchoredPosition : " + rectTransform.anchoredPosition);
    }
    
    public void OnDrag(PointerEventData eventData)
    {
        var inputPos = eventData.position - rectTransform.anchoredPosition;
        leverTransform.anchoredPosition = inputPos;
        Debug.Log("OnBeing : eventData.position : " + eventData.position
  + "\n rectTransform.anchoredPosition : " + rectTransform.anchoredPosition
  + "\ninputPos : " + inputPos);
    }

 

inputPos라는 값에 Joystick 오브젝트 중점에서 움직인 위치까지

얼마나 멀어져 있는지 값을 받아 담아주기 위해서 위에서 선언을 해준다

eventData.position은 드래그가 시작된 곳의 위치 값이라고 생각하면 된다

Joystick오브젝트를 Anchor Presets을  Letf bottom으로 설정 해주었기 때문에

rectTransform.anchoredPosition으로 오브젝트의 위치를 받아온다.

 

[참고] RectTransform에 대해 정리가 잘되어 있어서 참고하려고 들고왔다

RectTransform 이해하기: rect, scale, anchoredPosition vs localPosition

 

두개의 위치의 차 값(InputPos)을 Lever 오브젝트의 위치 값으로 넣어주면 Lever가 이동하는 걸 볼 수 있다

 

    public void OnEndDrag(PointerEventData eventData)
    {
        leverTransform.anchoredPosition = Vector2.zero;
    }

드래그가 끝나면 Lever가 원래 위치로 돌아오게 하기 위해서

Vector2.zero를 사용해서 Lever의 위치를 (0,0)으로 변경해주는 스크립트를 작성 해주었다

leverTransform.anchoredPosition는

Lever의 앵커로 부터 피봇의 까지의 거리를 의미하기 때문에

Lever가 원래 위치로 돌아온다

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

public class VirtualJoystick : MonoBehaviour, IBeginDragHandler, IEndDragHandler, IDragHandler
{
    [SerializeField]
    private RectTransform leverTransform;
    private RectTransform rectTransform;

    [SerializeField] private float leverRange = 120f;

    private void Awake()
    {
        rectTransform = GetComponent<RectTransform>();
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        var inputPos = eventData.position - rectTransform.anchoredPosition;
        leverTransform.anchoredPosition = inputPos;
        Debug.Log("OnBeing : eventData.position : " + eventData.position
          + "\n rectTransform.anchoredPosition : " + rectTransform.anchoredPosition);

    }
    public void OnDrag(PointerEventData eventData)
    {
        var inputPos = eventData.position - rectTransform.anchoredPosition;
        leverTransform.anchoredPosition = inputPos;
        Debug.Log("OnBeing : eventData.position : " + eventData.position
          + "\n rectTransform.anchoredPosition : " + rectTransform.anchoredPosition);

    }

---

[UNITY] 모바일 가상 조이스틱 구현하기(2)