Using the Gamepad API for a better gaming experience on the web

Using the Gamepad API for a better gaming experience on the web

Slides for my JavaScript and Friends Conference 2020 talk.

This talk explores the usage and impact of the Gamepad API in the web gaming space. The Gamepad API lets you connect and use various gaming controllers with browsers, but since this API is in very early stages, tracking different controller inputs across browsers becomes extremely challenging.

For this very purpose I have released an open source library which provides support for button press, axis movement events as well as vibration play effect in browsers. We’ll be focusing on how we can leverage this library for providing better gaming experiences to consumers on the web.

C00289a7b57c00bb0ab55d5e04cc3345?s=128

Arun Michael Dsouza

August 14, 2020
Tweet

Transcript

  1. Using the Gamepad API for a better gaming experience on

    the web Arun Michael Dsouza arunmichaeldsouza.com
 @amdsouza92 JavaScript and Friends 2020
  2. github.com/arunmichaeldsouza

  3. The Web Platform

  4. Image source: freepik.com

  5. None
  6. Image source: nocookie.net

  7. Image source: mobilefreetoplay.com, windowscentral.com

  8. Gamepad API bit.ly/gamepad_api

  9. Image source: freepik.com

  10. Image source: caniuse.com

  11. None
  12. Gamepad Interface bit.ly/gamepad_interface

  13. None
  14. None
  15. Standard Gamepad Layout

  16. None
  17. Events?

  18. bit.ly/gamepad_connected_event

  19. bit.ly/gamepad_disconnected_event

  20. None
  21. None
  22. None
  23. Image source: red-gate.com/

  24. Image source: hacks.mozilla.org

  25. bit.ly/javascript_layout_thrashing

  26. requestAnimationFrame( )

  27. None
  28. The Game Loop

  29. Image Source: mozdevs.github.io bit.ly/anatomy_of_a_videogame

  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. bit.ly/joypad_js

  38. Connect/Disconnect

  39. Button Press/Axis Movement

  40. Button Press/Axis Movement

  41. Vibration Effect

  42. Settings

  43. Browsers Support

  44. None
  45. bit.ly/joypad_js

  46. arunmichaeldsouza.com/blog/web-platform's-hidden-gems-(series) arunmichaeldsouza.com/blog/using-joypad.js-for-a-better-gaming- experience-on-the-web arunmichaeldsouza.com/blog/web-platform's-hidden-gems--- gamepad-api Further Reading

  47. Thank you Arun Michael Dsouza arunmichaeldsouza.com
 @amdsouza92 JavaScript and Friends

    2020