유니티 간단하게 조이스틱 이동 해보기.

이런 분들이 보시면 좋습니다.

---

유니티에 대해 감이 잘 안오시는분, 코드를 직접 작성하는것이 아직 어려우신 분

코드에 대한 이해보다는 우선 구현이 목적이신분.

무언가를 만들어 보는것에 의의를 두시는 분...

 

즉, 어떻게 해야 조이스틱 코드를 직접 짜고 구현하는것이 목적이 아닌, 작동에 목적을 두시는 분들에게 추천합니다.

'에셋'을 활용하여 매우 간단하게 조이스틱 이동 구현하기.

 

이동시킬 오브젝트 생성

---

3D나 2D나 둘 다 상관은 없지만, 조금 더 직관적인 이해를 위해서 2D로 해보도록 하겠습니다.

우선 2D 스프라이트 오브젝트를 하나 생성해 줬습니다.

 

조이스틱 에셋 다운로드

---

만든 오브젝트를 움직이기 위해서는 컨트롤러, 이번 경우에는 조이스틱이 필요합니다.

그럼 그 조이스틱은 어떻게 만들까요?

직접 만든다는건 물론 뿌듯하고 재밌는 일이지만,,, 이미 잘 만들어진 것을 활용하는건 더 재밌습니다.

유니티 에셋 스토어에서 'Joystick'을 검색해줍니다.

UJoystick | 입출력 관리 | Unity Asset Store

많은 조이스틱 에셋이 나오는데, 저는 이 조이스틱을 사용해서 설명해 드리도록 하겠습니다.

 

위의 링크로 들어가신 후, 에셋을 구매하시고 'Unity에서 열기'를 눌러주세요.

현재 유니티 프로젝트가 열려져 있는 상태이기때문에 이와 같은 창이 뜹니다.

'Unity Editor 열기' 눌러주세요.

그러면 유니티 프로젝트 내에서 Package Manager 창이 열립니다.

여기에서는 본인이 기존에 구매한 에셋 패키지들을 관리할 수 있습니다.

이곳에서 아까 구매했던 'UJoystick'을 찾아주세요.

그리고 우측 하단의 'Import'를 눌러주세요.

그러면 이렇게 패키지 중 어떤것들을 현재 프로젝트에 Import 할 것인지 물어봅니다.

다 추가해주셔도 크게 상관은 없지만, 저는 Example 폴더를 빼고 Import 하겠습니다.

Project - Assets 에 이렇게 'UJoystick'폴더가 생성되었다면 우선 에셋의 다운로드에 성공했습니다.

그럼 이제 이 에셋을 어떻게 활용하는지 알아보겠습니다.

 

UJoystick 에셋 사용하기 - 조이스틱 생성

---

우선 조이스틱 에셋을 받았느니, 조이스틱을 먼저 생성해보도록 하겠습니다.

조이스틱을 넣을 UI 오브젝트를 만들어줘야하는데요

Hierarchy 창에서 

우클릭 - UI - Canvas 를 만들어주세요.

개인적으로 저는 이름은 UI로 바꾸어주고

Canvas Scaler 값을 조정해줄게요.

이 부분은 본인 취향껏, 혹은 프로젝트 특성에 맞춰서 하시면 됩니다.

그 다음 에셋에서 이제 조이스틱을 찾아서 이 Canvas(UI) 오브젝트에 넣어주면 되는데요

프로젝트에서

Assets - UJoystick - Content - Prefab - Joystick 을 찾아주세요.

그리고 이 프리팹을 Drag & Drop으로 Hierarchy의 Canvas(UI) 오브젝트에 넣어주세요.

그러면 이렇게 Hierarchy 창에 Joystick이 추가가 되고

Game 화면에서는 아래와 같이 보이게 됩니다.

조이스틱의 기본색상이 흰색이어서 배경을 흰색에서 검은색으로 바꾸어줬습니다.

그리고 너무 조이스틱의 크기가 작은듯 하여 제 취향껏 조절을 해 줬습니다.

이는 각 오브젝트의 Rect Transform 을 조절해보시면서 마음에 들게 하시면 됩니다.

색상을 바꾸고 싶으면 Image에서 Color값을 조절해주세요. 저는 귀찮으니 흰색으로 하겠습니다.

조정한 모습입니다.

조금 더 괜찮아 보이죠?

이렇게 하면 조이스틱을 생성하는것 까지 완료했습니다.

