폰에서도 피할 수 있게: AvoidNow 가상 조이스틱과 세로 아레나

AvoidNow는 브라우저에서 바로 하는 웹 게임이다. 주소를 친구에게 보내면 대부분 폰으로 연다. 그래서 처음부터 조작 방식을 두 가지로 잡았다. PC는 WASD나 방향키로 움직이고 스페이스로 대시한다. 폰은 화면 왼쪽을 끌어 움직이고 오른쪽 아래 버튼으로 대시한다. 이 글은 폰 쪽을 어떻게 만들었는지에 대한 기록이다.

누른 자리에 생기는 조이스틱

가상 조이스틱은 위치가 고정되어 있지 않다. 화면 왼쪽 60% 안 어디든 손가락을 대면 그 자리가 조이스틱의 중심이 된다. 고정 위치 조이스틱은 화면을 보느라 손가락이 중심에서 조금씩 밀려나면 원하지 않는 방향으로 걷게 된다. 누른 자리를 중심으로 삼으면 그런 일이 없다.

항목	값
조이스틱 반지름	90px
데드존	반지름의 15%
입력 크기	중심에서 거리 ÷ 90 (0~1, 아날로그)
반지름 밖으로 끌면	중심이 손가락을 따라 끌려옴
대시 버튼	반지름 72px, 오른쪽 아래 모서리에서 130px 안쪽
대시 버튼 터치 범위	반지름의 1.4배

반지름 밖으로 손가락을 끌면 중심이 손가락 쪽으로 따라온다. 반대 방향으로 급하게 틀 때 손가락을 멀리 되돌리지 않아도 된다. 입력은 아날로그라서 살짝 끌면 천천히 걷는다. 다만 발자국을 피하는 게임이라 대부분 끝까지 밀어서 쓴다.

조이스틱과 대시 버튼은 첫 터치가 들어오기 전까지 그리지 않는다. 그래서 PC에서 키보드로 하는 화면에는 버튼이 뜨지 않는다. 두 손가락은 따로 추적한다. 왼손으로 조이스틱을 끄는 동안 오른손으로 대시를 눌러도 서로 끊기지 않는다.

대시 버튼에 쿨타임을 그린다

대시는 1.1초 쿨타임이 있다. PC에서는 키를 눌렀는데 대시가 안 나가면 쿨타임인 줄 알지만, 폰에서는 버튼을 제대로 못 누른 건지 쿨타임인지 구분이 안 된다. 9월 26일 오후 커밋 4be9d54(“Show dash cooldown and fill portrait phone screens”)에서 쿨타임을 세 군데에 보여 주게 했다.

• 대시 버튼: 어둡게 바뀌고, 12시 방향부터 시계 방향으로 파란 부채꼴이 차오르며, 가운데에 남은 초가 소수 첫째 자리까지 뜬다.
• 캐릭터 발밑: 납작한 링이 차오른다.
• 화면 위 HUD: 하트 옆에 게이지가 있다.

같은 날 저녁 퀄리티 패스 커밋 5c01419에서는 맞았을 때 폰이 0.12초 진동하게 했다. 소리를 꺼 둔 상태에서도 맞았다는 걸 손으로 알 수 있다.

세로로 든 폰의 플레이 화면과 타이틀 화면. 오른쪽 아래 동그라미가 대시 버튼이다.

세로로 들면 아레나도 세로가 된다

가장 오래 고민한 건 화면 방향이다. 첫 버전은 가로 1280×720 고정이라, 폰을 세로로 들면 위아래에 검은 여백이 크게 생기고 아레나가 손톱만 해졌다. 결정 목록에 세 가지 안을 올렸다.

안	내용
A	가로 전용, 세로면 “화면을 돌려주세요” 안내
B	세로 전용 레이아웃을 따로 만들기 (작업량 큼)
C	지금처럼 여백만 둠

처음 추천안은 A였다. 그런데 9월 26일 결정 인터뷰에서 정한 답은 “폰이 세로일 때만 세로 아레나”였다. 작업량이 크다고 적어 둔 B안 쪽이다. 폰을 세로로 든 사람에게 돌려 달라고 하지 않고, 게임이 맞추기로 한 것이다.

구현은 규칙 쪽에서 시작했다. 월드 크기와 아레나를 가로용, 세로용 두 벌로 두었다.

	월드	아레나
가로	1280×720	1100×500
세로	720×1280	580×800

창의 세로가 가로보다 길면 세로 모드다. 패턴 코드는 방향을 정할 때 아레나의 가로세로 길이를 본다. 그래서 세로 아레나에서도 같은 코드가 그대로 돈다. 걸어가는 공룡은 60% 확률로, 티라노는 70% 확률로 아레나의 긴 쪽을 따라 움직인다. 세로 화면이면 이 긴 쪽이 위아래가 된다.

폰마다 화면 비율이 다르다는 문제도 있었다. 화면 늘리기 방식을 “expand”로 두어서, 월드는 화면 가운데에 고정하고 남는 공간에는 바닥 배경을 더 그린다. UI는 실제로 보이는 화면 가장자리에 붙인다. 그래서 길쭉한 폰에서도 검은 띠가 생기지 않는다.

방향은 판 중간에는 바꾸지 않는다. 타이틀, 멀티 메뉴, 대기실에서만 바뀐다. 멀티플레이에서는 방마다 아레나가 하나여야 하므로, 방에 처음 들어온 방장의 방향을 따른다. 서버 테스트에도 방장이 세로면 세로 아레나로 시작하고 모든 장판과 이동이 그 안에서 도는지 확인하는 항목이 있다.

브라우저가 게임을 방해하지 않게

마지막은 브라우저 쪽이다. 폰 브라우저는 두 손가락으로 벌리면 확대하고, 끌면 화면이 스크롤된다. 조이스틱을 끄는 중에 페이지가 밀리면 게임이 안 된다. 퀄리티 점검 목록에 “폰에서 핀치 줌이나 스크롤이 될 수 있음”을 올려 두었고, 앞에서 말한 퀄리티 패스에서 웹 셸의 뷰포트 확대를 막고 터치 동작, 당겨서 튕기는 스크롤, 글자 선택을 모두 껐다.

폰으로 해 보면 PC보다 조금 어렵다. 대신 세로로 들고 한 손으로도 할 수 있다. AvoidNow 게임 페이지를 폰에서 열어 보면 된다. 긴 판을 버티면 배경이 바뀌는 것도 볼 수 있는데, 그 이야기는 낮·노을·밤·화산 분위기 전환에 썼다.