JS+html5 with Game engine

cocos2d-html5 분석

ANBSoft게임공학기술연구소 송찬호

yellow@anbgames.comtwitter : copperwhale

JS+html5 and game engine or lib

FlashJS LimeJSJaws HTML5

From : jswiki/Game-Engines

Cocos2D

cocos2d

2D 게임 같은 인터렉티브 어플리케이션을 만들기 위한 오픈 소스 프레임워크

cocos2d 기본 컨셉

1. CocosNode2. Director3. Scene4. Layer5. Sprite6. Action

cocos2d 기본 컨셉 - CocosNode

cocos2d의 모든 클래스가 CocosNode를 상속 하여 구현

● position, scale, visible 등 기본 속성● 계층 구조를 위한 add, remove, reorder● schedule 기능

cocos2d 기본 컨셉 - Director

어플리케이션을 구성하는 여러 Scene들 가운데 무엇이 활성화 되는지 흐름을 관리

cocos2d 기본 컨셉 - Scene

스테이지 나 타이틀 처럼 어플리케이션의 흐름의 독립적인 한 부분을 정의하는 단위

cocos2d 기본 컨셉 - Layer

화면을 구성하는 단위로 하나 이상의 Layer를 정의하여 하나의 Scene을 구성

cocos2d 기본 컨셉 - Sprite

이동, 회전, 크기변환, 애니메이션 등을 적용할 수 있는 2D 이미지

cocos2d 기본 컨셉 - Action

CocosNode 객체(Scene, Layer, Sprite 해당 됨)에 position, rotation, scale 등과 같이 객체의 속성을 시간에 따라 변경하는 것을 처리

cocos2d의 가족

cocos2d +cocos2d-iphone +cocos2d-android +cocos2d-javascript +cocosBuilder +cocos2d-x +cocos2d-html5 <- !!!

cocos2d-html5

cocos2d-html5

현재 버전은 2.0

● files must load from HTTP server● Google Closure Compiler surpport● Unified Javascript API style● DOM Menu/UI● Updated API to Cocos2d-x V2.0

Google Closure Compiler - 1

Javascript를 최적화 해서 브라우져에서 다운로드와 실행 속도를 향상

Google Closure Compiler - 2

"Advanced mode" 적용

● 게임 로직과 묶어서 하나의 파일로 패키징 가능

● 코드 최소화(주석 및 비칸 제거 등)● 사용하지 않는 코드 제거● 코드 난독화

DOM Menu / UI

html DOM 방식으로 메뉴 구성 가능

● 정적인 메뉴를 구성시 매 프레임 다시 그리지 않아 속도향상

● 텍스트 출력 속도 향상

Unified Javascript API style

cocos2d-iphone 및 cocos2d-x의 JS-Binding의 스크립트와 cocos2d-html5 코드가 같음

For example:var sprite = cc.Sprite.spriteWithFile(s_grossini_dance_atlas, cc.RectMake(x, y, 85, 121)); //is changed to...var sprite = cc.Sprite.create(s_grossini_dance_atlas, cc.RectMake(x, y, 85, 121));

cocos2d-x 와 cocos2d-html5 1/2

cocos2d-x 기반 제작

비슷한 구조로 비교 분석이 쉽다.

● Cocos2d-html5-v2.0.zip 안의 cocos2d폴더와 cocos2d-2.0-x의 cocos2dx 폴더가 비슷한 구조로 구성 되어 있음

cocos2d-x 와 cocos2d-html5 2/2

라이브러리 구성

cocos2d-x● cocos2dx 폴더 내부의 cpp를 컴파일 .lib나 .

a 등 라이버러리 생성

cocos2d-html5● cocos2d 폴더 내부의 js 파일을 google

closure compiler 로 라이브러리 js파일 생성

Cocos2d-html5-v2.0.min.js

SampleHello HTML5 World

HelloHTML5World

게임의 구성

html 파일 + js 파일 로 구성

● html 파일은 canvas 정의 - id와 크기 지정● js 파일은 어플리케이션 로직 및 엔진

파일 구성

index.html - 캔버스 정의 및 cocos2d.js 로딩

cocos2d.js - 엔진 초기화 및 게임 코드 파일 로딩

main.js - 엔진에 게임 객체 생성 및 전달

resource.js - 리소스 목록 정의

myApp.js - 'Hello World' 메시지 및 이미지 출력

build.xml - google closure compiler를 이용한 통합 파일 생성을 위한

ant 빌드 스크립트

html 파일 - index.html

x

Canvas 정의

JS 호출

