[Unity | 유니티] Mobile Virtual Joystick/Touchpad (모바일 가상 조이스틱/터치패드) 만들기 (1)

 

오늘은 Mobile Virtual Joystick/Touchpad(모바일 가상 조이스틱/터치패드)를 만드는 방법에 대해 알려드리고자 합니다.

먼저 아래 영상을 참고하였음을 밝힙니다.

Unity 5 Virtual Joystick [Tutorial][C#] - Unity 3d(https://www.youtube.com/watch?v=uSnZuBhOA2U)

 

1. 터치패드 게임오브젝트 구성하기

Hierarchy에 캔버스를 추가하고 VirtualJoystick이라 명명합니다.

VirtualJoystick 하위에 Image를 추가하고 BackgroundImage로 명명합니다. Image 컴포넌트의 Source Image를 Knob로 선택합니다(여러분은 여러분이 준비한 이미지를 사용하면 됩니다).

 

하위에 또 하나의 Image를 추가하고 JoystickImage라 명명합니다. Source Image로 Knob를 선택합니다. BackgroundImage와 구별하기 위해 색을 어둡게 설정합니다.

 

 

2. 스크립트(Joystick) 작성하기

 

새로운 스크립트를 생성하고 Joystick이라 명명합니다. 구현할 인터페이스에 IDragHandler, IPointerUpHandler, IPointerDownHandler를 추가합니다. 선언할 전역변수는 3개입니다. BackgroundImage 게임오브젝트를 할당할 bgImg, JoystickImg 게임오브젝트를 할당할 joystickImg, 이동 벡터값을 저장할 inputVector 입니다. 이 스크립트는 BackgroundImage 게임오브젝트에 추가할 것이므로 Start() 함수에서 아래와 같이 bgImg와 joystickImg를 할당합니다.

 

터치패드를 누르고 있을 때 실행할 onDrag(PointerEventData ped) 함수를 구현합니다. bgImg영역에 터치가 발생했을 때 

(RectTransformUtility.ScreenPointToLocalPointInRectangle(bgImg.rectTransform, ped.position, ped.pressEventCamera, out pos)가 true일 때), 터치된 로컬 좌표값을 pos에 할당하고 bgImg 직사각형의 sizeDelta값으로 나누어 pos.x는 0~-1, pos.y는 0~1사이의 값으로 만듭니다. joystickImg를 기준으로 좌우로 움직였을 때 pos.x는 -1~1 사이의 값으로, 상하로 움직였을 때 pos.y는 -1~1의 값으로 변환하기 위해 pos.x*2 +1, pos.y*2-1 처리를 합니다. 이 값을 inputVector에 대입하고 단위벡터로 만듭니다. 마지막으로 joystickImg를 터치한 좌표값으로 이동시킵니다.

 

터치를 하고 있을 때 발생하는 OnPointerDown(PointerEventData ped) 함수에서 OnDrag(ped)가 실행되도록 합니다. 터치를 중지했을 때 발생하는 OnPointerUp(PointerEventData ped)에서는 inputVector와 joystickImg의 위치를 초기화합니다.

 

inputVector값을 PlayerController스크립트에 넘겨 주기 위해 사용할 GetHorizontalValue()와 GetVerticalValue()를 구현합니다.   

완성한 스크립트를 BackgroundImage에 할당합니다.

 

1부는 여기까지입니다. 2부에서는 터치패드 조작에 따른 Player 게임오브젝트의 이동을 구현해 보겠습니다.

이해되지 않는 부분을 댓글로 달아주시면 답변해 드리겠습니다.