Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JSDC2013_Your Phone is the Controller with Multiplayer

845 views

Published on

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

Published in: Technology
  • Be the first to comment

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  

×