JS 파일 - cocos2d.js 1/2

엔진 정보 설정

게임 로딩 정보 설정

JS 파일 - cocos2d.js 2/2

패키지 및 엔진 로딩 방법 정의

게임의 코드 파일 목록

JS 파일 - main.js 1/3

게암 객체 생성

게임 객체 정의

JS 파일 - main.js 2/3

엔진 초기화

디렉터 초기화 (AppDelegate)

JS 파일 - main.js 3/3

게임 초기화 완료

게임의 시작 씬

JS 파일 - resource.js

리소스 과련 매직 넘버 정의

전체 리소스 목록

JS 파일 - myApp.js 1/2

Hello World

종료 버튼

화면 갱신 알림

엔진 정보

엔진 로고

JS 파일 - myApp.js 2/2

CircleSprite (화면 갱신 알림)

● 매 프레임 갱신되는 객체

● 기본 도형 그리는 함수로 그림

Helloworld (cc.Layer 확장)

● 종료 버튼 이미지 및 이벤트 정의

● 'Hello World' 문구, 화면 갱신 알림 및 엔진 로고 이미지 객체 생성 및 에이메이션 정의

HelloworldScene (cc.Scene 확장)

● Helloworld 레이어 생성 및 등록

Hello HTML5 World

hello HTML5 world

xml 파일 - build.xml 1/2

컴파일러 정의(google closure compiler)

컴파일 결과 정의

xml 파일 - build.xml 2/2

엔진 소스 목록

게임 소스 목록

ant 빌드 1/2

ant 빌드 실패

엔진 파일 목록에 존재하지 않는 파일이 있어 빌드 실패 <file name="keypad_dispatcher/CCKeypadDelegate.js"/>

<file name="keypad_dispatcher/CCKeypadDispatcher.js"/>

ant 빌드 2/2

ant 빌드 성공

!! 정상적인 결과 파일을 만들기 위해 build.xml 을 수정해야 합니다. !! <file name="keypad_dispatcher/CCKeypadDelegate.js"/>

<file name="keypad_dispatcher/CCKeypadDispatcher.js"/>를

<file name="touch_dispatcher/CCTouchDelegateProtocol.js"/><file name="touch_dispatcher/CCTouchHandler.js"/>

<file name="touch_dispatcher/CCTouchDispatcher.js"/> <file name="keyboard_dispatcher/CCKeyboardDelegate.js"/>

<file name="keyboard_dispatcher/CCKeyboardDispatcher.js"/>로 수정해야 합니다.

빌드 결과 - myApp-v0.1.js

cocos2d-html5게임 시작 과정 분석

boot engine - cocos2d-x win32 1/3

run() 호출

boot engine - cocos2d-x win32 2/3

mainLoop() 호출

boot engine - cocos2d-x win32 3/3

1. main.cppa. CCApplication::sharedApplication()->run();

2. platform/CCApplication.cpp - run()

b. applicationDidFinishLaunching()c. looping CCDirector::sharedSirector()->mainLoop()

boot engine - cocos2d-html5 1/8

cocos2d.js 로딩

boot engine - cocos2d-html5 2/8

엔진 및 게임 스크립트 파일 정의

DOM 로딩 완료

스크립트 로딩 (jsloader.js)

boot engine - cocos2d-html5 3/8

엔진 로딩 목록

main.js 로딩 목록 추가

boot engine - cocos2d-html5 4/8

리소스 로딩중 표시

로딩 완료 후 호출

boot engine - cocos2d-html5 5/8

run() 호출

boot engine - cocos2d-html5 6/8

mainLoop() 호출

mainLoop() 호출

applicationDidFinishLaunching() 호출

1. index.htmla. cocos2d.js 로딩

2. cocos2d.jsb. 즉시 실행 함수에서 DOM로딩 직후 jsloader.js 로딩

3. jsloader.js - (여러 js을 읽는 경우)

c. 즉시 실행 함수에서 모든 엔진 코드 및 main.js 로딩

boot engine - cocos2d-html5 7/8

4. main.js - ctor()

a. cc.Loader.shareLoader().onload 이벤트로 cc.AppController.shareAppController().didFinishLaunchingWithOptions() 호출

5. AppControl.js - didFinishLaunchingWithOptions()

b. cc.Application.sharedApplication().run();

6. CCApplication.js - run()

c. applicationDidFinishLaunching()d. looping cc.Director.getInstance().mainLoop();

boot engine - cocos2d-html5 8/8

boot up 비교

cocos2d-x● 플랫폼 별 다른 엔트리 포인트에서 CCApplication.cpp

