Guide

• File Structure
• Life Cycle
• Main Loop
• User Interface
• [Development Stack](Development Stack)

File Structure

Life Cycle

CC의 전체적인 생명주기는 /js/GameFramework.js 에서 설정이 된다. 파일이 로드되는 순간 HTML의 load이벤트와 unload이벤트를 다음처럼 설정한다. HTML에서 제공하는 이벤트들은 여기참조.

window.addEventListener("load", onPageLoadComplete, false);
window.addEventListener("unload", onGameDestroy, false);

초기화

onPageLoadComplate함수 안에서 게임에 대한 전반적인 초기화가 이루어 지는데 여기서 가장 중요한 부분은 시스템의 루프를 설정하는 것이다.

function onPageLoadComplete()
{
  var FPS = 30;
  soundSystem.AddSound("./audio/test_shoot.mp3");

  screenWidth = $("#GameCanvas").width();
  screenHeight = $("#GameCanvas").height();
	
  gameState = new SpriteTestScene();
  setInterval(gameLoop, 1000/ FPS);

  // ... 
}

gameLoop함수는 매 프레임 마다 호출이 되며, FPS(Frame per Second)의 설정에 따라서 달라진다. FPS는 다음과 같이 설정이 된다.

Main Loop

CC메인 루프에서는 시스템의 업데이트와 렌더링의 두 부분으로 이러어 집니다. Update() 함수에서는 이벤트 처리, 케릭터의 위치 갱신, 통신처리등 여러가지 상태를 업데이트 하며, Render() 함수 에서는 게임의 렌더링에 관련된 부분을 담당 하게 됩니다. 이곳에는 배경, 케릭터 그리고 UI등을 실제로 화면에 드리게 됩니다.

function gameLoop()
{
	Update();
	Render();
	frameCounter.countFrame();
}

User Interface

의존성 관리

현재 Campus Canvas는 의존성 관리를 html페이지에서

<script href='...'></script> 

형식을 사용합니다. 점점 내용이 많아질수록 이러한 의존성 관리는 좋지 않기 때문에 의존성 관리 모듈을 사용하려고 합니다. 다음과 같은것을 고려하고 있습니다.

• WebPack
• CommonJs

의존성 관리에 대한 네이버 D2의 글

http://d2.naver.com/helloworld/12864

Naver D2의 webpack에 대한 글

http://d2.naver.com/helloworld/0239818