레트로 게임 개발 완벽 가이드 - 클래식 게임을 만드는 방법

레트로 게임 개발은 현대 게임 개발의 기초를 배우는 최고의 방법입니다. 복잡한 3D 엔진이나 수백 가지 라이브러리 없이도 순수한 프로그래밍 로직과 게임 디자인 원칙을 배울 수 있습니다. 이 가이드에서는 스네이크, 테트리스, 퐁과 같은 클래식 게임을 처음부터 만드는 방법을 단계별로 설명합니다.

1. 게임 개발 기초 - 게임 루프란?

모든 게임의 핵심은 게임 루프(Game Loop)입니다. 이것은 게임이 실행되는 동안 반복적으로 실행되는 코드 블록으로, 일반적으로 초당 60회(60 FPS) 실행됩니다.

게임 루프는 세 가지 주요 단계로 구성됩니다:

입력 처리 (Input): 플레이어의 키보드, 마우스, 터치 입력을 감지합니다.
게임 로직 업데이트 (Update): 게임 상태를 업데이트합니다. 캐릭터 이동, 충돌 감지, 점수 계산 등이 여기서 이루어집니다.
렌더링 (Render): 업데이트된 게임 상태를 화면에 그립니다.

// JavaScript 게임 루프 예시
function gameLoop() {
  processInput();    // 1. 입력 처리
  updateGame();      // 2. 게임 로직
  renderGame();      // 3. 화면 렌더링
  requestAnimationFrame(gameLoop);  // 다음 프레임 요청
}
gameLoop();  // 루프 시작

requestAnimationFrame은 브라우저에게 다음 프레임을 그릴 준비가 되면 함수를 호출하도록 요청합니다. 이는 일반적으로 초당 60회 실행되어 부드러운 애니메이션을 만듭니다.

2. HTML5 Canvas - 게임 그래픽의 기초

레트로 게임을 만들 때 가장 많이 사용하는 것이 HTML5 Canvas입니다. Canvas는 JavaScript로 그래픽을 그릴 수 있는 HTML 요소입니다.

<!-- HTML -->
<canvas id="gameCanvas" width="800" height="600"></canvas>

// JavaScript
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// 사각형 그리기 (스네이크 뱀의 몸통)
ctx.fillStyle = '#00ff00';
ctx.fillRect(100, 100, 20, 20);

// 원 그리기 (퐁의 공)
ctx.fillStyle = '#ffffff';
ctx.beginPath();
ctx.arc(400, 300, 10, 0, Math.PI * 2);
ctx.fill();

Canvas의 주요 그리기 함수들:

fillRect(x, y, width, height) - 사각형 채우기
strokeRect(x, y, width, height) - 사각형 테두리
arc(x, y, radius, startAngle, endAngle) - 원/호 그리기
drawImage(image, x, y) - 이미지/스프라이트 그리기
clearRect(x, y, width, height) - 영역 지우기

3. 충돌 감지 (Collision Detection)

게임에서 가장 중요한 로직 중 하나는 충돌 감지입니다. 스네이크가 벽에 부딪혔는지, 퐁의 공이 패들에 맞았는지, 테트리스 블록이 바닥에 닿았는지 판단해야 합니다.

AABB (Axis-Aligned Bounding Box) 충돌:

가장 간단하고 많이 사용하는 방법입니다. 두 사각형이 겹치는지 확인합니다.

function checkCollision(rect1, rect2) {
  return rect1.x < rect2.x + rect2.width &&
         rect1.x + rect1.width > rect2.x &&
         rect1.y < rect2.y + rect2.height &&
         rect1.y + rect1.height > rect2.y;
}

// 사용 예시 - 스네이크가 먹이를 먹었는지 확인
const snake = { x: 100, y: 100, width: 20, height: 20 };
const food = { x: 200, y: 200, width: 20, height: 20 };

if (checkCollision(snake, food)) {
  console.log('먹이를 먹었습니다!');
  score += 10;
  growSnake();
}

원형 충돌 감지:

퐁이나 브레이크아웃 같은 게임에서는 원형 충돌이 필요합니다.

function checkCircleCollision(circle1, circle2) {
  const dx = circle1.x - circle2.x;
  const dy = circle1.y - circle2.y;
  const distance = Math.sqrt(dx * dx + dy * dy);
  return distance < circle1.radius + circle2.radius;
}

4. 스프라이트와 애니메이션

