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


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

    1. 게임 루프

    2. 게임 엔진의 구성

    4. 제작할 간단한 게임 콘티

    3. 숙제

1. 게임 루프(Game Loop)

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

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

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

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



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

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


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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
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 ) {
        // 게임 종료작업 수행
    }
}
 
cs

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

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

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


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

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

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

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


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


3. 제작할 게임의 콘티

주제: 추억의 슈퍼마리오 기능 구현하기(가제)

초기화:

  • 게임 캔버스 세팅
  • 이미지 로드 => 캐릭터(플레이어, 몬스터 2가지) 생성
  • 맵데이터 로드


게임 루프:

  • 키보드 상하좌우 입력 -> 플레이어 이동, 점프
  • 충돌판정 -> 너아니면 내가 죽는다.
  • 몬스터 AI -> 2가지 이상 패턴


렌더링:

  • 맵, 플레이어, 몬스터 그리기


게임 종료 조건:

  • 플레이어가 죽거나, 깃발에 도착


4. 숙제

1. 캔버스에 간단한 이미지 띄우기

2. 게임 맵 구현

  • // 챕터 5 Making Maps 참고

3. 캐릭터(플레이어, 몬스터) 구현을위한 자바스크립트 상속 공부해오기

  • 블로그, 인터넷 리소스등 !


다음 스터디시간에는 캔버스에 이미지를 띄우는걸 안다는 가정하에

다같이 맵을 구현해 화면에 띄어보겠습니다.

이미지는 간편하게 상백님의 게임을 그대로 가져오겠습니다.


또한 자바스크립트 상속에 대해 토론을 하며 캐릭터를 만들어볼테니 꼭 공부해오시기바랍니다.