1.
HTML5 GAME APP
개발 및 이슈
2013-10-31
동국대학교 멀티미디어공학과 이창환 (YICH@DONGGUK.EDU)

2.
목차
• HTML5 기술 동향
• HTML5 게임엔진 동향
2013 W3C HTML5 Day Conference
2
• HTML5 게임엔진:Cocos2d-HTML5

3.
2013 W3C HTML5 Day Conference
3
HTML5 기술 동향

4.
게임(멀티미디어) 관련 웹 기술
•
성능 부분
• 자바스크립트 해석기
• 실행방식:컴파일, 인터프리트, jit
• 자바스크립트 변환기
• C/C++ -> 자바스크립트 변환: Emscripten
• Asm.js
• 자바스크립트 바이트코드: 중간코드
• API 확장: Typed Array
• 쓰레기 수집기
멀티미디어 관련 API
•
•
•
•
•
•
웹GL
웹오디오
웹RTC/웹소켓
포인터 이벤트/게임패드 API
풀스크린 API
디바이스 API
2013 W3C HTML5 Day Conference
4
•

5.
웹의 성능
• HTML/CSS 파싱
• DOM
• 렌더링
• 자바스크립트
• 자바스크립트 실행
• 자바스크립트 API: XHR, etc.
2013 W3C HTML5 Day Conference
5
• 네트워크

6.
자바스크립트의 성능
•
자바스크립트 해석기
• 실행방식
• 인터프리트
• 컴파일: Javascript Bytecode 실행
• JIT 컴파일: 실행시간 중에 기계어 코드로 변환하여 실행
• Google Chrome의 V8
• 관련기술: Asm.js
•
쓰레기 수집기 (garbage collector)
• 쓰레기 수집: 불필요한 객체를 자동으로 회수
2013 W3C HTML5 Day Conference
6
• 60 fps (16ms), 100 ms or more

7.
자바스크립트의 성능 향상
• ASM.JS
• asmjs.org
• Subset of JavaScript
• 자바스크립트 해석기의 JIT 컴파일을 위한 자바스크립트 코드
• C/C++ -> 자바스크립트 변환시 성능 향상
• 주요 기능
• Implicitly typed
• Typed Array
2013 W3C HTML5 Day Conference
7
function compiledCalculation() {
var x = f()|0; // x is a 32-bit value
var y = g()|0; // so is y
return (x+y)|0; // 32-bit addition, no type or overflow checks
}

8.
8
2013 W3C HTML5 Day Conference

9.
자바스크립트 변환기
(TRANSLATOR)
• C/C++
• Emscripten:(www.emscripten.org)
• Java
• Google Web Toolkit
• C#
2013 W3C HTML5 Day Conference
9
• CoffecScript, TypeScript, Dart

10.
자바스크립트 API 확장
•
Typed Array
• The need to have an efficient way to handle binary data in WebGL.
• A slab of memory with a typed view into it
• Like how arrays work in C.
• The JavaScript engine can pass the memory directly to native libraries
• Better than JavaScript arrays for passing data to WebGL and other APIs
dealing with binary data.
• Typed array views
Single-type arrays to a segment of an ArrayBuffer.
Views for all the usual numeric types
Float32Array, Float64Array, Int32Array and Uint8Array.
Special view Uint8ClampedArray
The pixel array type in Canvas's ImageData
2013 W3C HTML5 Day Conference
10
•
•
•
•
•

11.
자바스크립트 API 확장:TYPED ARRAY
JavaScript
Value: 123
Type: integer
Values
in
Array
[0]
[1]
[2]
[3]
[4]
[5]
…
[n-2]
[n-1]
Value: 123
Value: 123
Type: integer
Value: 123
Type: integer
…
Value: 123
Type: integer
[0]:123
[1]:123
[2]:123
[3]:123
[4]:123
[5]:123
…
[n-2]:123
[n-1]:123
11
Single
Value
Native

