Responsive Games

Fef1ad956b91dcbc2e0d2266b34b46c8?s=47 Josh Emerson
September 15, 2014

Responsive Games

Originally presented at Smashing Conference 2014

How do we design games to work on every device, and what effect does this have upon the gaming experience? In this talk, I will look at what it takes to make in-browser games which will work on everything from your iPhone, to your laptop, and even your games console.

Fef1ad956b91dcbc2e0d2266b34b46c8?s=128

Josh Emerson

September 15, 2014
Tweet

Transcript

  1. RESPONSIVE GAMES Making Cross Device Games in the Browser

  2. IN THE BEGINNING Analog Games

  3. http:/ /www.youtube.com/watch?v=Nn4pMI2q_PM

  4. None
  5. 1970s - 1980s The Rise of the Silicon Chip

  6. http:/ /www.youtube.com/watch?v=07Upyd9EVog

  7. http:/ /www.youtube.com/watch?v=9Ek_inGfacg

  8. 1982 The First Cross-Device Game

  9. http:/ /www.youtube.com/watch?v=GFuOerG0hPw

  10. None
  11. None
  12. None
  13. None
  14. None
  15. http:/ /www.youtube.com/watch?v=0R_Q_rXW7Jk

  16. CONSOLE INPUTS

  17. ODYSSEY TELSTAR FIRST GENERATION Paddles for Pong!

  18. ATARI 2600 COLEOVISION ATARI 5200 SECOND GENERATION Knobs and numbers

  19. NES SEGA MASTER SYSTEM THIRD GENERATION 4 directions + 2

    buttons
  20. FOURTH GENERATION SUPER NINTENDO SEGA GENESIS 4 directions + 2/4/6

    buttons! TURBOGRAFX-16
  21. NINTENDO 64 SONY PLAYSTATION FIFTH GENERATION Rise of the third

    dimension SEGA SATURN
  22. SIXTH GENERATION XBOX SONY PS2 NINTENDO GAMECUBE DREAMCAST Yup, it’s

    definitely 3d
  23. SEVENTH GENERATION PLAYSTATION MOVE XBOX KINECT NINTENDO WII Your body

    is the controller
  24. http:/ /www.youtube.com/watch?v=K_ARvhT6Gzc

  25. MOBILE INPUTS

  26. http:/ /www.youtube.com/watch?v=wDbTP0B94AM

  27. None
  28. None
  29. http:/ /www.youtube.com/watch?v=6lZMr-ZfoE4

  30. http:/ /www.youtube.com/watch?v=QW7MhWX_Pf4

  31. E4 http:/ /www.youtube.com/watch?v=BnY6wImunAI

  32. http:/ /www.youtube.com/watch?v=L5qU-YV7jv0

  33. None
  34. -OR-

  35. -OR- €20 89¢

  36. • €109 instead of €200+ • Unbreakable! • Family friendly

    • No in-app payments • Mummy gets to use her iPad/iPhone
  37. None
  38. http:/ /xkcd.com/1174/

  39. http:/ /www.bbc.co.uk/bbctrust/ • Make the most creative and distinctive output;

    • Innovate online to create a more personal BBC; • Serve all audiences; and • Improve value for money through a simpler, more efficient, and more open BBC.
  40. None
  41. None
  42. http:/ /gabrielecirulli.github.io/2048/

  43. http:/ /chrome.angrybirds.com

  44. http:/ /caniuse.com/canvas

  45. [FLAP TO FAME]

  46. None
  47. None
  48. http:/ /www.youtube.com/watch?v=rKk0k7xPBLA

  49. http:/ /labs.ft.com/articles/ft-fastclick/

  50. None
  51. None
  52. None
  53. None
  54. https:/ /www.youtube.com/watch?v=V1nb0uoSa4A

  55. None
  56. http:/ /joshje.github.io/drawpath/ ctx.beginPath(); ctx.moveTo(-50, -50); ctx.lineTo(50, -50); ctx.lineTo(50, 50); ctx.lineTo(-50,

    50); ctx.closePath();
  57. http:/ /joshje.github.io/drawpath/

  58. http:/ /www.google.com/doodles/hurdles-2012

  59. https:/ /www.youtube.com/watch?v=21OkXdCRchw

  60. None
  61. http:/ /www.html5rocks.com/en/tutorials/doodles/gamepad/

  62. navigator.getGamepads() http:/ /www.html5rocks.com/en/tutorials/doodles/gamepad/

  63. http:/ /www.html5rocks.com/en/tutorials/doodles/gamepad/gamepad-tester/tester.html

  64. var gamepadSupport = function { init: function() { var gamepadSupportAvailable

    = !!navigator.webkitGetGamepads || !!navigator.webkitGamepads || (navigator.userAgent.indexOf('Firefox/') != -1); ! if (gamepadSupportAvailable) { window.addEventListener('MozGamepadConnected', gamepadSupport.onGamepadConnect, false); window.addEventListener('MozGamepadDisconnected', gamepadSupport.onGamepadDisconnect, false); ! if (!!navigator.webkitGamepads || !!navigator.webkitGetGamepads) { gamepadSupport.startPolling(); } } }, startPolling: function() { if (!gamepadSupport.ticking) { gamepadSupport.ticking = true; gamepadSupport.tick(); } }, ! stopPolling: function() {
  65. gamepadSupport.ticking = true; gamepadSupport.tick(); } }, ! stopPolling: function() {

    gamepadSupport.ticking = false; }, ! tick: function() { gamepadSupport.pollStatus(); gamepadSupport.scheduleNextTick(); }, ! scheduleNextTick: function() { if (gamepadSupport.ticking) { window.requestAnimationFrame(gamepadSupport.tick); } }, ! pollStatus: function() { // (Code goes here.) } }; ! gamepadSupport.init();
  66. window.wiiu.gamepad

  67. http:/ /www.nintendo.com/wiiu/built-in-software/browser-specs/extended-functionality/

  68. http:/ /wiiubrew.org/wiki/Internet_Browser

  69. var getWiiUStatus = function() { var gamepadState = window.wiiu.gamepad.update(); !

    if(gamepadState.isEnabled && gamepadState.isDataValid) { // (Code goes here.) } ! window.requestAnimationFrame(getWiiUStatus); } ! if (window.wiiu) { getWiiUStatus(); }
  70. ANDROID TV APPLE TV AMAZON FIRE TV

  71. https:/ /www.npdgroupblog.com/internet-connected-tvs-are-used-to-watch-tv-and-thats-about-all 10% BROWSER USAGE AMONG SMART TV OWNERS

  72. None
  73. https:/ /www.youtube.com/watch?v=y3dCUPeyhag

  74. https:/ /www.youtube.com/watch?v=FxaIe2rnL0c

  75. None
  76. None
  77. https:/ /www.youtube.com/watch?v=INDKNA7kXoo

  78. navigator.getVRDevices()

  79. function goFullscreen(device) { if (canvas.webkitRequestFullscreen) { canvas.webkitRequestFullscreen({ vrDisplay: device });

    } else if (canvas.mozRequestFullScreen) { canvas.mozRequestFullScreen({ vrDisplay: device }); } } ! function enumerateDevices(devices) { // Do stuff with the devices goFullscreen(devices[0]); } ! if (navigator.getVRDevices) { navigator.getVRDevices().then(enumerateDevices); } else if (navigator.mozGetVRDevices) { navigator.mozGetVRDevices(enumerateDevices); } http:/ /blog.tojicode.com/2014/07/bringing-vr-to-chrome.html
  80. http:/ /poshaughnessy.github.io/fel-interfaces-of-the-future/

  81. http:/ /poshaughnessy.github.io/fel-interfaces-of-the-future/

  82. http:/ /poshaughnessy.github.io/fel-interfaces-of-the-future/

  83. https:/ /www.flickr.com/photos/anna_debenham/8190771122/

  84. THANKS FOR LISTENING! joshemerson.co.uk @joshje