[kaplay.js] 버튼 터치 구현하기

🧐 문제/목표 파악 (스크린샷)

 

kaplay의 onTouchStart는 모바일 환경에서 터치를 하면 이벤트를 작동시켜주는 콜백함수인데, 정확한 스프라이트의 area에 터치를 해도 hasPoint에서 true가 나와야하는 것이 false가 뜬다. 

 

🎯 문제/목표 해결 (검색)

1. 공식문서 확인하기

 

hasPoint에 대한 공식문서의 설명이 저게 다임......

일단 해당 메서드를 공유하는 클래스의 다른 메서드를 참조해서 감을 잡아봐야겠다.

가장 만만한 onClick도 저 한 줄이 다지만, 해당 메서드는 다른 설명에 참조되어 있어서 참고해서 사용해보기로 함.

작동확인.

그럼 이제 player대신 터치가 안먹히는 leftButton으로 테스트하자.

버튼이 사라지지 않았다. 로그도 뜨지 않았으므로, 해당 LeftButton에 대한 onClick은 호출되지 않았다.

그 이유는?

-시도

1) player바로 아래에 버튼 선언하기 : 그래도 똑같이 클릭이 안됨

2) 디버그모드로 player와 button 사이 차이 파악하기

k.debug.inspect = true;

해당 코드로 각 컴포넌트의 area는 전체적으로 문제가 없다는 것을 파악할 수 있었으나 player와 button 사이의 더 구체적인 차이는 확인할 수 없었다.

3) 변수통제 및 속성주입

player가 문제가 없다는 것을 알았으니, player와 button의 파라미터 및 값들을 일치시켜나가면서 변화하는 지점을 파악하기로 함

그러던 중, player의 파라미터 마지막에 "player"라고 있는 부분이 눈에 띄어서, button에도 똑같이 입력해서 테스트해봤더니

성공.......! 

하지만 hasPoint메서드는 계속해서 작동하지 않았다.

 

 

4) 공식문서 더 뒤져보기 - touch메서드 탐구

어라라...? 터치를 클릭으로 바꿔준다고? 트라이해본다.

해당 파라미터는 kaplay 파라미터이므로 추가해주고

해당 area의 컴포넌트가 클릭되었는지 boolean으로 내뱉어주는 메서드까지 찾아냈으니 분기를 할 수 있는 가능성이 생긴다.

분기에 성공했다. 따라서 해당 버튼을 누를 때, 분기를 해서 player를 이동시켜주면 된다.

But, 해당 onTouchStart메서드의 로직 상, 클릭에 대한 것으로는 분기가 안된다는 점 때문에 원래대로 hasPoint메서드를 제대로 사용하는 것으로 결론이 났다......

 

5) 가설

-1. hasPoint가 버튼 area의 정확히 한 point에만 해당하는 것만 처리하는 것이 아닐까?

-2. button이 계속 움직이는데, 버튼을 고정시키면 되지 않을까?

-3. hasPoint메서드의 파라미터인 vec2의 자료형을 제대로 파악하지 못한 것일까?

 

위 두 가설 중 3번에 초점을 두고 다시 공식문서를 찾아보았다.

키워드 : vec2 

기존에는 pos를 그대로 때려넣었는데, 이번에는 x와 y를 따로 지정해서 넣어보도록 했다. 더불어 버튼의 위치가 계속 변하는 가능성을 차단하기 위해 버튼의 위치도 고정해서 지정했다.

성공......!