Guide

• File Structure
• Life Cycle
• Draw Scene
• 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는 다음과 같이 설정이 된다.

Draw Scene

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