이제 이 조이스틱으로 하트모양 오브젝트를 움직이기만 하면 끝납니다.

 

UJoystick 에셋 사용하기 - 오브젝트 움직이기

---

오브젝트를 움직이기 전에 간단한 동작 원리? 에 대해 설명을 드리자면

저희가 가져온  Joystick Prefab에는 에셋 제작자가 만든 Joystick 구현 코드인 'BI_Joystick' 스크립트가있습니다.

그리고 이제 저희는 이 Joystick 오브젝트에서 BI_Joystick 스크립트 속성을 사용해서

원하는 오브젝트를 움직이게 됩니다.

자 그럼 조이스틱과 움직이려는 오브젝트를 연결해보도록 하겠습니다.

우선, script를 하나 만들어 주겠습니다. 이름은 그냥 'move_heart' 라고 해 줄게요.

 

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

public class move_heart : MonoBehaviour
{
    public bl_Joystick js; // 조이스틱 오브젝트를 저장할 변수라고 생각하기.
    public float speed; // 조이스틱에 의해 움직일 오브젝트의 속도.

    void Update()
    {
        // 스틱이 향해있는 방향을 저장해준다.
        Vector3 dir = new Vector3(js.Horizontal, js.Vertical, 0); 

        // Vector의 방향은 유지하지만 크기를 1로 줄인다. 길이가 정규화 되지 않을시 0으로 설정.
        dir.Normalize();
        
        // 오브젝트의 위치를 dir 방향으로 이동시킨다.
        transform.position += dir * speed * Time.deltaTime;
    }
}

스크립트 내용은 위와 같이 해 주세요.

스크립트 내용에 대해서는 후술하면서 설명해 드리도록 하겠습니다.

내용이 완성되셨다면 저장을 하신 후, 이 스크립트 파일을 움직일 오브젝트에 Drag & Drop 해주세요.

이렇게 움직일 오브젝트의 Component 창에 만든 스크립트 파일이 있게 하시면 됩니다.

그 다음에는 위의 사진에는 이미 값이 넣어져 있지만, 여러분들은 Js와 Speed가 공란으로 되어있을겁니다.

이를 채워주셔야 해요.

이렇게 Js 부분에는 Hirarachy 창에서 Joystick 오브젝트를 Drap & Drop 해 주시구요.

Speed 부분은 0으로 되어있으실텐데, 오브젝트가 움직이기 원하는 속도로 지정하시면 됩니다.

이는 나중에 직접 조작하시면서 편한 속도로 하세요. 저는 1로 했습니다.

자 이렇게 하고 이제 실행을 누르시면

이런식으로 조이스틱의 움직임에 따라 오브젝트가 원활하게 움직이는것을 볼 수 있습니다.

그런데 뭔가 움직임이 이상하지 않나요?

스틱의 움직임이 멈춰도 일정시간 오브젝트가 마지막 방향으로 움직이는데요.

이는 조이스틱의 설정을 조정하시면 됩니다.

1. Radio

- 스틱이 움직이는 범위라고 생각하시면 될 것 같습니다.

숫자가 작아질수록 스틱의 가동범위가 줄어들고 커질수록 가동범위가 커집니다.

 

2. Smooth Time

- 핸들 복원력이라고 생각하시면 이해가 빠를 것 같습니다.

스틱을 움직이고 손을 떼었을때 스틱이 중앙으로 돌아오는 속도와 관련되어있습니다.

숫자가 1에 가까울수록 중앙으로 빠르게 돌아오며, 0에 가까울수록 느리게 돌아옵니다.

 

3. On Press Scale

- 스틱을 누르면 스틱이 작아졌다가 떼면 커지는데 이 속도를 조정합니다. 큰 체감은 되지 않습니다...

 

 

스크립트 설명

---

사실, 조이스틱에 의한 오브젝트 움직이기가 목표이신분은

여기까지만 보셔도 무방합니다. 움직이긴 하니까요.

다만 이제 좀 더 오브젝트 움직임에 있어 신경을 써 주고 싶다.... 하시면 간단하게 설명을 보시면 됩니다.

아까 제가 올려드린 스크립의 전문입니다.

크게 5단계로 보시면 될 것 같은데요

1. 오브젝트를 움직일 조이스틱 지정하기.

이 부분입니다. bl_Joystick 타입의 변수를 선언해주고

그 변수에 조이스틱 오브젝트를 넣어주면서 조이스틱을 지정해주었죠.

