aws webrtc를 활용한 외주-조이스틱편

해당 외주의 자세한 사안

리드미 보러가기에 정리되어 있습니다

조이스틱 생성하기

우선 요구사항 및 사용자 편의를 생각하며 큰 틀을 짜보면, 조이스틱 구현을 위해 필요한 함수는 대충 세개 정도로 요약 가능하다.
조이스틱을 생성하는 함수, 조이스틱 삭제 함수, 전송 정도로 나누어볼 수 있다.

구현 방향

조이스틱 생성의 경우 간단하게 초반에는 상하좌우 조이스틱 생성용함수/줌인 줌아웃 용 생성함수를 만든 뒤 버튼들 근처에서는 조이스틱이 생성되지 않도록 막는 함수를 또한개 추가하였다.

생성 함수 만들기

설명했다시피 초반에는 두개 스틱을 따로따로 만드는 함수를 짰으나, 겹치는 부분이 많아 나중에는 type을 인자로 받아 줌인이냐 줌아웃이냐에 따라서 생성 범위 등을 제한하는 식으로 코드를 리팩토링 하였다.

에러 발생

아이패드의 경우 하단바 모션에 의해 하단바가 뜨면 조이스틱이 멈추는 버그가 발생하였다.
아마 원인은 아이패드에서 하단바 모션을 동작시키는 과정에서 웹 이벤트를 os측에서 빼앗가서 이벤트 핸들러가 본인이 무엇을 처리해아할지 모르게 되는 것으로 추정된다.
따라서 이 부분을 해결하기 위해 버튼 근처인 nearBtnByJoystick함수에 추가적인 조건으로 하단바가 위치할 영역의 좌표값을 대충 따낸 후 여기로부터 몇 px이내에는 조이스틱의 생성 자체를 불가능하도록 해두었다.

다른 개선 방법

우리 프로젝트의 경우 mvp모델 만 3일(이틀)내로 완성해야했고, 내가 프론트엔드 개발자가 아니다보니 js에 대한 이해도가 부족하여 시간 내로 구현할 수 없어 포기한 방법이지만 정석적인 방법으로는 touchcancel를 통한 처리가 있다.
아까 상황과 같이 os가 이벤트를 빼앗아가는 경우 js에서 다시 통신값을 보완할 수 있도록 코드를 짤 수 있게 해주는 이벤트 핸들러인데, 수도 코드로 구현해보자면 상하좌우 값을 0으로 되돌린 뒤에 조이스틱 삭제 함수를 써주면 되지 않을까 싶긴 하다.

삭제 함수 만들기

같은 종류의 조이스틱이 두개 이상 생성된다면 웹소켓에 메시지를 보내는 함수는 어떤 값을 보내야할지 헷가려한다거나 하는 등의 문제가 발생가능하다.
따라서 조이스틱 삭제 함수의 경우 active상태+타입을 받아 해당 타입의 조이스틱이 이미 active중이면 조이스틱을 삭제하는 것과 함께 일정 정도 이상 시간 터치가 없으면 사용자가 조이스틱을 사용할 용이가 없는 것으로 판단하고 삭제를 작동시키도록 추가하였다.

조이스틱 시작 함수-핸들링 시작

우선 dfs/bfs문제를 풀 때의 아이디어에 착안하여 네개의 방위를 left/right/top/bottom으로 방향을 나누어준 뒤 그 사이의 값들은 calc를 사용하여 보다 가까운 선택지를 고르도록 하였다.

문제 발생1

초반에 만든 조이스틱의 경우 인식속도가 비정상적으로 빨라 유저의 순간적인 조종실수까지 전송해보리는 문제가 있었다.
해당 부분의 경우 빠른 처리를 위해 아주 미세한 움직임은 아예 무시하도록 코드를 짰다.
이는 기존의 스로틀링 방식에서 착안해낸 아이디어로, 초반에는 실제로 스로틀링과 setInterval을 활용한 코드를 사용하였으나 이 경우 유저의 진짜 실수와 빠른 움직임을 구분하기 어렵다고 판단하여 어쩔 수 없이 미세한 움직임은 아예 무시하도록 코드를 수정하였다

클라이언트 컨펌 후 수정

나의 경우 양손으로 게임을 하는 것이 익숙하다보니, 생각하지 못하였는데 다양한 연령층이 사용하게 될 프로젝트인 만큼 조이스틱간의 거리에 대한 문제가 들어왔다.
그래서 패딩값을 가볍게 조절해주며 내 손에서 약간 큰 정도의 여유값(손이 작은 여성)을 주어 손이 큰 남성분들이나 작은 조작이 어려운 연령층의 분들도 편하게 사용할 수 있도록 수정이 들어갔다.