레트로 게임의 매력은 픽셀 아트입니다. 스프라이트(sprite)는 게임에서 사용하는 2D 이미지로, 캐릭터, 적, 아이템 등을 표현합니다.

스프라이트 시트 (Sprite Sheet):

모든 애니메이션 프레임을 하나의 이미지에 담아두고, 필요한 부분만 잘라서 화면에 그리는 기법입니다. 이는 여러 이미지를 로드하는 것보다 훨씬 효율적입니다.

// 스프라이트 시트에서 특정 프레임 그리기
const spriteSheet = new Image();
spriteSheet.src = 'character.png';

function drawFrame(frameX, frameY, canvasX, canvasY) {
  ctx.drawImage(
    spriteSheet,
    frameX * 32, frameY * 32,  // 소스 위치
    32, 32,                    // 소스 크기
    canvasX, canvasY,          // 캔버스 위치
    32, 32                     // 캔버스 크기
  );
}

// 걷기 애니메이션 (프레임 순환)
let currentFrame = 0;
setInterval(() => {
  currentFrame = (currentFrame + 1) % 4;  // 4개 프레임 순환
  drawFrame(currentFrame, 0, playerX, playerY);
}, 100);  // 100ms마다 프레임 변경

5. 사운드 디자인 - 8비트 음악과 효과음

레트로 게임의 또 다른 중요한 요소는 8비트 사운드입니다. Web Audio API를 사용하면 브라우저에서 직접 사운드를 생성할 수 있습니다.

// Web Audio API로 8비트 비프음 만들기
const audioCtx = new AudioContext();

function playBeep(frequency = 440, duration = 200) {
  const oscillator = audioCtx.createOscillator();
  const gainNode = audioCtx.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  oscillator.frequency.value = frequency;
  oscillator.type = 'square';  // 8비트 사각파

  gainNode.gain.setValueAtTime(0.3, audioCtx.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(
    0.01, audioCtx.currentTime + duration / 1000
  );

  oscillator.start(audioCtx.currentTime);
  oscillator.stop(audioCtx.currentTime + duration / 1000);
}

// 점수 획득 사운드
playBeep(523.25, 100);  // C5 음계

// 게임 오버 사운드 (하강 음계)
setTimeout(() => playBeep(392, 100), 0);    // G4
setTimeout(() => playBeep(349.23, 100), 100); // F4
setTimeout(() => playBeep(293.66, 200), 200); // D4

6. 게임 상태 관리

게임은 여러 상태를 가질 수 있습니다: 메뉴, 플레이 중, 일시정지, 게임 오버 등. 상태 관리를 깔끔하게 하면 코드가 훨씬 체계적이 됩니다.

const GameState = {
  MENU: 'menu',
  PLAYING: 'playing',
  PAUSED: 'paused',
  GAME_OVER: 'game_over'
};

let currentState = GameState.MENU;

function gameLoop() {
  switch(currentState) {
    case GameState.MENU:
      renderMenu();
      break;
    case GameState.PLAYING:
      processInput();
      updateGame();
      renderGame();
      break;
    case GameState.PAUSED:
      renderPauseScreen();
      break;
    case GameState.GAME_OVER:
      renderGameOver();
      break;
  }
  requestAnimationFrame(gameLoop);
}

// 키 입력으로 상태 전환
document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' && currentState === GameState.MENU) {
    currentState = GameState.PLAYING;
  }
  if (e.key === 'Escape' && currentState === GameState.PLAYING) {
    currentState = GameState.PAUSED;
  }
});

7. 실전 예제: 간단한 스네이크 게임 만들기

지금까지 배운 내용을 종합해서 간단한 스네이크 게임을 만들어봅시다.

// 게임 설정
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const gridSize = 20;
const tileCount = 20;

// 뱀 초기화
let snake = [{ x: 10, y: 10 }];
let dx = 0, dy = 0;

// 먹이 초기화
let food = {
  x: Math.floor(Math.random() * tileCount),
  y: Math.floor(Math.random() * tileCount)
};

// 입력 처리
document.addEventListener('keydown', (e) => {
  if (e.key === 'ArrowUp' && dy === 0) { dx = 0; dy = -1; }
  if (e.key === 'ArrowDown' && dy === 0) { dx = 0; dy = 1; }
  if (e.key === 'ArrowLeft' && dx === 0) { dx = -1; dy = 0; }
  if (e.key === 'ArrowRight' && dx === 0) { dx = 1; dy = 0; }
});

