Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML5 GAME APP
개발 및 이슈
2013-10-31
동국대학교 멀티미디어공학과 이창환 (YICH@DONGGUK.EDU)
목차
• HTML5 기술 동향
• HTML5 게임엔진 동향

2013 W3C HTML5 Day Conference

2

• HTML5 게임엔진:Cocos2d-HTML5
2013 W3C HTML5 Day Conference

3

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

성능 부분
• 자바스크립트 해석기
• 실행방식:컴파일, 인터프리트, jit
• 자바스크립트 변환기
• C/C++ -> 자바스크립트 변환: Emscripten
• Asm.js
• 자바...
웹의 성능
• HTML/CSS 파싱
• DOM

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

2013 W3C HTML5 Day Conference

5

• 네트워크
자바스크립트의 성능
•

자바스크립트 해석기
• 실행방식
• 인터프리트
• 컴파일: Javascript Bytecode 실행
• JIT 컴파일: 실행시간 중에 기계어 코드로 변환하여 실행
• Google Chrome의 ...
자바스크립트의 성능 향상
• ASM.JS
• asmjs.org
• Subset of JavaScript
• 자바스크립트 해석기의 JIT 컴파일을 위한 자바스크립트 코드
• C/C++ -> 자바스크립트 변환시 성능 향상
...
8

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

• Google Web Toolkit
• C#

2013 W3C HTML5 Day Co...
자바스크립트 API 확장
•

Typed Array
• The need to have an efficient way to handle binary data in WebGL.
• A slab of memory with a...
자바스크립트 API 확장:TYPED ARRAY
JavaScript
Value: 123
Type: integer

Values
in
Array

[0]
[1]
[2]
[3]
[4]
[5]
…
[n-2]
[n-1]

Val...
멀티미디어 관련 API
•

웹GL

• 웹을 위한 OpenGL JavaScript API
•

웹오디오
• Low-Level Audio API

•

웹RTC/웹소켓
• Media Capture, and p2p con...
2013 W3C HTML5 Day Conference

13

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

2013 W3C HTML5 Day Conference

14

• WebGL 기반 게임엔진
게임엔진
Native HTML5 게임엔진
•
•
•
•
•
•

Construct2
CocoonJS
ImpactJS
LimeJS
Cocos2d-HTML5

Cross-Platform HTML5 게임엔진
•
•
•
•
•...
CONSTRUCT2
• https://www.scirra.com/construct2
• IDE 제공

2013 W3C HTML5 Day Conference

16

• 다양한 플랫폼을 위한 결과물 생성
COCOONJS
• http://www.ludei.com/tech/cocoonjs
• Hybrid Apps의 PhoneGap과 유사한 역할

2013 W3C HTML5 Day Conference

17

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

2013 W3C HTML5 Day Conference

18

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

2013 W3C HTML5 Day Conference

19

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

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

2013 W3C HTML5 Day Conference

21

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

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

2013 W3C HTML5 Day Conference

23

• W...
2013 W3C HTML5 Day Conference

24

HTML5 게임엔진
COCOS2D-HTML5
COCOS2D-HTML5, COCOS2D-X
•

Cocos2d-HTML5
• http://www.cocos2dx.org/projects/cocos2d-x/wiki/Cocos2dhtml5
• Javascript

•

...
2013 W3C HTML5 Day Conference

26

(출처:www.cocos2d-x.org)
SAMPLES
Cocos2d-HTML5 샘플
•
•
•
•
•
•

Hello World
Test cases
Template
MoonWarriors
Fruit Attack

Cocos2d-X 자바스크립트 샘플
•
•
•...
2013 W3C HTML5 Day Conference

28

질의 응답
Upcoming SlideShare
Loading in …5
×

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

1,353 views

Published on

2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈 발표자료입니다.

