html Canvas 게임 강좌 - 4

이번에는 GameFramework.js를 살펴본다.

GameFramework는 게임 Loop를 관리한다.

우선 mouse eventhandler를 등록한다.

> touch 기반 모바일은 무관하다.

그 다음 game scene을 등록할 변수와 다음 scene을 등록할 변수를 생성한다.

ChangeGameState

> 게임의 scene이 변경되거나

Update

>게임의 논리적인 부분

Render

>이미지를 그리는 부분

gameLoop

> 위 Update와 Render를 반복해서 호출하는 역할이다.

추가적으로 frame을 측정한다.

마지막은 setTimeout으로 자기자신을 호출하는 것으로 끝이다.

> 이 방식은 동적 fps방식으로 일정 주기로 Loop를 호출하는 것이 아닌 현재 디바이스의 최대 fps를 허용한다.

다만, 이 방식은 이전의 fps를 가지고 Update부분에서 표현 거리/fps를 나누어 fps에 대한 부분으로 표현해야한다.

>다른 방식으로는 Loop Time을 정한 정적 fps가 있으며 이 방식은 디바이스의 fps가 기대 fps로 떨어질 떄 frame drop이 발생한다.

다만, 구현이 간단하여 사용하기 쉽다.

//EventListener window.addEventListener("mousedown", onMouseDown, false); window.addEventListener("mouseup", onMouseUp, false); //game Scene var game_state = new LoadingState(); var after_loading_state; function onMouseDown(e) { if(game_state.onMouseDown != undefined) game_state.onMouseDown(); } function onMouseUp(e) { if(game_state.onMouseUp != undefined) game_state.onMouseUp(); } //change Scene function ChangeGameState( nextGameState ) { //check override Function if( nextGameState.Update == undefined) return ;//fail if( nextGameState.Render == undefined) return ;//fail game_state = nextGameState; } function Update() { //timer update timerSystem.Update(); game_state.Update(); } function Render() { var theCanvas = document.getElementById("GameCanvas"); var Context = theCanvas.getContext("2d"); Context.fillStyle = "#000000";//RGB (black) Context.fillRect(0,0,theCanvas.width,theCanvas.height);//reDraw Canvas to Black game_state.Render(); //show FPS //RGB (white) fillText(Context, "fps : " + frameCounter.Lastfps, 15,"#ffffff",10, 10, false); } //main game Loop function gameLoop() { Update(); Render(); //fps update frameCounter.countFrame(); setTimeout(gameLoop,0); }