jsdc2013_your phone is the controller with multiplayer
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