Babylon.js로 만든 레이싱 게임 구현기 [3] - 코드 생성 및 검증, 테스트

코드 생성 시작

설정파일 및 진입점 생성

 클로드를 이용해서 마크다운 파일들을 참고하여 코드를 생성하도록 했다.

우선은 비어있는 프로젝트 폴더에 vite.config.ts, tsconfig.json, package.json 들을 만들어 필요한 설정들을 포함하도록 했다.

vite.config.ts에는 이전 시간에 Claude가 얘기했던 "Cross-Origin-Opener-Policy": "same-origin", "Cross-Origin-Embedder-Policy": "require-corp" 설정이 들어가 있음을 확인했다.

화면의 진입점이 될 index.html 파일과 그 안에 canvas가 있음을 확인하고, main.ts에서 canvas 태그를 찾도록 코드가 짜여진 것을 확인했다.

import { App } from "./App";

const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;

if (!canvas) {
  throw new Error("renderCanvas 엘리먼트를 찾을 수 없습니다.");
}

console.log("racing app ready");

그 후에는 메인메뉴와 맵 선택 화면을 만들었다. 현재까지는 UI를 구현하는 부분이라 이해하는데 있어서 크게 어려움이 없었다. 하지만 본격적인 게임 로직으로 들어가니 코드를 파악하는 시간이 늘어나기 시작했다.

가장 어려웠던 부분: 차량 물리

 처음에는 하나의 통짜 모형으로 구현을 시작했다. 움직임을 확인한 후 차체 메시와 4개의 바퀴 메시를 이용해 기본적인 차량 모델을 만들어 레이싱을 테스트했다. 그런데 차량이 주행 중 기울어지면 그 흔들림이 점점 심해지다가 나중에는 토네이도에 휘말린 듯 빙빙 돌아가는 문제가 생겼다. 원인은 댐퍼 변수에 있었다.

const damperForce = -SUSPENSION_DAMPING * this._linVelRef.y;

4개의 바퀴가 모두 차체 중심의 y 속도 하나를 댐퍼 기준으로 사용하고 있었다.

하나 차량이 앞뒤로 흔들린다고 할 시 앞 바퀴가 내려갈 때 -> 뒷바퀴는 올라가고 있음을 생각해야 했다. 각 바퀴의 입장에서

• 앞바퀴: 댐퍼가 눌러줘야 함 (반발력 필요)
• 뒷바퀴: 댐퍼가 밀어줘야 함 (지지력 필요)

이렇게 되어야 했다. 그런데 차체 중심의 linVel.y 하나를 쓰면 이 두상황에 같은 방향의 힘이 작용하게 되어 오히려 떨림이 심해졌던 것이다.

Claude를 통해 이 부분에 대한 보완을 요청했고,

const rx = this._rayFromWorld[i].x - comPos.x;
const rz = this._rayFromWorld[i].z - comPos.z;
const vWheelY = this._linVelRef.y + this._angVelRef.z * rx - this._angVelRef.x * rz;
const damperForce = -SUSPENSION_DAMPING * vWheelY;

다음과 같이 코드가 수정되었다.

Claude는 각 바퀴 attachment point의 실제 수직 속도를 강체 역학 공식으로 계산하여 vWheelY에 담고, 이를 댐퍼 계수와 곱하여 damperForce 변수에 담았다고 설명하였다.

vWheelY = 선형 Y속도 + (각속도 × 반지름벡터).y

이렇게 처리하니 차량의 움직임이 안정된 것을 확인할 수 있었다. Claude가 코드를 수정하는 것을 보며 대단함을 느끼면서도, 어릴 때 물리 공부 좀 열심히 할 걸... 이라는 생각이 들었다.

테스트와 수정

  기본적인 구현이 완료된 후, 테스트를 반복해서 진행했다. 테스트의 경우 직접 게임을 플레이하면서 움직임에 이상이 없는지 테스트했다. 플레이를 하면서

• 속도와 회전값 조정
• 경로 이탈 시 차량 속도 감속

등의 로직을 추가했다.

게임 개발은 처음이라 실제 플레이를 하며 진행했는데, 문득 글을 작성하는 지금에 와서야 게임같은 경우도 Jest 와 같은 툴을 이용하여 테스트를 하는 경우도 있는지 궁금해졌다. 단순 경계값 분석 같은 데이터 검증은 가능할 것 같은데, 게임 테스트는 주로 어떻게 진행하는지에 대해서도 추후 좀 더 파보려고 한다.

완성

그렇게 해서 마침내 가장 기초적인 레이싱 게임이 완성되었다. 현재는 경쟁 차량 같은 것도 없이 단순히 빙빙 돌면서 최고 기록만 저장하는 형태이지만, 추후 차량봇 추가, 순위, 랩별 카운트 등의 시스템을 추가해서 그럴 듯한 레이싱 게임으로 만들어볼 생각이다.

완성된 프로젝트는 여기에서 플레이해볼 수 있다.