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.

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
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
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
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
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
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.
42. http:/ /gabrielecirulli.github.io/2048/
43. http:/ /chrome.angrybirds.com
44. http:/ /caniuse.com/canvas
45. [FLAP TO FAME]
48. http:/ /www.youtube.com/watch?v=rKk0k7xPBLA
49. http:/ /labs.ft.com/articles/ft-fastclick/
54. https:/ /www.youtube.com/watch?v=V1nb0uoSa4A
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
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
73. https:/ /www.youtube.com/watch?v=y3dCUPeyhag
74. https:/ /www.youtube.com/watch?v=FxaIe2rnL0c
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