Published in: Technology
  • Be the first to comment

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

  1. 1. HTML5 GAME APP 개발 및 이슈 2013-10-31 동국대학교 멀티미디어공학과 이창환 (YICH@DONGGUK.EDU)
  2. 2. 목차 • HTML5 기술 동향 • HTML5 게임엔진 동향 2013 W3C HTML5 Day Conference 2 • HTML5 게임엔진:Cocos2d-HTML5
  3. 3. 2013 W3C HTML5 Day Conference 3 HTML5 기술 동향
  4. 4. 게임(멀티미디어) 관련 웹 기술 • 성능 부분 • 자바스크립트 해석기 • 실행방식:컴파일, 인터프리트, jit • 자바스크립트 변환기 • C/C++ -> 자바스크립트 변환: Emscripten • Asm.js • 자바스크립트 바이트코드: 중간코드 • API 확장: Typed Array • 쓰레기 수집기 멀티미디어 관련 API • • • • • • 웹GL 웹오디오 웹RTC/웹소켓 포인터 이벤트/게임패드 API 풀스크린 API 디바이스 API 2013 W3C HTML5 Day Conference 4 •
  5. 5. 웹의 성능 • HTML/CSS 파싱 • DOM • 렌더링 • 자바스크립트 • 자바스크립트 실행 • 자바스크립트 API: XHR, etc. 2013 W3C HTML5 Day Conference 5 • 네트워크
  6. 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. 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. 8 2013 W3C HTML5 Day Conference
  9. 9. 자바스크립트 변환기 (TRANSLATOR) • C/C++ • Emscripten:(www.emscripten.org) • Java • Google Web Toolkit • C# 2013 W3C HTML5 Day Conference 9 • CoffecScript, TypeScript, Dart
  10. 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. 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. 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. 13. 2013 W3C HTML5 Day Conference 13 HTML5 게임 엔진 동향
  14. 14. HTML5 게임엔진 • DOM/CSS 기반 게임엔진 • Canvas 기반 게임엔진 2013 W3C HTML5 Day Conference 14 • WebGL 기반 게임엔진
  15. 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. 16. CONSTRUCT2 • https://www.scirra.com/construct2 • IDE 제공 2013 W3C HTML5 Day Conference 16 • 다양한 플랫폼을 위한 결과물 생성
  17. 17. COCOONJS • http://www.ludei.com/tech/cocoonjs • Hybrid Apps의 PhoneGap과 유사한 역할 2013 W3C HTML5 Day Conference 17 • HTML5 게임은 Mobile App으로 변환시 사용
  18. 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. 19. LIMEJS • http://www.limejs.com/ • JavaScript 기반 게임 엔진 • Demo 2013 W3C HTML5 Day Conference 19 • http://www.limejs.com/static/roundball/ index.html
  20. 20. UNITY • http://unity3d.com/ • Multi-Platform Game Engine • Desktop, Mobile, Web • HTML5: WebGL 지원 예정 2013 W3C HTML5 Day Conference 20 • Flash를 통해 웹 환경 지원
  21. 21. UNREAL • http://www.unrealengine.com/html5/ • 3D Game Engine • Mozilla와 함께 HTML5 지원 2013 W3C HTML5 Day Conference 21 • ASM.JS + WebGL
  22. 22. CORONA • http://www.coronalabs.com/ • Lua 기반 게임엔진 • 모바일 멀티플랫폼 지원 • iOS, Android, Kindle, NOOK 2013 W3C HTML5 Day Conference 22 • Hybrid Apps 형태로 HTML5 지원 예정
  23. 23. GAMESALAD • http://gamesalad.com • 모바일/PC/웹 지원 • iPhone, iPad, Mac, HTML5, Android 2013 W3C HTML5 Day Conference 23 • WYSIWYG 방식으로 2D 게임 개발
  24. 24. 2013 W3C HTML5 Day Conference 24 HTML5 게임엔진 COCOS2D-HTML5
  25. 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. 26. 2013 W3C HTML5 Day Conference 26 (출처:www.cocos2d-x.org)
  27. 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. 28. 2013 W3C HTML5 Day Conference 28 질의 응답

×