브라우저에서 도는 3D 멀티플레이 게임 만들기

웹 개발은 해봤지만 3D도, 실시간 멀티플레이도 처음이었습니다. 그런데도 "설치 없이 링크만 누르면 친구들과 바로 할 수 있는 술래잡기"를 만들고 싶었습니다. 브라우저에서 도는 1인칭 경찰과 도둑 게임입니다.

웹 개발에는 없던 개념들

가장 먼저 부딪힌 건 게임 루프였습니다. 일반적인 웹 화면은 사용자가 무언가를 눌러야 반응하지만, 게임은 아무도 아무것도 하지 않아도 화면이 계속 다시 그려집니다. 1초에 수십 번 화면을 갱신하며 그 사이에 위치를 계산합니다.

그다음이 델타 타임입니다. 컴퓨터마다 화면 갱신 속도가 다릅니다. 갱신할 때마다 "앞으로 1만큼 이동"이라고 짜면, 빠른 컴퓨터에서는 캐릭터가 훨씬 빨리 달립니다. 그래서 이동량을 "속도 × 지난 시간"으로 계산해야 어느 기기에서든 같은 속도로 움직입니다. 알고 나면 당연한데, 모르면 원인을 찾기 어려운 종류의 버그였습니다.

서로 다른 화면을 어떻게 맞출까

멀티플레이의 본질은 여러 사람의 화면이 같은 상황을 보게 만드는 일이었습니다. 각자 컴퓨터에서 각자 계산하면 금세 어긋납니다. 누구는 잡혔다고 하고 누구는 안 잡혔다고 합니다.

그래서 판정은 서버가 한다는 원칙을 세웠습니다. 클라이언트는 "이 방향으로 움직였다", "지금 잡기를 시도했다"를 보내고, 실제로 잡혔는지 아닌지는 서버가 결정해 모두에게 알립니다. 대신 서버 응답만 기다리면 조작이 굼떠 보이므로, 내 캐릭터는 일단 화면에서 먼저 움직이고 서버 결과가 오면 보정합니다.

다른 사람 캐릭터는 또 다른 문제가 있었습니다. 위치를 초당 수십 번 보내면 통신량이 부담되고, 적게 보내면 뚝뚝 끊겨 보입니다. 해법은 위치를 띄엄띄엄 받되 그 사이를 부드럽게 이어서 그려주는 것이었습니다. 받은 좌표로 순간이동시키는 대신, 이전 위치에서 새 위치로 자연스럽게 미끄러지게 만들면 훨씬 매끄럽게 보입니다.

재미는 결국 디테일에서

기능이 다 돌아가도 처음에는 심심했습니다. 재미는 작은 것들에서 나왔습니다. 시작하자마자 잡히지 않도록 도망갈 시간을 주고, 스폰 위치를 흩뿌리고, 짧게 치고 나가는 대쉬를 넣고, 발소리와 잡히는 순간의 효과음을 더했습니다. 숨을 곳이 있는 맵을 만들자 비로소 술래잡기다워졌습니다.

남은 이야기

혼자서 테스트하는 것도 일이었습니다. 창을 여러 개 띄워 동시에 접속해 보고, 휴대폰으로도 붙어 봤습니다. 처음 다른 창의 캐릭터가 제 움직임을 따라 움직였을 때가 가장 즐거웠습니다. 아직 다듬을 게 많지만, "링크만 누르면 되는 게임"이라는 처음 목표는 이뤘습니다.