// 게임 업데이트
function update() {
  // 머리 이동
  const head = { x: snake[0].x + dx, y: snake[0].y + dy };

  // 벽 충돌 체크
  if (head.x < 0 || head.x >= tileCount ||
      head.y < 0 || head.y >= tileCount) {
    alert('게임 오버!');
    snake = [{ x: 10, y: 10 }];
    dx = 0; dy = 0;
    return;
  }

  // 자기 몸 충돌 체크
  if (snake.some(s => s.x === head.x && s.y === head.y)) {
    alert('게임 오버!');
    snake = [{ x: 10, y: 10 }];
    dx = 0; dy = 0;
    return;
  }

  snake.unshift(head);  // 머리 추가

  // 먹이 먹기 체크
  if (head.x === food.x && head.y === food.y) {
    food = {
      x: Math.floor(Math.random() * tileCount),
      y: Math.floor(Math.random() * tileCount)
    };
  } else {
    snake.pop();  // 꼬리 제거 (성장하지 않음)
  }
}

// 렌더링
function render() {
  ctx.fillStyle = '#000';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 뱀 그리기
  ctx.fillStyle = '#0f0';
  snake.forEach(s => {
    ctx.fillRect(s.x * gridSize, s.y * gridSize, gridSize - 2, gridSize - 2);
  });

  // 먹이 그리기
  ctx.fillStyle = '#f00';
  ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
}

// 게임 루프
function gameLoop() {
  update();
  render();
  setTimeout(gameLoop, 100);  // 100ms마다 업데이트
}

gameLoop();

이 코드는 기본적인 스네이크 게임의 핵심 로직을 담고 있습니다. 점수 시스템, 레벨 증가, 속도 변화, 사운드 효과 등을 추가하면 완전한 게임이 됩니다.

8. 성능 최적화 팁

더블 버퍼링: 화면 깜빡임을 방지하기 위해 오프스크린 캔버스에 먼저 그린 후 한 번에 메인 캔버스로 복사합니다.
객체 풀링: 게임 오브젝트를 매번 생성/삭제하지 말고 재사용 가능한 풀(pool)을 만들어 성능을 향상시킵니다.
필요한 부분만 다시 그리기: 전체 화면을 매번 지우고 다시 그리는 대신, 변경된 부분만 업데이트합니다.
requestAnimationFrame 사용: setTimeout/setInterval 대신 requestAnimationFrame을 사용하면 브라우저가 최적의 타이밍에 렌더링합니다.

9. 추천 학습 자료 및 도구

무료 픽셀 아트 툴:

Piskel - 브라우저 기반 픽셀 아트 에디터
Aseprite - 전문가용 픽셀 아트 & 애니메이션 툴
GIMP - 무료 이미지 편집기

8비트 사운드 제작:

BeepBox - 브라우저 기반 8비트 음악 작곡 툴
BFXR - 레트로 게임 효과음 생성기
ChipTone - 8비트 사운드 디자인 툴

학습 리소스:

MDN Web Docs - HTML5 Canvas 및 Web Audio API 공식 문서
Game Programming Patterns (책) - 게임 디자인 패턴
Coding Math (유튜브) - 게임 수학 및 물리 시뮬레이션

10. 다음 단계: 더 복잡한 게임 도전하기

스네이크를 마스터했다면 다음 단계로 도전해보세요:

테트리스: 회전 로직, SRS(Super Rotation System), 라인 클리어 애니메이션, 레벨 시스템을 배웁니다.
브레이크아웃: 물리 기반 공 반사, 파워업 시스템, 레벨 디자인을 익힙니다.
스페이스 인베이더: 적 AI 패턴, 발사체 관리, 방어막 시스템을 구현합니다.
팩맨: 그리드 기반 이동, 경로 탐색 AI, 유령들의 각기 다른 행동 패턴을 만듭니다.

결론

레트로 게임 개발은 단순해 보이지만 게임 프로그래밍의 모든 핵심 개념을 담고 있습니다. 게임 루프, 상태 관리, 충돌 감지, 애니메이션, 사운드 디자인 등 현대 게임 개발에서도 그대로 사용되는 원리들입니다.

가장 중요한 것은 직접 만들어보는 것입니다. 이 가이드의 코드를 복사-붙여넣기만 하지 말고, 직접 타이핑하면서 각 줄이 무슨 역할을 하는지 이해하세요. 그리고 자신만의 아이디어를 추가해 게임을 확장해보세요.

우리 사이트에서 레트로 게임 플레이하기 >