2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
4 likes1,804 views
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈 발표자료입니다.
![자바스크립트 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](https://image.slidesharecdn.com/html5gameappr2-131031001006-phpapp01/85/2013-W3C-HTML5-Day-Conferences-HTML5-Game-App-11-320.jpg)
More Related Content
![[리뷰] 풀스택 개발자를 위한 MEAM 스택 입문](https://cdn.slidesharecdn.com/ss_thumbnails/mean-re-151003142901-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
![[Korea Linux Forum] Implementing web based online multiplayer tetris with Ope...](https://cdn.slidesharecdn.com/ss_thumbnails/implementingwebbasedonlinemultiplayertetris-141111200036-conversion-gate02-thumbnail.jpg?width=560&fit=bounds)
Similar to 2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈 (20)
![[NDC17] Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/ndc17phdivertechpostmortempubslideshare-170511112448-thumbnail.jpg?width=560&fit=bounds)
![[111217 아꿈사연말모임] 웹소켓과온라인게임](https://cdn.slidesharecdn.com/ss_thumbnails/111217-111219001615-phpapp01-thumbnail.jpg?width=560&fit=bounds)
![[152] 웹브라우저 감옥에서 살아남기](https://cdn.slidesharecdn.com/ss_thumbnails/152-150914023446-lva1-app6892-thumbnail.jpg?width=560&fit=bounds)
![[IGC 2017] 넥스트플로어 김영수 - Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/igc2017nfptv2s-170905074654-thumbnail.jpg?width=560&fit=bounds)
![[IGC2017] Protocol:hyperspace Diver 개발 포스트모템](https://cdn.slidesharecdn.com/ss_thumbnails/igc2017nfptpublicslides-170831135138-thumbnail.jpg?width=560&fit=bounds)
2013 W3C HTML5 Day Conferences:HTML5 Game App 개발 및 이슈
- 1. HTML5 GAME APP 개발 및 이슈 2013-10-31 동국대학교 멀티미디어공학과 이창환 ([email protected])
- 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 질의 응답