12.
멀티미디어 관련 API
•
웹GL
• 웹을 위한 OpenGL JavaScript API
•
웹오디오
• Low-Level Audio API
•
웹RTC/웹소켓
• Media Capture, and p2p connection
•
포인터 이벤트/게임패드 API
• Mouse and Touch Event
•
풀스크린 API
•
디바이스 API
2013 W3C HTML5 Day Conference
12
• 웹스토리지, 인덱스드 데이터베이스, 오프라인 웹앱
• 파일 API

13.
2013 W3C HTML5 Day Conference
13
HTML5 게임 엔진 동향

14.
HTML5 게임엔진
• DOM/CSS 기반 게임엔진
• Canvas 기반 게임엔진
2013 W3C HTML5 Day Conference
14
• WebGL 기반 게임엔진

15.
게임엔진
Native HTML5 게임엔진
•
•
•
•
•
•
Construct2
CocoonJS
ImpactJS
LimeJS
Cocos2d-HTML5
Cross-Platform HTML5 게임엔진
•
•
•
•
•
Unity
Unreal
Corona
GameSalad
Cocos2d-x
2013 W3C HTML5 Day Conference
15
•

16.
CONSTRUCT2
• https://www.scirra.com/construct2
• IDE 제공
2013 W3C HTML5 Day Conference
16
• 다양한 플랫폼을 위한 결과물 생성

17.
COCOONJS
• http://www.ludei.com/tech/cocoonjs
• Hybrid Apps의 PhoneGap과 유사한 역할
2013 W3C HTML5 Day Conference
17
• HTML5 게임은 Mobile App으로 변환시 사용

18.
IMPACTJS
• http://impactjs.com/
• JavaScript Game Engine
• Demo
2013 W3C HTML5 Day Conference
18
• Drop: http://impactjs.com/drop/
• Video: http://impactjs.com/impact-oniphone-ipad-ipod-touch

19.
LIMEJS
• http://www.limejs.com/
• JavaScript 기반 게임 엔진
• Demo
2013 W3C HTML5 Day Conference
19
• http://www.limejs.com/static/roundball/
index.html

20.
UNITY
• http://unity3d.com/
• Multi-Platform Game Engine
• Desktop, Mobile, Web
• HTML5: WebGL 지원 예정
2013 W3C HTML5 Day Conference
20
• Flash를 통해 웹 환경 지원

21.
UNREAL
• http://www.unrealengine.com/html5/
• 3D Game Engine
• Mozilla와 함께 HTML5 지원
2013 W3C HTML5 Day Conference
21
• ASM.JS + WebGL

22.
CORONA
• http://www.coronalabs.com/
• Lua 기반 게임엔진
• 모바일 멀티플랫폼 지원
• iOS, Android, Kindle, NOOK
2013 W3C HTML5 Day Conference
22
• Hybrid Apps 형태로 HTML5 지원 예정

23.
GAMESALAD
• http://gamesalad.com
• 모바일/PC/웹 지원
• iPhone, iPad, Mac, HTML5, Android
2013 W3C HTML5 Day Conference
23
• WYSIWYG 방식으로 2D 게임 개발

24.
2013 W3C HTML5 Day Conference
24
HTML5 게임엔진
COCOS2D-HTML5

25.
COCOS2D-HTML5, COCOS2D-X
•
Cocos2d-HTML5
• http://www.cocos2dx.org/projects/cocos2d-x/wiki/Cocos2dhtml5
• Javascript
•
Cocos2d-X
• C/C++ -> JavaScript
• www.cocos2d-x.org
•
From cocos2d-iPhone
•
Same JavaScript API
2013 W3C HTML5 Day Conference
25
• Cocos2d-X and Cocos2d-HTML5

26.
2013 W3C HTML5 Day Conference
26
(출처:www.cocos2d-x.org)

27.
SAMPLES
Cocos2d-HTML5 샘플
•
•
•
•
•
•
Hello World
Test cases
Template
MoonWarriors
Fruit Attack
Cocos2d-X 자바스크립트 샘플
•
•
•
•
•
CocosDragonJS
CrystalCraze
FruitAttack
Moon Warriors
WatermelonWithMe
2013 W3C HTML5 Day Conference
27
•

28.
2013 W3C HTML5 Day Conference
28
질의 응답