RemoteCraft 13 - Touchpad UI 작성중...

Touchpad 

모바일 환경을 지원하기 위해 해야 했던 첫번째 과제.. 끝이 보이는 김에 내용을 공유하고싶다! 참고자료 없이는 힘들 것 같았는데.. 구글링 중 https://jsfiddle.net/aa0et7tr/5/ 를 발견했고, PubSub 이벤트핸들러와 멀티터치에 대한 로직만 추가하면 내 프로젝트에서도 바로 쓸 수 있는 매우 훌륭한 소스였다.

(익명의 개발자님 감사합니다!!)

 

아직 배포는 안되어있다.. 전체적인 UI가 모바일화면에 제대로 배치가 되지 않고,, 가로와 세로모드를 전환할때마다 전체적인 UI가 망가져 pixel 단위로 위치되어있는 버튼 및 컴포넌트들이 제대로 작동을 하지 않고 있다.

모바일 브라우저 환경에 대한 UI사이즈 및 배치를 적용을 쉽게 할 수 있는 방법은 찾아보는 중... ㅠㅠ

 

일단 자랑 좀...

터치패드 추가!

 

 

다행히 DOM events 중 touchstart, touchend, touchmove, mousedown, mouseup, mousemove와 같은 사용자 행동을 감지하는 이벤트 핸들러가 있었고, 이벤트핸들러들을 조합하고, 아주 조금(?)의 수학을 곁들여서 일단 작동하는 터치패드 만들기에 성공했다.

 

(사실 지금 IPhone11에서 테스트중인데... 생각보다 키보드로 컨트롤 할때보다 딜레이가 생겼음을 느끼고 있다.. 최적화는 언제..)

 

하나씩 알아보자.

touchpad 멤버변수

• maxDiff: 조이스틱이 중심으로부터 움직일 수 있는 가동 범위 (단위: pixel)
• stickDragPos: 조이스틱을 움직일때 조이스틱 중심의  (x, y)좌표
• touchPadstate: 터치패드의 맴버변수들이다. Libretro Input API가 지원하는 버튼을 key, 그리고 해당 버튼의 상태(눌림, 안눌림)를 value를 가지는 객체
• stickTouchIdentifier: 멀티터치를 지원하기때문에 조이스틱의 touch 이벤트에 대한 식별자
• dpad: joy-stick를 감싸고 있는 element. joy-stick에 물려있는 touchEvent의 식별자 
• stick: joy-stick element
• buttons: a, b, x, y 게임컨트롤러에 존재하는 4개의 컨트롤 버튼 element

 

조이스틱의 상태를 초기화 하는 함수다. 이 함수가 하는 일은:

• 컨트롤러의 방향인풋에 대한 상태를 false로 초기화
• stickDragPos 초기화
• 터치이벤트의 식별자 초기화

 

stick에 대한 터치/마우스를 눌렀을때 실행되는 핸들러이다.

• 마우스 이미지 움직임을 표현하는 transition시간을  0s 세팅
• event.changedTouches 이벤트일때 스틱을 터치하고 있는 이벤트핸들러의 식별자를 저장
• 마우스 이벤트와 공유하고 있는 clientX, clientY (터치, 클릭의  x,y)좌표를 저장
• x,y 좌표를 stickDragPos에 저장

 

stick을 놓았을때 실행되는 핸들러다.

• 버튼에 대한 이미지를 0.2초에 걸쳐 제자리로 옮긴다.
• 조이스틱 상태 초기화.

 

KEY_PRESSED, KEY_RELEASED 이벤트를 publish하는 핸들러다. onStickDrag, onButtonPress, onButtonRelease - '사용자 액션 이벤트(touchstart, touchend, touchmove 등)에 대한 핸들러' 에서 부르는 함수다. 버튼의 상태가 바뀌었을때 그 바뀐 값을 이벤트로 보내, 해당 이벤트에 subscribe된 핸들러가 서버로 input 데이터를 넘긴다.

 

 

 

 

 

 

to be continued...