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. 4.
  2. 10.
  3. 11.
  4. 12.
  5. 13.
  6. 14.
  7. 27.
  8. 28.
  9. 33.
  10. 34.
  11. 36.

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

    • No in-app payments • Mummy gets to use her iPad/iPhone
  12. 37.
  13. 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.
  14. 40.
  15. 41.
  16. 46.
  17. 47.
  18. 50.
  19. 51.
  20. 52.
  21. 53.
  22. 55.
  23. 60.
  24. 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() {
  25. 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();
  26. 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(); }
  27. 72.
  28. 75.
  29. 76.
  30. 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