Who am I?
•  ChangWook Doh
•  @ Incross CO.LTD.
–  Cross-Platform
–  HTML5 Solution
•  Email
–  changwook.doh@gmail.com
• ...
①  Cross-Platform
②  Game Environment (Console)
HTML5 for developing a game
•  The core functionality typically provided by a game engine incl
udes 
–  Rendering engine f...
<canvas>Your Browser doesn’t support HTML5 canvas tag.</canvas>
Graphics
http://kalacheva.livejournal.com/191914.html#cuti...
Canvas
•  자바스크립트 기반 드로잉을 위한 HTML5 Element
–  HTML 페이지 내에 렌더링 영역 설정
–  자바스크립트를 통해 동적으로 그래픽스 표현
•  2D - Canvas 2D APIs
•  3D...
Canvas
•  Continued…
–  webgl = canvas.getContext("webgl");
•  OpenGL ES 2.0 기반 API
•  Not W3C Specification! But Khronos ...
Canvas 2D vs WebGL
•  Canvas 2D is easier to use!
–  Path, Shapes
–  Color & Style
–  Transform
–  Image & Pixels
–  Compo...
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 표준 규격이나 브라우저 별 지원 포맷이 상이
<au...
HTML5 Audio
•  Audio 출력을 위한 별도의 플러그인(Flash 등)이 불필요
–  <audio>Very useful to play simple game sound</audio>
•  Limitations
...
Audio Data API
•  <Audio/>의 확장을 위한 API
–  자바스크립트로 사운드의 생성/조작할 수 있는 기능 제공
•  Media raw data에 대한 읽기/쓰기 기능 제공
•  Mozilla Spec...
Web Audio API
•  New Audio API
–  Raw data access, Mixing, Filter 등 Audio API 제공
•  Raw Data에 직접 접근하는 Audio Data API에 비해 네...
Audio Data API vs. Web Audio API
•  유사점
–  HTML5 audio 요소의 확장
–  오디오 출력의 제어 기능
–  사운드 소스에 대한 로딩 & 조작 
•  차이점
–  Audio Data...
Network
http://tnea.info/book/export/html/11
Connectivity
•  전통적 웹 환경의 한계
–  Request & Response Model
•  HTTP
–  응답이 완료된 상태에서는 새로운 정보의 갱신이 불가능
•  Representation
–  요청 ...
Web Socket
•  이제야 표준화가 이루어지는 근본적인 양방향 통신 방법
–  JavaScript에서 활용 가능한 Web 기반의 Socket API
•  기존 Comet, Ajax에 비해 근본적인 해결책
•  me...
Server Sent Event
•  Server Sent Event(SSE)
–  HTTP Server Push Protocol Concept
•  모바일에서의 APNS, C2DM과 유사
•  Comet, Ajax의 ...
HTML5 시장 접근 전략
•  구글의 웹 플랫폼/서비스 리더쉽 강화 전략
–  Chrome 브라우저에서 새로운 기술들(Web Worker, Web Audio,
FullScreen, WebGL, WebSocket과 We...
Store & Marketplace
•  Chrome Web Store

•  Windows 8 Store
•  Mozilla App Marketplace
•  Apple App Store
•  Google Androi...
HTML5 Game Solutions
•  Ludei(http://www.ludei.com)
–  CocoonJS : JS 기반
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Game with HTML5 to N-Screen
Upcoming SlideShare
Loading in...5
×

Game with HTML5 to N-Screen

458

Published on

TTA Standard Strategy Seminar on April 20th, 2012
- Required technologies of Game Engine.
- HTML5 Coverage
- Cocos 2D

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

No Downloads
Views
Total Views
458
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
5
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Game with HTML5 to N-Screen

  1. 1. Who am I? •  ChangWook Doh •  @ Incross CO.LTD. –  Cross-Platform –  HTML5 Solution •  Email –  changwook.doh@gmail.com •  Twitter –  @cwdoh
  2. 2. ①  Cross-Platform ②  Game Environment (Console)
  3. 3. 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
  4. 4. <canvas>Your Browser doesn’t support HTML5 canvas tag.</canvas> Graphics http://kalacheva.livejournal.com/191914.html#cutid1
  5. 5. 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>
  6. 6. 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
  7. 7. 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!
  8. 8. Canvas (2D) Text API WebGL (3D) http://caniuse.com/#search=canvas
  9. 9. <audio/> http://allposters.com/-sp/Steez-Headphone-Monkey-Posters_i7939864_.htm
  10. 10. 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
  11. 11. HTML5 Audio •  Audio 출력을 위한 별도의 플러그인(Flash 등)이 불필요 –  <audio>Very useful to play simple game sound</audio> •  Limitations –  오디오 출력을 위한 필터 적용 불가 –  Raw audio data에 대한 접근 불가 –  Positional & Directional Sound 불가
  12. 12. 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
  13. 13. 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
  14. 14. Audio Data API vs. Web Audio API •  유사점 –  HTML5 audio 요소의 확장 –  오디오 출력의 제어 기능 –  사운드 소스에 대한 로딩 & 조작 •  차이점 –  Audio Data API •  Javascript를 통해 raw data에 대한 접근을 수행 –  Web Audio •  Mixing, Filter, Effect 등을 Native(브라우저)의 구현 사항으로 정의하 고 이에 대한 API 추가
  15. 15. Network http://tnea.info/book/export/html/11
  16. 16. 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 서비스에 부적합
  17. 17. 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>
  18. 18. 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);
  19. 19. HTML5 시장 접근 전략 •  구글의 웹 플랫폼/서비스 리더쉽 강화 전략 –  Chrome 브라우저에서 새로운 기술들(Web Worker, Web Audio, FullScreen, WebGL, WebSocket과 WebRTC 등)에 대한 적극적인 공략 –  "(크롬에서 선도 기능들을 지원하여) 견고한 웹게임 서비스 생태 계가 구축되도록 하는 것” •  게임 엔진 개발사들의 HTML5 게임 마켓 쉐어 확대 전략 –  “HTML5 브라우저 단편화 회피와 모바일 영역 확장” –  하이브리드 방식을 통해 성능 한계점 해결 –  상품 개발 지원  수익 창출 •  페이스북과 모바일 오픈마켓을 염두에 둔 개발  퍼블리싱 모델
  20. 20. Store & Marketplace •  Chrome Web Store •  Windows 8 Store •  Mozilla App Marketplace •  Apple App Store •  Google Android Market •  …
  21. 21. HTML5 Game Solutions •  Ludei(http://www.ludei.com) –  CocoonJS : JS 기반
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×