3일 코딩 챌린지: 게임 프로토타입 만들기 - 3

1. AI와 함께하는 3일 게임개발 챌린지 - day 3

1. 농장 게임 맵 세팅 - 맵 이동은 일단 빠져도 좋을 것 같음.
2. 플레이어의 움직임 기능 및 애니메이션
3. 농장과 플레이어의 상호작용 기능

위처럼 1 2 3의 목표는 달성이 되었다.

3일차에서는 앞으로의 코드베이스를 위한 추가적인 개선 및 시간이 남는다면 작은 추가 기능 하나정도를 만들어 보는 것이 될 것 같다.

2. 일관성없는 FPS 고치기

setTimeout(
  () => requestAnimationFrame((time) => this.gameLoop(time)),
  1000 / DEV_FPS // 60
);

이전의 코드는 AI가 준 그대로 사용해서 60fps로 루프를 돌린다고 생각했었는데, 실제로는 루프의 속도가 점점 빨라지는 문제가 발생해 캐릭터가 순간이동을 하는 문제가 발생했다.

해당 문제에 대해서 확실하게는 알 수 없지만, 브라우저가 js 타이머를 핸들링하는 방식 자체가 믿을 수 없다고 한 것을 본 적이 있다. 따라서 setTimeout과 setInterval을 다른 안전장치를 쓰지 않는다면, 다른 해결책을 찾아보는 것이 답이 될 것 같다.

export class FrameLimiter {
  private lastFrameTime: number = 0;
  private frameInterval: number;
  private enabled: boolean = true;

  constructor(fps: number = 60) {
    this.frameInterval = 1000 / fps;
  }

  shouldProcessFrame(timestamp: number): boolean {
    if (!this.enabled) return true;

    const delta = timestamp - this.lastFrameTime;
    if (delta >= this.frameInterval) {
      this.lastFrameTime = timestamp;
      return true;
    }
    return false;
  }

  setFPS(fps: number): void {
    this.frameInterval = 1000 / fps;
  }

  enable(): void {
    this.enabled = true;
  }

  disable(): void {
    this.enabled = false;
  }

  getFPS(): number {
    return 1000 / this.frameInterval;
  }
}

여러 해결책을 상담한 끝에 직접 RAF 훅 내부에서 직접 구현한 타이머를 이용해 프레임을 제한하는 방식으로 변경되었다.

3. 맵 가장자리 이동 제한

캐릭터가 맵 바깥을 나가버리는 것은 2일차에 구현을 깜박했었다.

생각외로 AI로 해결하는데 가장 오랜 시간이 걸린 이슈였다.

const isOutOfBounds =
  tileCoord.row < 0 || // 위
  tileCoord.col < 0 || // 왼
  tileCoord.row >= this.tileMap.getMap().length || // 아래
  tileCoord.col >= this.tileMap.getMap()[0].length; // 우

기존 AI가 만들어 준 이동 불가 판별 로직이다. 간단하게 유저의 현재 위치가 타일 맵 어레이의 범위를 벗어난다면 멈추게 되는 것인데 위, 왼쪽 이동은 문제 없었지만 아래와 오른쪽은 여전히 맵을 나가지는 문제가 발생했다.

해당 코드의 문제는 무엇일까?

const isOutOfBounds =
  (tileCoord.row < 0 && direction === "up") ||
  (tileCoord.col < 0 && direction === "left") ||
  (tileCoord.row >= this.tileMap.getMap().length - 1 && direction === "down") ||
  (tileCoord.col >= this.tileMap.getMap()[0].length - 1 &&
    direction === "right");

그렇다. Array.prototype.length는 실제 인덱스보다 1 큰 것이다...

과연 AI가 이 정도의 체킹을 못 했을까? 라고 생각한 내 잘못이었다.

너무 진도를 빠르게 빼 버린 것에 만족해 이런 기본적인 것을 몇 시간 동안 붙들고 있었던 것이다.

4. AI는 정말로 강력한 툴이다. 잘 사용하고 내가 정신을 붙들고 있기만 한다면...

버전 1 프로토타입의 완성된 모습이다.

게임에 대해 아무것도 모르는 상태에서 진행한 것 치곤, 꽤나 진행한 것이 아닐까?

그리고 무엇보다도 재미있었고, 꽤 집중력을 오래 유지했다는 것이 나에게 있어서는 중요했다. 조만간에 V2를 진행하는 것이 기대된다.

AI 사용경험에 대해서는 몇 가지 주의해야 할 것을 알게 되었다.

1. 기본 개념을 잘 알지 못하는 프롬프트로는 제대로 된 코드 제네레이션을 기대할 수 없다. 어딘가 틀린 것을 알게 된 순간부터, AI의 코드 생성으로는 문제를 해결하기 힘들다. 개발자가 직접 확인해야 한다.

2. 한글보다 영어로 작성하는 쪽이 결과가 좀 더 좋다.

3. 역시나 개발자가 정확히 어떤 기능을 구현하려고 하는지?에 대해서 정확히 알아야 한다. 결국 태스크에 대한 완벽한 이해와 함께 단계 하나하나를 아주 구체적으로 물어보는 것이 중요하다.

따라서, AI와 무언가를 진행할 때에는 무엇보다 개발자 자신이 만드려는 기능을 제대로 이해하고 있는지? 거기에 어떤 것들이 필요한지? 를 확실하게 정하는 것이 무엇보다도 중요하다고 생각한다. 특히 AI 생성한 코드일 수록 인간이 하지 않을 실수를 범하는 경우가 있을 수 있다는 것을 항상 조심해야 하겠다.