클릭(터치)한 지점의 좌표 구하기

클릭(터치) 입력을 받으려면 그 입력을 감지할 노드(유니티로 치면 Collider)와 클릭 이벤트 리스너가 있어야 한다.

 

화면 어느 곳을 눌러도 클릭 이벤트가 발생되려면 노드 사이즈는 언제나 화면(Screen) 사이즈와 동일해야 한다.

 

이는 Widget 컴포넌트를 붙이거나 스크립트에서 처리를 해줘야 한다.

 

 

onLoad(){
    this.touchScreen = this.node.getChildByName("TouchScreen");         // 터치 입력을 받을 스크린 사이즈의 노드
    this.centerPin = this.node.getChildByName("CenterPin");             // 터치 포인트와 비교할 또 다른 포인트
    this.touchScreen.on("touchend", function(event) { this.TouchScreen(event); }, this);    // 터치 이벤트 등록
}

TouchScreen(event: any){
    let pos_1 = centerPin.convertToWorldSpaceAR(centerPin.position);    // 가운데 중심점의 월드 좌표
    let pos_2 = event.touch.getLocation();                              // 터치 스크린 내에서 터치한 포인트의 월드 좌표
    let radian = Math.atan2(pos_2.y - pos_1.y, pos_2.x - pos_1.x);      // 두 점 사이의 각도 (radian 단위)
    let degree = radian * 180 / Math.PI + 90;                           // 두 점 사이의 각도 (degree 단위)
    centerPin.angle = centerPin.angle - degree;                         // 터치 지점 방향으로 가운데 중심점 노드 회전
}

 

클릭 입력을 감지할 노드를 만들었다면 이벤트 리스너를 만들어준다.

 

두 점 사이의 각도를 구한다는 것은 두 벡터(노드의 포지션) 사이의 각도를 구한다는 의미와 같다.

 

A 벡터는 터치 스크린 영역 내에서 클릭(터치)한 지점의 포지션,

 

B 벡터는 A 포지션과 비교 대상이 될 노드의 포지션을 의미한다. 위 예시에서 centerPin은 화면 중심점을 의미한다.

 

 

두 벡터를 가지고 계산하려면, 두 벡터는 같은 스페이스(노드 스페이스 또는 월드 스페이스)에 있어야 한다.

 

touch.getLocation() 함수는 터치 이벤트가 발생했을 때, 발생한 포인트의 월드 스페이스 좌표를 리턴한다.

 

그리고 특정 노드의 멤버 변수 position이나 함수 getPosition()은 노드 스페이스에서의 좌표를 의미한다. 

 

두 포지션 중 하나를 convertToNodeSpaceAR(월드->노드) 또는 convertToWorldSpaceAR(노드->월드) 함수를 통해 변환해야 한다.

 

 

두 포지션의 각도는 삼각함수를 이용해 radian 값으로 계산할 수 있다.

 

호의 길이가 반지름과 같게 되는 만큼의 각을 1 radian 이라고 정의한다.

 

코코스에서 노드의 회전 값은 radian이 아닌, 0 ~ 360도의 degree로 표현하기 때문에 radian To degree 변환 과정이 필요하다.

 

radian * 180 / Math.PI 로 계산하면 된다.

 

 

그리고 계산된 degree 각도에 +90 만큼 offset을 주는 이유는 atan2의 특성 때문이다.

 

atan2는 12시 방향이 90도, 3시 방향이 0도의 값을 가지는데

 

엔진 내의 캔버스와 노드들은 12시 방향이 0도, 3시 방향이 -90도로 설계되어있다.

 

엔진에 맞춰주기 위해 offset 조정이 필요하며 -90이 아닌 +90을 더해준다.

 

그림을 보면, 그래프를 반시계 방향으로 90도만큼 회전시키면 12시 방향이 0도가 되는데

 

엔진에서 반시계방향 회전은 양수의 degree 값을 더해주는 것이기 때문에 +90을 더해준다.

 

 

이렇게 계산된 degree 값으로 클릭한 지점을 바라보도록 특정 노드를 회전시킬 수 있다.