jsdc2013_your phone is the controller with multiplayer

Post on 27-Jan-2015

112 Views

Category:

Technology

2 Downloads

Preview:

Click to see full reader

DESCRIPTION

手機螢幕不一定要用來'看',也是絕佳的Gamepad。發揮第二螢幕的魔力!連結電腦螢幕或TV,創造另一種互動體驗;一個人的娛樂只不過用來打發時間,怎都比不上一團人的群樂。本議程將與大家共同探討運用 HTML5 與 Canvas 還有 WebSocket 打造多人 Sync 的連線遊戲體驗。

TRANSCRIPT

{ Your  Phone  is  the  Controller    with  Multiplayer  

JSDC  2013 吳宗德  (Aidan  Wu)

Long,  Long  Time  Ago

Connected  TV

192.168.0.168

+  192.168.0.168

+  192.168.0.168

+  ADDRESS

+  192.168.0.168

+  ADDRESS

+  192.168.0.168

+  ADDRESS

+  192.168.0.168

+  ADDRESS

WebSocket  »

Your  Phone  is  the  Controller  

mobile-­‐‑input-­‐‑multitouch

mobile-­‐‑input-­‐‑multitouch

mobile-­‐‑input-­‐‑multitouch

WebSocket  Gateway

HTML5  Canvas

Simple  Host  Server

1.  LOGIC  /  RULE 2.  GRAPHICS 3.  INPUT 4.  SOUND 5.  MUSIC 6.  CONNECT  (MULTIPLAYER) 7.  ASSETS  

Anatomy  of  a    Game-­‐‑based  APP  

1.  Install?   Write  once  play  anywhere 2.  Graphics?  Canvas  &  WebGL 3.  Sounds?  HTML5  audio 4.  Communication?  Multiplayer  game  server   5.  Data?  Web  storage    /  Offline 6.  Controls?  Keyboard  and  touch  

Why  is  HTML5  gaming  so  cool?  

Graphics Communication Input/Control

CANVAS-­‐‑based  UI

The  Xerox  8010  Star  Workstation  introduced  the  first  commercial  GUI

<CANVAS>  element

Drawing  paths,  boxes,  circles,  characters,  and  adding  images,  on  the  fly,  via  scripting

Tile  +  Sprite

LAYERS

GAME  LOOP Polling  vs  Event  driven

I

Input

Logic

OFF-­‐‑SCREEN

Display

DRAWING  OFF-­‐‑SCREEN backbuffer

Gamepad  Generation

u   Hammer.js   u   Touchy.js u   QuoJS  

Multi-­‐‑touch  Gestures  

MVC

M - Moving toward (continuous)"

V - Looking touchable"

C – Touch(Gesture)-aware

Data  Communication

u RFC  6454  -­‐‑  The  Web  Origin  Concept   u Same-­‐‑Origin  Policy   u Cross-­‐‑Document  Messaging   u PostMessage  Architecture   u XMLHbpRequest  Level  2   u Comet u WebSockets  

Connectivity  and  Real-­‐‑Time

WebSockets  ?

Long-­‐‑polling  /  COMET

Polling  /  AJAX

Bandwidth  optimized  binary  encoding  for  JavaScript

BiSON.js

Building  a  Scalable  Game  Server  

•  Scalable •  Extensible •  Performance

New  Gaming  Experience  on  Big  and  Small  Screens  

Chrome  World  Wide  Maze  

Chrome  Super  Sync  Sports  

Q  &  A

Some  issues  you  might  encounter  

top related