Upload
chang-w-doh
View
358
Download
4
Tags:
Embed Size (px)
DESCRIPTION
TTA Standard Strategy Seminar on April 20th, 2012 - Required technologies of Game Engine. - HTML5 Coverage - Cocos 2D
Citation preview
Who am I?
• ChangWook Doh
• @ Incross CO.LTD. – Cross-Platform – HTML5 Solution
• Email – [email protected]
• Twitter – @cwdoh
① Cross-Platform ② Game Environment (Console)
HTML5 for developing a game • The core functionality typically provided by a game engine incl
udes – Rendering engine for 2D or 3D graphics Canvas – Physics engine or collision detection – Sound HTML5 Audio & Web Audio – Scripting – Animation RequestAnimationFrame – Artificial intelligence – Networking Web Socket – Streaming – Memory management – Threading Web Workers – Localization support – Scene graph – Input Pointer Lock – Storage LocalStorage & SessionStorage – Packaging App Cache
√ √
√
http://en.wikipedia.org/wiki/Game_engine
<canvas>Your Browser doesn’t support HTML5 canvas tag.</canvas>
Graphics
http://kalacheva.livejournal.com/191914.html#cutid1
Canvas
• 자바스크립트 기반 드로잉을 위한 HTML5 Element – HTML 페이지 내에 렌더링 영역 설정
– 자바스크립트를 통해 동적으로 그래픽스 표현 • 2D - Canvas 2D APIs • 3D - WebGL
– canvas2d = canvas.getContext("2d"); • 캔버스 2D 그래픽 컨텍스트
– Path, Curve, Circle, Rectangle – Color & Styles : Color, Fill-Pattern – Transform – Text – Image, Pixel Manupulation
<canvas id=“myCanvas" style="border: none;" width="500" height="500"></canvas>
Canvas
• Continued…
– webgl = canvas.getContext("webgl"); • OpenGL ES 2.0 기반 API • Not W3C Specification! But Khronos Group Specification.
http://www.cuttherope.ie
Canvas 2D Game
http://skid.gamagio.com
WebGL Game
Canvas 2D vs WebGL
• Canvas 2D is easier to use! – Path, Shapes – Color & Style – Transform – Image & Pixels – Compositing
• WebGL is more powerful! – Higher Performance – Customizable Rendering Pipeline – Supporting 3D!
Canvas (2D)
Text API
WebGL (3D)
http://caniuse.com/#search=canvas
<audio/>
http://allposters.com/-sp/Steez-Headphone-Monkey-Posters_i7939864_.htm
HTML5 Audio
• Audio를 출력하기 위한 HTML5 Element – HTML 페이지 내에 오디오 삽입
– 오디오 포맷의 호환성 문제 존재 • W3C 표준 규격이나 브라우저 별 지원 포맷이 상이
<audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio>
Browser MP3 Wav Ogg
Internet Explorer 9 O X X
Firefox 4.0 X O O
Google Chrome 6 O O O
Apple Safari 5 O O X
Opera 10.6 X O O
HTML5 Audio
• Audio 출력을 위한 별도의 플러그인(Flash 등)이 불필요 – <audio>Very useful to play simple game sound</audio>
• Limitations – 오디오 출력을 위한 필터 적용 불가 – Raw audio data에 대한 접근 불가 – Positional & Directional Sound 불가
Audio Data API
• <Audio/>의 확장을 위한 API – 자바스크립트로 사운드의 생성/조작할 수 있는 기능 제공
• Media raw data에 대한 읽기/쓰기 기능 제공 • Mozilla Specification
– 다양한 오디오 효과 및 기능 구현이 가능 • Audio Visualizations • Realtime Audio Effects • Generating and Playing Audio • Beat Detection • Writing Audio from JavaScript, Digital Signal Processing
– Demo https://wiki.mozilla.org/Audio_Data_API#Working_Audio_Data_Demos
Web Audio API
• New Audio API – Raw data access, Mixing, Filter 등 Audio API 제공
• Raw Data에 직접 접근하는 Audio Data API에 비해 네이티브에서 지원하는 고수준의 오디오 엔진 기능과 JavaScript API 제공
• W3C Working Draft 단계
– Demo http://www.html5rocks.com/en/tutorials/webaudio/games/ http://chromium.googlecode.com/svn/trunk/samples/audio/index.html
Audio Data API vs. Web Audio API
• 유사점 – HTML5 audio 요소의 확장 – 오디오 출력의 제어 기능 – 사운드 소스에 대한 로딩 & 조작
• 차이점 – Audio Data API
• Javascript를 통해 raw data에 대한 접근을 수행
– Web Audio • Mixing, Filter, Effect 등을 Native(브라우저)의 구현 사항으로 정의하고 이에 대한 API 추가
Network http://tnea.info/book/export/html/11
Connectivity
• 전통적 웹 환경의 한계 – Request & Response Model
• HTTP – 응답이 완료된 상태에서는 새로운 정보의 갱신이 불가능
• Representation – 요청 HTML 페이지 단위 응답
– Semi Real-time Web • 2005년 Ajax
– 보다 다이나믹해진 웹 서비스 모델 제시 » XML Request -> 데이터 응답 데이터 처리
• Comet – Background HTTP Connection을 통해 Event의 발생 시 응답
• Limitation – HTTP Overhead Low latency 서비스에 부적합
Web Socket
• 이제야 표준화가 이루어지는 근본적인 양방향 통신 방법 – JavaScript에서 활용 가능한 Web 기반의 Socket API
• 기존 Comet, Ajax에 비해 근본적인 해결책 • message, open, close 이벤트에 기반한 손쉬운 개발 방법
• Web Socket 규격의 TCP 기반 서버 구성 필요 – pywebsocket , phpwebsocket, jWebSocket 등의 오픈소스 활용
<script> var wSocket = new WebSocket("ws:myserver/pingpong"); wSocket.onmessage = function(e){ send(); } wSocket.onopen = function(e){ alert("서버 연결 완료"); } wSocket.onclose = function(e){ alert("서버 연결 종료"); } function send(){ //서버로 데이터를 전송하는 메서드 wSocket.send(“Ping"); } </script>
Server Sent Event
• Server Sent Event(SSE) – HTTP Server Push Protocol Concept
• 모바일에서의 APNS, C2DM과 유사 • Comet, Ajax의 대안 • 단방향 통신 모델(서버 브라우저)
var source = new EventSource(’in_game_event.php'); source.addEventListener('message', function(e) { console.log(e.data); }, false); source.addEventListener(’gift', function(e) { // call gift process }, false); source.addEventListener(’quest', function(e) { }, false); source.addEventListener('error', function(e) { if (e.eventPhase == EventSource.CLOSED) { } }, false);
HTML5 시장 접근 전략
• 구글의 웹 플랫폼/서비스 리더쉽 강화 전략 – Chrome 브라우저에서 새로운 기술들(Web Worker, Web Audio,
FullScreen, WebGL, WebSocket과 WebRTC 등)에 대한 적극적인 공략
– "(크롬에서 선도 기능들을 지원하여) 견고한 웹게임 서비스 생태계가 구축되도록 하는 것”
• 게임 엔진 개발사들의 HTML5 게임 마켓 쉐어 확대 전략 – “HTML5 브라우저 단편화 회피와 모바일 영역 확장” – 하이브리드 방식을 통해 성능 한계점 해결 – 상품 개발 지원 수익 창출
• 페이스북과 모바일 오픈마켓을 염두에 둔 개발 퍼블리싱 모델
Store & Marketplace
• Chrome Web Store
• Windows 8 Store • Mozilla App Marketplace • Apple App Store • Google Android Market • …
HTML5 Game Solutions • Ludei(http://www.ludei.com) �
– CocoonJS : JS 기반����������� ������������������ 게임����������� ������������������ 엔진, OpenSource 기반
– CocoonJS Launcher :����������� ������������������ Hybrid App Launcher
• cocos2D-x(http://www.cocos2d-x.org) �– cocos2D의����������� ������������������ C/C++ 기반����������� ������������������ 크로스플랫폼����������� ������������������ 버전
– HTML5와����������� ������������������ 관련하여����������� ������������������ 모바일����������� ������������������ 디바이스에서����������� ������������������ 하드웨어����������� ������������������ 가속을����������� ������������������ 위한����������� ������������������ 프로젝트����������� ������������������ cocos2d-html5를����������� ������������������ 진행����������� ������������������ 중
• Yoyogames(http://www.yoyogames)�– Game Maker(PC, iOS, Android, HTML5 지원)
– 아마추어도����������� ������������������ 대상으로����������� ������������������ 삼고����������� ������������������ 있어����������� ������������������ 프로그래밍이����������� ������������������ 없이도����������� ������������������ 상당����������� ������������������ 부분을����������� ������������������ 개발����������� ������������������ 가능�
HTML5 Game Solutions
• Ubiquitous����������� ������������������ Entertainment(http://www.uei.co.jp) �– Web����������� ������������������ 기반의����������� ������������������ 게임����������� ������������������ 엔진����������� ������������������ Enchant.JS(DOM & Canvas)
– 9leap.net 웹����������� ������������������ 미니����������� ������������������ 게임����������� ������������������ 위주의����������� ������������������ 컨텐츠����������� ������������������ 공급
• spaceport.io(http://spaceport.io) �– 하이브리드����������� ������������������ 방식으로����������� ������������������ 웹����������� ������������������ 게임����������� ������������������ 엔진
– 하이브리드(iOS, Android), 플래시, HTML5����������� ������������������ 지원
– HTML5 실행����������� ������������������ 성능����������� ������������������ 중심����������� ������������������ 솔루션�
Node.JS & Now.JS
• Node.JS – Javascript 기반의 Web Server Engine
• V8 JavaScript Engine • Event Driven & Non-Blocking I/O Model • C/C++ Add-on Support
• Now JS – Node JS 서브 모듈
• Remote API처럼 서버/클라이언트 간 모듈의 직접 호출이 가능 • Now 객체를 통해 서버/클라이언트의 변수 및 함수의 자동 싱크 • 프로토콜 설계 및 개발 과정을 배제하여 개발의 효율성이 높음
http://www.w3schools.com/browsers/browsers_stats.asp
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
03 02 01 12 11 10 09 08 07 06 05 04 03 02 01 12 11 10 09 08 07 06 05 04 03 02 01 12 11 10 09 08 07 06 05 04 03 02 01 12 11 10 09 08 07 06 05 04 03 02 01
2012 2011 2010 2009 2008
브라우저별 점유율 추이
Internet Explorer
Firefox
Chrome
Safari
Opera
http://www.w3schools.com/browsers/browsers_chrome.asp
0%
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%
03 02
01 12
11 10
2012
2011
Mar
ket
Shar
e
구글 크롬 브라우저의 버전별 사용현황
Older
Version 14
Version 15
Version 16
Version 17
Version 18
Version 19
Sergey Mavrody "Sergey's HTML5 & CSS3 Quick Reference. 2nd Edition". Belisso Corp., 2012. ISBN 978-0983386728
HTML5 Browser Fragmentation • 기능/성능 면에서 브라우저 단편화 요소 존재 • 정보 서비스 위주의 환경이 아닌 게임에서는 악영향 요소
Mobile HTML5 Performance Fragmentation • Major Market Share Device 성능이 게임의 최저 요구 수준인 20 FPS 이하
HTML5 Game Engine Framework
HTML5 Game Engine
HTML5 Renderer HTML5 Hybrid Renderer
HTML5 Scene Graph Engine
Physics/ Collision Map UI Animation
Particle Effect Sprite
WebGL Interface
Canvas Interface Native Renderer
JS-Native Rendering Interface
RSC Loader Media
Pure HTML5 Game
HTML5 Game Engine
HTML5 Renderer
HTML5 Scene Graph Engine
Game Logics & Resources
Hybrid HTML5 App Game
HTML5 Game Engine
HTML5 Scene Graph Engine
Game Logics & Resources
HTML5 Hybrid Renderer
HTML5 브라우저 구동 게임 • 순수 HTML5 기반의 게임 구동 • 서비스 대상
• Facebook • Google WebStore • 웹게임 포탈
하이브리드 앱 게임 • 하이브리드 앱 패키징 • H/W 렌더링 가속 • 서비스 대상
• Apple AppStore • Android Market
N-Screen 대응 • 순수 HTML5 기반의 게임 • Android • iOS
HTML5 Game Client
Web Network Game Server HTML5 Game Client
Client Side Javascript
Node.JS + Now.JS
Client Logic
HTML5 Game Engine
Server Side JavaScript
Server Logic
Server Logic
… Server Logic
… Client Logic
JavaScript code Remote API Call Auto Data Sync.
Real-time Network Game
Most Easy! 웹기반 네트워크 게임용 Client-Server 개발 환경 • Node.JS & Now.JS
• Client/Server Side 개발 언어의 JavaScript 일원화 • Remote API 및 Data Auto Sharing Protocol 통신 모델 불필요 • 브라우저의 네트워크 지원 방식에 무관한 구현
Web Network Game Server
HTML5 Game Client
JavaScript Interfacing
• C/S Network Cross-Platform Solution – Remote API call & Auto Data Sync.
HTML5 Network Game
case study : cocos2d
• Open Source Project – Scene-Graph 기반 2D game framework – Python(cocos2D) ObjectiveC(cocos2d-iphone) Native C/C++(
cocos2d-x) HTML5(cocos2d-html5)
• Large & Active Communities