Top Banner
41

Game with HTML5 to N-Screen

Jan 15, 2015

Download

Technology

Chang W. Doh

TTA Standard Strategy Seminar on April 20th, 2012
- Required technologies of Game Engine.
- HTML5 Coverage
- Cocos 2D
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Game with HTML5 to N-Screen
Page 2: Game with HTML5 to N-Screen

Who am I?

•  ChangWook Doh

•  @ Incross CO.LTD. –  Cross-Platform –  HTML5 Solution

•  Email –  [email protected]

•  Twitter –  @cwdoh

Page 3: Game with HTML5 to N-Screen
Page 4: Game with HTML5 to N-Screen
Page 5: Game with HTML5 to N-Screen

①  Cross-Platform ②  Game Environment (Console)

Page 6: Game with HTML5 to N-Screen
Page 7: Game with HTML5 to N-Screen

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

Page 8: Game with HTML5 to N-Screen

<canvas>Your Browser doesn’t support HTML5 canvas tag.</canvas>

Graphics

http://kalacheva.livejournal.com/191914.html#cutid1

Page 9: Game with HTML5 to N-Screen

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>

Page 10: Game with HTML5 to N-Screen

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

Page 11: Game with HTML5 to N-Screen

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!

Page 12: Game with HTML5 to N-Screen

Canvas (2D)

Text API

WebGL (3D)

http://caniuse.com/#search=canvas

Page 13: Game with HTML5 to N-Screen

<audio/>

http://allposters.com/-sp/Steez-Headphone-Monkey-Posters_i7939864_.htm

Page 14: Game with HTML5 to N-Screen

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

Page 15: Game with HTML5 to N-Screen

HTML5 Audio

•  Audio 출력을 위한 별도의 플러그인(Flash 등)이 불필요 –  <audio>Very useful to play simple game sound</audio>

•  Limitations –  오디오 출력을 위한 필터 적용 불가 –  Raw audio data에 대한 접근 불가 –  Positional & Directional Sound 불가

Page 16: Game with HTML5 to N-Screen

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

Page 17: Game with HTML5 to N-Screen

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

Page 18: Game with HTML5 to N-Screen

Audio Data API vs. Web Audio API

•  유사점 –  HTML5 audio 요소의 확장 –  오디오 출력의 제어 기능 –  사운드 소스에 대한 로딩 & 조작

•  차이점 –  Audio Data API

•  Javascript를 통해 raw data에 대한 접근을 수행

–  Web Audio •  Mixing, Filter, Effect 등을 Native(브라우저)의 구현 사항으로 정의하고 이에 대한 API 추가

Page 19: Game with HTML5 to N-Screen

Network http://tnea.info/book/export/html/11

Page 20: Game with HTML5 to N-Screen

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 서비스에 부적합

Page 21: Game with HTML5 to N-Screen

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>

Page 22: Game with HTML5 to N-Screen

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);

Page 23: Game with HTML5 to N-Screen
Page 24: Game with HTML5 to N-Screen

HTML5 시장 접근 전략

•  구글의 웹 플랫폼/서비스 리더쉽 강화 전략 –  Chrome 브라우저에서 새로운 기술들(Web Worker, Web Audio,

FullScreen, WebGL, WebSocket과 WebRTC 등)에 대한 적극적인 공략

–  "(크롬에서 선도 기능들을 지원하여) 견고한 웹게임 서비스 생태계가 구축되도록 하는 것”

•  게임 엔진 개발사들의 HTML5 게임 마켓 쉐어 확대 전략 –  “HTML5 브라우저 단편화 회피와 모바일 영역 확장” –  하이브리드 방식을 통해 성능 한계점 해결 –  상품 개발 지원 수익 창출

•  페이스북과 모바일 오픈마켓을 염두에 둔 개발 퍼블리싱 모델

Page 25: Game with HTML5 to N-Screen

Store & Marketplace

•  Chrome Web Store

•  Windows 8 Store •  Mozilla App Marketplace •  Apple App Store •  Google Android Market •  …

Page 26: Game with HTML5 to N-Screen

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 지원)

–  아마추어도����������� ������������������  대상으로����������� ������������������  삼고����������� ������������������  있어����������� ������������������  프로그래밍이����������� ������������������  없이도����������� ������������������  상당����������� ������������������  부분을����������� ������������������  개발����������� ������������������  가능�

Page 27: Game with HTML5 to N-Screen

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 실행����������� ������������������  성능����������� ������������������  중심����������� ������������������  솔루션�

Page 28: Game with HTML5 to N-Screen

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 객체를 통해 서버/클라이언트의 변수 및 함수의 자동 싱크 •  프로토콜 설계 및 개발 과정을 배제하여 개발의 효율성이 높음

Page 29: Game with HTML5 to N-Screen
Page 30: Game with HTML5 to N-Screen

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

Page 31: Game with HTML5 to N-Screen

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

Page 32: Game with HTML5 to N-Screen
Page 33: Game with HTML5 to N-Screen
Page 34: Game with HTML5 to N-Screen

Sergey Mavrody "Sergey's HTML5 & CSS3 Quick Reference. 2nd Edition". Belisso Corp., 2012. ISBN 978-0983386728

Page 35: Game with HTML5 to N-Screen

HTML5 Browser Fragmentation • 기능/성능 면에서 브라우저 단편화 요소 존재 • 정보 서비스 위주의 환경이 아닌 게임에서는 악영향 요소

Page 36: Game with HTML5 to N-Screen

Mobile HTML5 Performance Fragmentation •  Major Market Share Device 성능이 게임의 최저 요구 수준인 20 FPS 이하

Page 37: Game with HTML5 to N-Screen
Page 38: Game with HTML5 to N-Screen

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

Page 39: Game with HTML5 to N-Screen

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

Page 40: Game with HTML5 to N-Screen

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

Page 41: Game with HTML5 to N-Screen