유니티 3D모바일 조이스틱 조작 및 터치패널로 카메라 조작

우선 모바일환경에서 조이스틱 조작을 하기 위해선 당연히 조이스틱 에셋이 필요하다. 나는 아래 에셋을 사용하였다.

에셋스토어 링크 : https://assetstore.unity.com/packages/tools/input-management/joystick-pack-107631

Joystick Pack | 입출력 관리 | Unity Asset Store

우선 이 패키지를 받으면 꼭 수정해줘야하는게 있다.

위와 같이 JoystickPack이 Import된걸 확인 할 수 있다. 그렇다면 Joystick Pack -> Scripts -> Base -> Joystick.cs도 확인 할 수 있다. 다른 조이스틱 스크립트들(FixedJoystick.cs, DynamicJoystick.cs ....)들은 모두 Joystick.cs를 상속받는다.

Joystick.cs를 상속받은 DynamicJoystick

Joystick.cs가 다른 조이스틱 스크립트의 기본이 되는것이다. Joystick.cs를 열어보면 대충 41번째 줄 즈음에 

위와 같이 private으로 input값이 선언되어있다.

 

public으로 바꿔줘야 플레이어가 조이스틱의 input값을 참조해서 움직일 수 있다.

 

이제 조이스틱 프리펩(여기서는 Fixed Joystick을 사용)을 씬의 적당한 위치에 넣어주자.

 

나는 왼쪽아래에 조이스틱을 배치하였다.  조이스틱의 이미지는 본인 마음대로 인스펙터 창에서 바꿀 수 있다.

오른쪽 아래는 추후에 쓸 예정.

 

이제 전에 만들었던 MyPlayer.cs를 살짝만 수정해주자.

위와 같이 변수 2개를 선언해주자. enableMobile은 말 그대로 개발을 위한 변수여서 만약 추후에 출시를 하게된다면 삭제할 예정이다. 

Update구문 안에 위와같이 작성해주자. 크게 어려울 것은 없다. 원래 코드에서는 키보드로 Input값을 받았다.

이제는 enableMobile이 true이면 조이스틱에서 Input값을 받아오는 것이다. 당연히 인스펙터 창에서 MyPlayer.cs에 조이스틱을 붙여줘야한다. 드래그 앤 드롭으로 붙여주자.

 

위와 같이 설정해주면 된다. 여기까지 했으면 플레이어 움직임은 조이스틱으로 조작 가능하다.

 

그 다음 화면을 좌우로 이등분했을때 오른쪽 화면을 터치해서 카메라를 조작하는 터치패널 기능을 구현해보겠다.

우선 아래와 같은 스크립트를 작성해주자.

FixedTouchField.cs

using UnityEngine;
using UnityEngine.EventSystems;

public class FixedTouchField : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
    [HideInInspector]
    public Vector2 TouchDist;
    [HideInInspector]
    public Vector2 PointerOld;
    [HideInInspector]
    protected int PointerId;
    [HideInInspector]
    public bool Pressed;

    // Use this for initialization
    void Start()
    {

    }

    // Update is called once per frame
    void Update()
    {
        if (Pressed)
        {
            if (PointerId >= 0 && PointerId < Input.touches.Length)
            {
                TouchDist = Input.touches[PointerId].position - PointerOld;
                PointerOld = Input.touches[PointerId].position;
            }
            else
            {
                TouchDist = new Vector2(Input.mousePosition.x, Input.mousePosition.y) - PointerOld;
                PointerOld = Input.mousePosition;
            }
        }
        else
        {
            TouchDist = new Vector2();
        }
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        Pressed = true;
        PointerId = eventData.pointerId;
        PointerOld = eventData.position;
		
		print("PointerID: "+PointerId);
		print("PointerOld: "+PointerOld);
    
	}


    public void OnPointerUp(PointerEventData eventData)
    {
        Pressed = false;
    }
    
}

아쉽지만 이번 스크립트는 따로 강의에서 설명도 안해서 나도 걍 그대로 복붙한거다. 주석은 기대하지 말자.

 

그 다음엔 화면의 오른쪽에 터치패널을 만들어주자.

그냥 캔버스에 빈 이미지 만들어주고 인스펙터창에서 위와 같이 설정해주면 된다. 물론 터치패널이 저렇게 뿌옇게 보이면 안되니 알파값을 0으로 만들어서 투명하게 만들어놨다. 그 후 TouchPanel에 우리가만든 FixedTouchField.cs를 붙여준다.

 

이전에 만들었던 MyCamera.cs도 살짝 변경해준다.  플레이어 스크립트 변경해준거랑 매우 유사하게 변경하면된다.

위와같이 2가지 변수 선언해주고

LateUpdate 구문안에 위와 같이 작성해준다. 

그리고 Camera의 인스펙터에 TouhcPanel을 드래그 앤 드롭해주자.

실행결과

실행 결과

+++ 만약 내 포스팅을 따라했으면 터치패널로 카메라를 조작했을 때 너무 확확돌아갈 것이다.

그렇다면 카메라 스크립트의 rotSensitive를 수정해서 개인 취향껏 카메라 감도를 설정 할 수 있다.