의 run() 호출● 윈도의 경우 platform/win32/CCApplication.cpp 의

run() 에서 mainLoop() 호출

cocos2d-html5● 엔진 및 어플리케이션 코드 로딩● 로딩 과정에서 즉시 실행 함수로 초기화● 로딩 완료 이벤트 수신 후 platform/CCApplication.js

의 run() 에서 mainLoop() 호출

etc - 2개의 mainLoop() ??

mainLoop() 호출

mainLoop() 호출

Looping callback 등록

Looping callback 등록

html5 - javascript게임 개발을 위한 기능들

게임을 위한 Javascript 사용 패턴 1/2

모듈 패턴 - 네임스페이스 패턴, 즉시 실행 함수 등

상속 패턴 - 프로토타입 목록 및 객체 정보 복사를 이용

게임을 위한 Javascript 사용 패턴 2/2

객체 상수 - 매직 넘버를 정의하기 위한 객체 정의 방법

...JavaScript Patterns - 자바스크립트 코딩 기법과 핵심 패턴

Display - Canvas

Display - WebGL

Display - Canvas vs WebGL

Canvas● 모든 시스템에서 지원● 상대적으로 느리지만 지속적으로 개선

WebGL● gles 2.0 과 비슷한 사양● Canvas에 비해 매우 빠르고 동작 한다면 호환성 이슈 적

음● WebGL tutorial - Opera 개발자(Erik Moller)● WebGL Terrain Editor

Display - performance test 1/2

2012-3-19 internet-explorer-10-fast-and-native-has-gone-to-other-browsers

Display - performance test 2/2

2011-11-18 html5-2d-gaming-performance-analysis

Display - cocos2d-html5

canvas 생성

Input

addEventHandler● 첫번째 인자로 원하는 이벤트를 지정

○ 'keyup', 'keydown'○ 'mousedown', 'mouseup', 'mousemove'○ 'touchstart', 'touchmove', 'touchend', 'touchcancel'

● 두번째 인자로 이벤트 처리 함수 지정● 세번째 인자로 캡쳐 방식의 이벤트 처리

○ 일반적인 경우 부모 객체에게 이벤트 전달○ 캡쳐 방식의 경우 부모객체에게 이벤트 전달을 하지

않음

Input - keyboard cocos2d-html5

키 이벤트 등록

Input - mouse cocos2d-html5

마우스 버튼 업 이벤트

마우스 버튼 누름 이벤트

마우스 이동 이벤트

Audio

Audio - codec in browser

Audio

현재● 단순한 기능● 메모리에 로딩된 사운드만 출력● 브라우져 별 지원 코덱 다름● 아이폰의 경우 전체 화면이 아닌 경우 출력되지 않음미래

● 기능 확장을 위한 다양한 시도중○ 스트리밍 처리에 대해 W3C 제안○ 하위 수준의 API 개발

Audio - cocos2d-html5

Network - Web socket

Network - Web socket client

Web socket - client● TCP 기반의 실시간 양방향 통신 가능● 다수의 사용자와 통신 가능● 사용하기 쉽다

안드로이드 계열에서는 지원하지 않음 ;;;

● iframe 나 Ajax 등 비동기 JS 계열의 기술을 이용

Network - Web socket server

Web socket - server● 기존 TCP 소켓 서버와 약간 다른 구현이 필요● 다양한 언어를 위한 오픈 소스 서버 프레임 존재

○ jwebsocket

○ pywebsocket

○ phpwebsocket

○ web-socket-ruby

○ socket.io-node

○ ...

high performance

변수 선언 위치

성능 향상을 위한 코딩 패턴

...● Extreme JavaScript Performance

참고자료

● JavaScript 자바스크립트 성능 최적화

multi browser

브라우져 마다 특성 다름...;;● 시각적 결과● 지원 기능● 성능

● 개개의 브라우져에 대응하도록 소스 코드 튜닝● 특정 브라우져만 지원, 해당 브라우져 설치 유도

debug - html5 & javascript

Firefox - FirebugChrome - Chrome developer tool● 브레이크 포인터, 라인 단위 실행 등 디버깅 기능● 변수값 표시● 로그 출력● 성능 프로파일링● 호출 스텍 표시● 리소스 로딩 모니터링● 기타 등등

IDE - Construct 2

Make HTML5 games with Construct 2

IDE - cocosBuilder

IDE - cocosBuilder

CocosBuilder 3 Animation Editor

html5 - javascript그래서...

Q & A살살요 ... ^^ 굽신~