{	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-­‐‑multitouchmobile-­‐‑input-­‐‑multitouchmobile-­‐‑input-­‐‑multitouchW...
1.  LOGIC  /  RULE	2.  GRAPHICS	3.  INPUT	4.  SOUND	5.  MUSIC	6.  CONNECT  (MULTIPLAYER)	7.  ASSETS  Anatomy  of  a    Gam...
1.  Install?  	Write  once  play  anywhere	2.  Graphics?  Canvas  &  WebGL	3.  Sounds?  HTML5  audio	4.  Communication?  M...
Graphics CommunicationInput/Control
CANVAS-­‐‑based  UIThe  Xerox  8010  Star  Workstation  introduced  the  first  commercial  GUI
<CANVAS>  elementDrawing  paths,  boxes,  circles,  characters,  and  adding  images,  on  the  fly,  via  scripting
Tile  +  Sprite
LAYERS
GAME  LOOPPolling  vs  Event  driven
IInputLogicOFF-­‐‑SCREENDisplay
DRAWING  OFF-­‐‑SCREENbackbuffer
Gamepad  Generation
u   Hammer.js  	u   Touchy.js	u   QuoJS  	Multi-­‐‑touch  Gestures  
MVCM - 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  PostM...
WebSockets  ?Long-­‐‑polling  /  COMETPolling  /  AJAX
Bandwidth  optimized  binary  encoding  for  JavaScriptBiSON.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  &  ASome  issues  you  might  encounter  
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
JSDC2013_Your Phone is the Controller with Multiplayer
Upcoming SlideShare
Loading in …5
×

JSDC2013_Your Phone is the Controller with Multiplayer

753 views
698 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
753
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

JSDC2013_Your Phone is the Controller with Multiplayer

  1. 1. { Your  Phone  is  the  Controller    with  Multiplayer  JSDC  2013 吳宗德  (Aidan  Wu)
  2. 2. Long,  Long  Time  Ago
  3. 3. Connected  TV
  4. 4. 192.168.0.168
  5. 5. +  192.168.0.168
  6. 6. +  192.168.0.168+  ADDRESS
  7. 7. +  192.168.0.168+  ADDRESS
  8. 8. +  192.168.0.168+  ADDRESS
  9. 9. +  192.168.0.168+  ADDRESS
  10. 10. WebSocket  »
  11. 11. Your  Phone  is  the  Controller  mobile-­‐‑input-­‐‑multitouchmobile-­‐‑input-­‐‑multitouchmobile-­‐‑input-­‐‑multitouchWebSocket  GatewayHTML5  CanvasSimple  Host  Server
  12. 12. 1.  LOGIC  /  RULE 2.  GRAPHICS 3.  INPUT 4.  SOUND 5.  MUSIC 6.  CONNECT  (MULTIPLAYER) 7.  ASSETS  Anatomy  of  a    Game-­‐‑based  APP  
  13. 13. 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?  
  14. 14. Graphics CommunicationInput/Control
  15. 15. CANVAS-­‐‑based  UIThe  Xerox  8010  Star  Workstation  introduced  the  first  commercial  GUI
  16. 16. <CANVAS>  elementDrawing  paths,  boxes,  circles,  characters,  and  adding  images,  on  the  fly,  via  scripting
  17. 17. Tile  +  Sprite
  18. 18. LAYERS
  19. 19. GAME  LOOPPolling  vs  Event  driven
  20. 20. IInputLogicOFF-­‐‑SCREENDisplay
  21. 21. DRAWING  OFF-­‐‑SCREENbackbuffer
  22. 22. Gamepad  Generation
  23. 23. u   Hammer.js   u   Touchy.js u   QuoJS   Multi-­‐‑touch  Gestures  
  24. 24. MVCM - Moving toward (continuous)"V - Looking touchable"C – Touch(Gesture)-aware
  25. 25. Data  Communication
  26. 26. 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
  27. 27. WebSockets  ?Long-­‐‑polling  /  COMETPolling  /  AJAX
  28. 28. Bandwidth  optimized  binary  encoding  for  JavaScriptBiSON.js
  29. 29. Building  a  Scalable  Game  Server  • Scalable • Extensible • Performance
  30. 30. New  Gaming  Experience  on  Big  and  Small  Screens  
  31. 31. Chrome  World  Wide  Maze  
  32. 32. Chrome  Super  Sync  Sports  
  33. 33. Q  &  ASome  issues  you  might  encounter  

×