HTML5에서의 게임과 관련된 기술 및 게임엔진 개요 (2013-08-29, 수정:2013-09-24)

1. HTML5 게임 기술의 개요
2013년 9월 24일
동국대학교 멀티미디어공학과 이창환 (yich@dongguk.edu)

2. 목차
 기술
 게임엔진

3. 관련 기술

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

5. 웹의 성능
 HTML/CSS 파싱
 DOM
 렌더링
 자바스크립트
 자바스크립트 해석(interpretation)
 자바스크립트 API: XHR, etc.
 네트워크

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

7. 자바스크립트의 성능 향상
 ASM.JS
 asmjs.org
 Subset of JavaScript
 자바스크립트 해석기의 JIT 컴파일을 위한 자바스크립트 코드
 C/C++ -> 자바스크립트 변환시 성능 향상
 주요 기능
 Implicitly typed
 Typed Array
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
}

9. 자바스크립트 변환기 (translator)
 C/C++
 Emscripten:(www.emscripten.org)
 Java
 Google WebToolkit
 C#
 CoffecScript,TypeScript, Dart

10. 멀티미디어 관련 API
 웹GL
 웹을 위한 OpenGL JavaScript API
 웹오디오
 Low-Level Audio API
 웹RTC/웹소켓
 Media Capture, and p2p connection
 포인터 이벤트/게임패드 API
 Mouse and Touch Event
 디바이스 API

11. 게임엔진

12. HTML5 게임엔진
 DOM/CSS 기반 게임엔진
 Canvas 기반 게임엔진
 WebGL 기반 게임엔진

13. 게임엔진
 Native HTML5 게임엔진
 Cocos2d-HTML5
 Construct2
 CocoonJS
 ImpactJS
 LimeJS
 Cross-Platform HTML5 게임엔진
 Cocos2d-x
 Unity
 Unreal
 Corona
 GameSalad

14. Cocos2d-HTML5, Cocos2d-X
 http://www.cocos2d-x.org/projects/cocos2d-
x/wiki/Cocos2d-html5
 www.cocos2d-x.org
 From cocos2d-iphone
 Cocos2d-HTML5
 Javascript
 Cocos2d-X
 C/C++ -> JavaScript
 Same JavaScript API
 Demo
 MoonWarriors: http://www.cocos2d-
x.org/MoonWarriors/index.html

15. Construct2
 https://www.scirra.com/construct2
 IDE 제공
 다양한 플랫폼을 위한 결과물 생성

16. CocoonJS
 http://www.ludei.com/tech/cocoon
js
 Hybrid Apps의 PhoneGap과 유사
한 역할
 HTML5 게임은 Mobile App으로
변환시 사용

17. ImpactJS
 http://impactjs.com/
 JavaScript Game Engine
 Demo
 Drop: http://impactjs.com/drop/
 Video:
http://impactjs.com/impact-on-
iphone-ipad-ipod-touch

18. LimeJS
 http://www.limejs.com/
 JavaScript 기반 게임 엔진
 Demo
 http://www.limejs.com/static/roundball/
index.html

19. Unity
 http://unity3d.com/
 Multi-Platform Game Engine
 Desktop, Mobile,Web
 HTML5:WebGL 지원 예정
 Flash를 통해 웹 환경 지원

20. Unreal
 http://www.unrealengine.com/html5/
 3D Game Engine
 Mozilla와 함께 HTML5 지원
 ASM.JS +WebGL

21. Corona
 http://www.coronalabs.com/
 Lua 기반 게임엔진
 모바일 멀티플랫폼 지원
 iOS,Android, Kindle, NOOK
 Hybrid Apps 형태로 HTML5 지원 예정

22. GameSalad
 http://gamesalad.com
 모바일/PC/웹 지원
 iPhone, iPad, Mac, HTML5,Android
 WYSIWYG 방식으로 2D 게임 개발