자바스크립트 게임 엔진 스터디 1주차 [게임 루프, 엔진 구성]

2016. 7. 17(일) 게임 엔진 스터디 1주차

 

게임 엔진 스터디 1주차 내용은 다음과 같습니다.

    1. 게임 루프

    2. 게임 엔진의 구성

---

1. 게임 루프(Game Loop)

게임 루프는 게임을 실행하고 역동적으로 만드는데 있어 가장 기본적인 바탕이 되며, 핵심입니다. 어떠한 게임도 게임 루프 없이는 실행할 수 없어 사람의 심장박동과 비유하곤합니다.

게임이 실행되는 동안 다음과 같은 많은 일들이 반복적으로 일어납니다.

• 키보드, 마우스 입력과 같은 사용자 입력(getting user input)
• 맵, 몬스터, 레벨등과 같은 게임 상태 갱신(updating game state)
• 충돌검사,물리효과등과 같은 효과(effecting special) 
• 음악과 효과음 재생(playing sound)
• 게임 디스플레이(displaying game)

위와 같은 작업들은 모두 게임 루프 안에서 끊임없이 작업이 수행되어집니다.

여기서 처음 한번 실행되는 Initialize 에서는 이미지, 사운드와 같은 게임 자원 로드와, 맵 데이터 로드, 게임 옵션(넓이, 높이....)등

게임이 초기화 되는 작업이 수행됩니다.

 

간단한 소스와 함께 정리해보겠습니다.

var running, FPS, canvas, context;

// 게임 초기화
function initialize() {
    canvas = document.getElementById('myCanvas');
    context = canvas.getContext('2D');

    // 게임 자원 로딩 수행...
    // 게입 옵션 수정..
    // 맵 데이터 로드..

    FPS = 30;                       // Frame Per Second
    running = true;

    setInterval(loop, 1000 / FPS); // 타이머 함수
}

// 게임 루프
function loop() {
    if( running ) {

        update();   // -> 게임 상태 업데이트
        display();  // -> 캔버스 렌더링

    } else {
        end();      // -> 게임 종료
    }
}

// 게임 상태 업데이트
function update() {
    // 사용자 입력
    // 객체 상태 갱신...
    // 카메라 뷰 갱신...
    // 충돌판정, 물리효과 적용..
    // 사운드 재생..
}

// 게임 렌더링
function display() {
    // 캔버스 렌더링 수행...
}

// 게임 종료
function end() {
    if( !running ) {
        // 게임 종료작업 수행
    }
}

초기화 함수에서 setInterval() 과 같은 자바스크립트 타이머 합수를 이용하여 FPS를 구현했습니다.

자바스크립트에서는 FPS를 구현하는데 있어 setInterval, setTimeout, requestAnimationFrame과 같은 타이머 함수를 사용하는데,

위 함수 모두 FPS를 구현하는데 있어 차이점이 있습니다. 이것은 추후 스터디때 진행하겠습니다.

 

---

2. 게임 엔진의 구성(Game Engine)

인터넷에서 구한 기본적인 게임 엔진의 구성도입니다.

게임 엔진이란 게임 소프트웨어의 구성에 필요한 구성 요소를 재사용할 수 있게 만든것입니다.

엔진은 개발에 필요한 기능을 즉시 사용할 수 있도록 제공하며, 개발의 시간과 복잡도를 줄여줍니다.

 

저희 스터디는 위에서 파란색부분을 구현할 예정이며, 회색부분은 HTML5의 캔버스, 웹오디오같은 API를 사용할 것입니다. 

---

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.