Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Arun Michael Dsouza

August 14, 2020
Tweet

More Decks by Arun Michael Dsouza

Other Decks in Programming

Transcript

  1. Using the Gamepad API for
    a better gaming experience
    on the web
    Arun Michael Dsouza
    arunmichaeldsouza.com

    @amdsouza92 JavaScript and Friends 2020

    View Slide

  2. github.com/arunmichaeldsouza

    View Slide

  3. The Web Platform

    View Slide

  4. Image source: freepik.com

    View Slide

  5. View Slide

  6. Image source: nocookie.net

    View Slide

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

    View Slide

  8. Gamepad API
    bit.ly/gamepad_api

    View Slide

  9. Image source: freepik.com

    View Slide

  10. Image source: caniuse.com

    View Slide

  11. View Slide

  12. Gamepad Interface
    bit.ly/gamepad_interface

    View Slide

  13. View Slide

  14. View Slide

  15. Standard Gamepad Layout

    View Slide

  16. View Slide

  17. Events?

    View Slide

  18. bit.ly/gamepad_connected_event

    View Slide

  19. bit.ly/gamepad_disconnected_event

    View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. Image source: red-gate.com/

    View Slide

  24. Image source: hacks.mozilla.org

    View Slide

  25. bit.ly/javascript_layout_thrashing

    View Slide

  26. requestAnimationFrame( )

    View Slide

  27. View Slide

  28. The Game Loop

    View Slide

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

    View Slide

  30. View Slide

  31. View Slide

  32. View Slide

  33. View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. bit.ly/joypad_js

    View Slide

  38. Connect/Disconnect

    View Slide

  39. Button Press/Axis Movement

    View Slide

  40. Button Press/Axis Movement

    View Slide

  41. Vibration Effect

    View Slide

  42. Settings

    View Slide

  43. Browsers Support

    View Slide

  44. View Slide

  45. bit.ly/joypad_js

    View Slide

  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

    View Slide

  47. Thank you
    Arun Michael Dsouza
    arunmichaeldsouza.com

    @amdsouza92 JavaScript and Friends 2020

    View Slide