유니티 궁수의 전설 모작 - 7 (조이스틱 UI)

조이스틱 이미지

조이스틱을 만들어보자 조이스틱을 만들면서 앵커와 앵커포지션의 개념을 알아갔다.

 

일단 앵커란 어디를 기준점으로 삼을지 정하는것이다

left 앵커

이렇게 바텀 left를 앵커로 지정하면 canvas 왼쪽 맨밑이 0,0으로 기준이 잡힌다 그리고 모든 UI를 왼쪽 밑 앵커로

지정을 해야만 했는데 그 이유는 기본적으로 손가락으로 화면을 터치하면 그 터치한곳의 좌표도 왼쪽 밑이

0,0으로 기준이 잡힌 좌표이기 때문에 똑같이 맞춰야 한다.

 

그렇다면 누르는곳으로 조이스틱이 터치한곳으로 따라가도록 해보자

조이스틱

이런식으로 이미지 3개를 지정하였다 이미지 3개를 만든 이유는 제일 부모 이미지를 캔버스 크기와 똑같이 맞추고 해당 이미지를 클릭 하였을 때의 좌표값으로 하위 오브젝트인 조이스틱을 옮기기 위해서다 

UI터치 클래스

해당 클래스들은 UI를 터치했을 때, 드래그 할 때, 손을 땔 때 사용하는 클래스이다.

이 클래스들은 해당 이미지를 클릭할 때 쓸 수 있고 이미지 밖을 터치하면 반응하지 않기 때문에 모든 곳의 터치를 담을

수 있는 부모 이미지를 생성해 준 거였다.

터치한곳 따라가기

이런식으로 터치한 포지션에 조이스틱의 포지션을 이동시켜주었다.

그럼 조이스틱이 손을 따라가게 하는것은 끝냈다 이제 조이스틱 안에있는 레버를 움직이게 해야한다

 

일단 코드를 보자 var inputpos에 터치pos - 조이스틱의 앵커pos를 뺏다 이유는 기존 위치인 조이스틱의 위치에서

터치한곳의 거리를 계산하고 그 거리만큼 레버를 이동시켜 줘야하기 때문이다

그러면 그 밑에 inputVector에 inputpos보다 leverRange가 큰지 삼항 연산자를 넣었는데

leverRange는 레버가 조이스틱의 영역밖을 나가지않도록 하기 위해서 터치한곳의 거리가 일정 범위를 나가지

않게 하기 위해서다 그래서 작으면 그냥 inputpos를 반환하고 더 클 시 그 방향으로 leverRange만큼만

레버를 위치시키게 하였다.