2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈

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

목차
• HTML5 기술 동향
• HTML5 게임엔진 동향

2013 W3C HTML5 Day Conference

2

• HTML5 게임엔진:Cocos2d-HTML5


3

HTML5 기술 동향

게임(멀티미디어) 관련 웹 기술
•

성능 부분
• 자바스크립트 해석기
• 실행방식:컴파일, 인터프리트, jit
• 자바스크립트 변환기
• C/C++ -> 자바스크립트 변환: Emscripten
• Asm.js
• 자바스크립트 바이트코드: 중간코드
• API 확장: Typed Array

• 쓰레기 수집기
멀티미디어 관련 API
•
•
•
•
•
•

웹GL
웹오디오
웹RTC/웹소켓
포인터 이벤트/게임패드 API
풀스크린 API
디바이스 API


4

•

웹의 성능
• HTML/CSS 파싱
• DOM

• 렌더링
• 자바스크립트
• 자바스크립트 실행
• 자바스크립트 API: XHR, etc.


5

• 네트워크

자바스크립트의 성능
•

자바스크립트 해석기
• 실행방식
• 인터프리트
• 컴파일: Javascript Bytecode 실행
• JIT 컴파일: 실행시간 중에 기계어 코드로 변환하여 실행
• Google Chrome의 V8
• 관련기술: Asm.js

•

쓰레기 수집기 (garbage collector)
• 쓰레기 수집: 불필요한 객체를 자동으로 회수


6

• 60 fps (16ms), 100 ms or more

자바스크립트의 성능 향상
• ASM.JS
• asmjs.org
• Subset of JavaScript
• 자바스크립트 해석기의 JIT 컴파일을 위한 자바스크립트 코드
• C/C++ -> 자바스크립트 변환시 성능 향상

• 주요 기능
• Implicitly typed
• Typed Array


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


자바스크립트 변환기
(TRANSLATOR)
• C/C++
• Emscripten:(www.emscripten.org)
• Java

• Google Web Toolkit
• C#


9

• CoffecScript, TypeScript, Dart

자바스크립트 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


10

•
•
•
•
•

자바스크립트 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

멀티미디어 관련 API
•

웹GL

• 웹을 위한 OpenGL JavaScript API
•

웹오디오
• Low-Level Audio API

•

웹RTC/웹소켓
• Media Capture, and p2p connection

•

포인터 이벤트/게임패드 API
• Mouse and Touch Event

•

풀스크린 API

•

디바이스 API


12

• 웹스토리지, 인덱스드 데이터베이스, 오프라인 웹앱
• 파일 API


13

HTML5 게임 엔진 동향

HTML5 게임엔진
• DOM/CSS 기반 게임엔진
• Canvas 기반 게임엔진


14

• WebGL 기반 게임엔진

게임엔진
Native HTML5 게임엔진
•
•
•
•
•
•

Construct2
CocoonJS
ImpactJS
LimeJS
Cocos2d-HTML5

Cross-Platform HTML5 게임엔진
•
•
•
•
•

Unity
Unreal
Corona
GameSalad
Cocos2d-x


15

•

CONSTRUCT2
• https://www.scirra.com/construct2
• IDE 제공


16

• 다양한 플랫폼을 위한 결과물 생성

COCOONJS
• http://www.ludei.com/tech/cocoonjs
• Hybrid Apps의 PhoneGap과 유사한 역할


17

• HTML5 게임은 Mobile App으로 변환시 사용

IMPACTJS
• http://impactjs.com/
• JavaScript Game Engine
• Demo


18

• Drop: http://impactjs.com/drop/
• Video: http://impactjs.com/impact-oniphone-ipad-ipod-touch

LIMEJS
• http://www.limejs.com/
• JavaScript 기반 게임 엔진
• Demo


19

• http://www.limejs.com/static/roundball/
index.html

UNITY
• http://unity3d.com/
• Multi-Platform Game Engine
• Desktop, Mobile, Web
• HTML5: WebGL 지원 예정


20

• Flash를 통해 웹 환경 지원

UNREAL
• http://www.unrealengine.com/html5/
• 3D Game Engine
• Mozilla와 함께 HTML5 지원


21

• ASM.JS + WebGL

CORONA
• http://www.coronalabs.com/
• Lua 기반 게임엔진
• 모바일 멀티플랫폼 지원
• iOS, Android, Kindle, NOOK


22

• Hybrid Apps 형태로 HTML5 지원 예정

GAMESALAD
• http://gamesalad.com
• 모바일/PC/웹 지원
• iPhone, iPad, Mac, HTML5, Android


23

• WYSIWYG 방식으로 2D 게임 개발


24

HTML5 게임엔진
COCOS2D-HTML5

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


25

• Cocos2d-X and Cocos2d-HTML5


26

(출처:www.cocos2d-x.org)

SAMPLES
Cocos2d-HTML5 샘플
•
•
•
•
•
•

Hello World
Test cases
Template
MoonWarriors
Fruit Attack

Cocos2d-X 자바스크립트 샘플
•
•
•
•
•

CocosDragonJS
CrystalCraze
FruitAttack
Moon Warriors
WatermelonWithMe


27

•


28

질의 응답

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈

Recommended

More Related Content

What's hot

What's hot(20)

Similar to 2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈

Similar to 2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈(20)

More from Changhwan Yi

More from Changhwan Yi(13)

Recently uploaded

Recently uploaded(7)

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