유니티 조이스틱으로 캐릭터 이동하기

안녕하세요 유니티 비기너입니다.

이번 시간엔 조이스틱을 활용하여 캐릭터를 이동하는 방법에 대해 알아보겠습니다.

 

결과 화면

실습 한 번에 보기

1. Joystick 표현할 이미지 2개를 준비한다.  
(속이 비어있는 원형 1개, 비어있지 않은 원형 1개) 

2. UI Object 생성, 명칭을 Joystick으로 변경, Image 컴포넌트 추가, 비어있는 원형 이미지 삽입 Rect Transform Anchors의 x, y값을 모두 0으로 수정

3. 2번 하위에 UI Object 생성, 명칭을 Joystick으로 변경, Image 컴포넌트 추가, 원형 이미지 삽입
(마우스 또는 터치를 활용하여 움직일 핸들 부분)

4. Joystick Object에 Joystick 스크립트 작성 및 추가 
(작성한 스크립트를 해당 오브젝트에 추가)

5. Player Object 생성 
(조이스틱을 활용하여 이동시키는 대상)

6. Player Object에 Player 스크립트 작성 및 추가
(작성한 스크립트를 오브젝트에 추가)

 

 

1. Joystick을 표현할 2개의 이미지를 준비합니다.

좌측은 조이스틱의 끝 영역을 표현할 이미지

우측은 마우스 드래그 또는 터치 드래그할 핸들이 될 이미지입니다.

 

 

2 ~ 3. UI Object 생성하고 명칭 변경, Image컴포넌트 추가, 이미지 삽입

Joystick Object는 위의 좌측이미지를 Handle Object는 위의 우측이미지를 삽입합니다.

 

4. Joystick 스크립트

public class Joystick : MonoBehaviour, IDragHandler, IPointerUpHandler, IPointerDownHandler
{
    public RectTransform handle;
    public RectTransform outLine;

    private float deadZone = 0;
    private float handleRange = 1;
    private Vector3 input = Vector3.zero;
    private Canvas canvas;

    public float Horizontal { get { return input.x; } }
    public float Vertical { get { return input.y; } }

    void Start() {
        canvas = GameObject.Find("Canvas").GetComponent<Canvas>();
        outLine = gameObject.GetComponent<RectTransform>();
    }

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

    public void OnDrag(PointerEventData eventData) {
        Vector2 radius = outLine.sizeDelta / 2;
        input = (eventData.position - outLine.anchoredPosition) / (radius * canvas.scaleFactor);
        HandleInput(input.magnitude, input.normalized);
        handle.anchoredPosition = input * radius * handleRange;
    }

    private void HandleInput(float magnitude, Vector2 normalised) {
        if (magnitude > deadZone) {
            if (magnitude > 1) {
                input = normalised;
            }
        } else {
            input = Vector2.zero;
        }
    }

    public void OnPointerUp(PointerEventData eventData) {
        input = Vector2.zero;
        handle.anchoredPosition = Vector2.zero;

    }
}

EventHandler인 IDragHandler, IPointerUpHandler, IPointerDownHandler를 이용해 
터치를 감지하고 매개변수인 eventData를 통해 터지지점의 좌표값을 가져올 수 있습니다.

OnDrag가 활성화되는동안 드래그된 지점과 시작지점을 차감 계산하여 방향과 크기를 구하고 
DeadZone이라는 변수를 활용하여 Joystick Handle이 일정범위 이상을 벗어나지 않게 제어합니다.
Player스크립트에서 계산되어진 Input값을 Get하여 Joystick이동을 표현합니다.

OnPointerUp 활성화되면 Handle은 초기지점으로 이동시키고 Input값은 초기값으로  수정합니다.

 

 

5~ 6. Player 스크립트

    public float speed;
    private Joystick joystick;    

    void Awake() {        
        joystick = GameObject.FindObjectOfType<Joystick>();
    }

    void FixedUpdate() {
        if (joystick.Horizontal != 0 || joystick.Vertical != 0) {
            MoveControl();            
        } 
    }
        
    private void MoveControl() {
        Vector3 upMovement = Vector3.up * speed * Time.deltaTime * joystick.Vertical;
        Vector3 rightMovement = Vector3.right * speed * Time.deltaTime * joystick.Horizontal;
        transform.position += upMovement;
        transform.position += rightMovement;
    }

이상으로 Joystick을 활용하여 캐릭터를 이동하는 방법에 대해 알아보았습니다.

감사합니다.