사실 정확하게 말하자면, 조이스틱 오브젝트 내에 있는 Bl_Joystick 스크립트를 찾아와서 넣어준겁니다.

지금은 Drag & Drop으로 가져왔지만, 스크립트로 가져온다면

이런 식으로 하게 되겠네요.

코드로 지정하던 드래그 드롭이든 상관은 없습니다. 중요한건 조이스틱을 지정한다는 것이니까요.

 

2. 움직일 속도 정해주기.

이건 아까 말씀드려서 크게 할말이없네요.

float 타입의 speed 변수를 생성해 주고, 그 변수의 값을 조정함으로서 오브젝트의 속도를 조정합니다.

방법은 이와같이 변수를 public 으로 선언하여 Component창에서 조정하는 방법과

이렇게 코드로 정해주는 방법이 있겠습니다.

이 또한 방법 무관하게 편한 방식으로 하시면 됩니다.

 

3. 움직이는 방향 지정하기.

이 부분입니다.

3차원 벡터 변수인 dir를 생성하고, 벡터의 값을 정해줍니다.

그런데 그 값은 어디서 올까요? 

js.Horizontal , js.Vertical 이라는 것들이 눈에 띕니다.

js, 즉 저희가 아까 만든 js 변수의 x, y값을 가져온다고 생각하시면 됩니다.

현재 js 변수에는 조이스틱이 들어 있으니 스틱이 중앙으로부터 얼마나 x, y로 움직여 있는지의 값을 가져온다.

이렇게 생각하시면 됩니다.

예를들면 위의 상황에서는 스틱이 좌-하 를 가리키고 있죠.

스틱이 중앙으로부터 얼마나 x, y로부터 떨어져있는지를 가져오는것이 때문에

현재 스틱의 Pos X, Y값이 dir 변수의 x, y 값으로 들어간다고 생각하시면 됩니다.

 

4. 정규화 (필수는 아님)

정규화 하는 과정인데요

3번에서 제가 말씀드렸다싶이, 스틱의 좌표값을 가져오는것이기때문에

스틱이 중앙으로부터 멀리 떨어져 있으면 있을수록 그 벡터의 크기는 커지게 됩니다.

벡터는 크기와 방향을 갖고 있는 개념이기 때문인데요

이 정규화 Normalize를 사용하시면 스틱이 중앙에서부터 얼마나 멀어지던 가깝던간에 오브젝트를 동일한 속도로 움직이게 할 수 있습니다.

반대로 말하면 Normalize를 하지 않는다면 스틱이 중앙에서부터 멀면 멀수록 빠르게 움직이고, 가까울수록 느리게 움직입니다. 두 가지 상황을 보여드릴게요

 

정규화 사용시

같은 방향이어도, 중앙으로부터 얼마나 떨어져있던지 상관이 없습니다.

속도가 동일합니다.

 

정규화 미사용시

스틱으로부터 얼마나 떨어져있는지에 따라 속도의 가변이 있습니다.

 

즉 본인이 프로젝트에 필요한것에 따라 정규화를 활성화/비활성화 하시면 됩니다.

5. 오브젝트 이동

현재 이 스크립트가 움직일 오브젝트의 Component로 들어가 있기 때문에

스크립트내에서 transform.position을 한다는 것은

'이 스크립트가 붙어있는 오브젝트' => transform

'그것의 위치' => .position

즉 이 스크립트가 붙어있는 오브젝트의 위치에 대해 다루겠다 라는 뜻입니다.

그 위치의 dir(스틱의 벡터) * speed(정해준 오브젝트의 이동속도) * Time.deltaTime 만큼 이동시켜줍니다.

이렇게 함으로써 오브젝트의 position 위치를 옮겨지기 때문에

저희는 조이스틱으로 오브젝트를 이동시킬 수 있는 겁니다.

 

---

이렇게해서 에셋을 활용해서 정말 간단하게 조이스틱을 만들어보게 되었습니다.

제 유니티 경력이 굉장히 짧고 공부를 많이 하지 않아 설명에 있어 틀린 부분이 있을 수 있습니다.

그러한 부분이 있다면 얼마든 댓글로 지적을 해 주시면 감사하겠습니다.

물론 잘못된 정보를 올리는것에 대해서는 항상 경각심을 갖고 주의해야함을 알고있기에 최대한 그러한 부분을 피하도록 노력했습니다.

 

추가로 이 글을 읽고 궁금하신점이 있다면 얼마든 댓글로 문의해주시면 됩니다. 감사합니다.