HTML5 게임 기술의 개요
2013년 9월 24일
동국대학교 멀티미디어공학과 이창환 (yich@dongguk.edu)
목차
 기술
 게임엔진
관련 기술
게임(멀티미디어) 관련 웹 기술
 성능 부분
 자바스크립트 해석기
 실행방식:컴파일, 인터프리트, jit
 Asm.js
 쓰레기 수집기
 자바스크립트 변환기
 C/C++ -> 자바스크립트 변환: Emscri...
웹의 성능
 HTML/CSS 파싱
 DOM
 렌더링
 자바스크립트
 자바스크립트 해석(interpretation)
 자바스크립트 API: XHR, etc.
 네트워크
자바스크립트의 성능
 자바스크립트 해석기
 실행방식
 인터프리트
 컴파일: Javascript Bytecode 실행
 JIT 컴파일: 실행시간 중에 기계어 코드로 변환하여 실행
 Google Chrome의V8...
자바스크립트의 성능 향상
 ASM.JS
 asmjs.org
 Subset of JavaScript
 자바스크립트 해석기의 JIT 컴파일을 위한 자바스크립트 코드
 C/C++ -> 자바스크립트 변환시 성능 향상
...
자바스크립트 변환기 (translator)
 C/C++
 Emscripten:(www.emscripten.org)
 Java
 Google WebToolkit
 C#
 CoffecScript,TypeScrip...
멀티미디어 관련 API
 웹GL
 웹을 위한 OpenGL JavaScript API
 웹오디오
 Low-Level Audio API
 웹RTC/웹소켓
 Media Capture, and p2p connecti...
게임엔진
HTML5 게임엔진
 DOM/CSS 기반 게임엔진
 Canvas 기반 게임엔진
 WebGL 기반 게임엔진
게임엔진
 Native HTML5 게임엔진
 Cocos2d-HTML5
 Construct2
 CocoonJS
 ImpactJS
 LimeJS
 Cross-Platform HTML5 게임엔진
 Cocos2d...
Cocos2d-HTML5, Cocos2d-X
 http://www.cocos2d-x.org/projects/cocos2d-
x/wiki/Cocos2d-html5
 www.cocos2d-x.org
 From coco...
Construct2
 https://www.scirra.com/construct2
 IDE 제공
 다양한 플랫폼을 위한 결과물 생성
CocoonJS
 http://www.ludei.com/tech/cocoon
js
 Hybrid Apps의 PhoneGap과 유사
한 역할
 HTML5 게임은 Mobile App으로
변환시 사용
ImpactJS
 http://impactjs.com/
 JavaScript Game Engine
 Demo
 Drop: http://impactjs.com/drop/
 Video:
http://impactjs...
LimeJS
 http://www.limejs.com/
 JavaScript 기반 게임 엔진
 Demo
 http://www.limejs.com/static/roundball/
index.html
Unity
 http://unity3d.com/
 Multi-Platform Game Engine
 Desktop, Mobile,Web
 HTML5:WebGL 지원 예정
 Flash를 통해 웹 환경 지원
Unreal
 http://www.unrealengine.com/html5/
 3D Game Engine
 Mozilla와 함께 HTML5 지원
 ASM.JS +WebGL
Corona
 http://www.coronalabs.com/
 Lua 기반 게임엔진
 모바일 멀티플랫폼 지원
 iOS,Android, Kindle, NOOK
 Hybrid Apps 형태로 HTML5 지원 예정
GameSalad
 http://gamesalad.com
 모바일/PC/웹 지원
 iPhone, iPad, Mac, HTML5,Android
 WYSIWYG 방식으로 2D 게임 개발
Html5 게임 기술의 개요
Upcoming SlideShare
Loading in …5
×

Html5 게임 기술의 개요

1,306 views
1,077 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,306
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
1
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Html5 게임 기술의 개요

  1. 1. HTML5 게임 기술의 개요 2013년 9월 24일 동국대학교 멀티미디어공학과 이창환 (yich@dongguk.edu)
  2. 2. 목차  기술  게임엔진
  3. 3. 관련 기술
  4. 4. 게임(멀티미디어) 관련 웹 기술  성능 부분  자바스크립트 해석기  실행방식:컴파일, 인터프리트, jit  Asm.js  쓰레기 수집기  자바스크립트 변환기  C/C++ -> 자바스크립트 변환: Emscripten  멀티미디어 관련 API  웹GL  웹오디오  웹RTC/웹소켓  포인터 이벤트/게임패드 API  디바이스 API
  5. 5. 웹의 성능  HTML/CSS 파싱  DOM  렌더링  자바스크립트  자바스크립트 해석(interpretation)  자바스크립트 API: XHR, etc.  네트워크
  6. 6. 자바스크립트의 성능  자바스크립트 해석기  실행방식  인터프리트  컴파일: Javascript Bytecode 실행  JIT 컴파일: 실행시간 중에 기계어 코드로 변환하여 실행  Google Chrome의V8  관련기술:Asm.js  쓰레기 수집기 (garbage collector)  쓰레기 수집: 불필요한 객체를 자동으로 회수  60 fps (16ms), 100 ms or more
  7. 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 }
  8. 8. 자바스크립트 변환기 (translator)  C/C++  Emscripten:(www.emscripten.org)  Java  Google WebToolkit  C#  CoffecScript,TypeScript, Dart
  9. 9. 멀티미디어 관련 API  웹GL  웹을 위한 OpenGL JavaScript API  웹오디오  Low-Level Audio API  웹RTC/웹소켓  Media Capture, and p2p connection  포인터 이벤트/게임패드 API  Mouse and Touch Event  디바이스 API
  10. 10. 게임엔진
  11. 11. HTML5 게임엔진  DOM/CSS 기반 게임엔진  Canvas 기반 게임엔진  WebGL 기반 게임엔진
  12. 12. 게임엔진  Native HTML5 게임엔진  Cocos2d-HTML5  Construct2  CocoonJS  ImpactJS  LimeJS  Cross-Platform HTML5 게임엔진  Cocos2d-x  Unity  Unreal  Corona  GameSalad
  13. 13. 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
  14. 14. Construct2  https://www.scirra.com/construct2  IDE 제공  다양한 플랫폼을 위한 결과물 생성
  15. 15. CocoonJS  http://www.ludei.com/tech/cocoon js  Hybrid Apps의 PhoneGap과 유사 한 역할  HTML5 게임은 Mobile App으로 변환시 사용
  16. 16. ImpactJS  http://impactjs.com/  JavaScript Game Engine  Demo  Drop: http://impactjs.com/drop/  Video: http://impactjs.com/impact-on- iphone-ipad-ipod-touch
  17. 17. LimeJS  http://www.limejs.com/  JavaScript 기반 게임 엔진  Demo  http://www.limejs.com/static/roundball/ index.html
  18. 18. Unity  http://unity3d.com/  Multi-Platform Game Engine  Desktop, Mobile,Web  HTML5:WebGL 지원 예정  Flash를 통해 웹 환경 지원
  19. 19. Unreal  http://www.unrealengine.com/html5/  3D Game Engine  Mozilla와 함께 HTML5 지원  ASM.JS +WebGL
  20. 20. Corona  http://www.coronalabs.com/  Lua 기반 게임엔진  모바일 멀티플랫폼 지원  iOS,Android, Kindle, NOOK  Hybrid Apps 형태로 HTML5 지원 예정
  21. 21. GameSalad  http://gamesalad.com  모바일/PC/웹 지원  iPhone, iPad, Mac, HTML5,Android  WYSIWYG 방식으로 2D 게임 개발

×