$30 off During Our Annual Pro Sale. View Details »

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 JS GameDev Summit 2023 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

September 28, 2023
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

    View Slide

  2. arunmichaeldsouza.com

    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. View Slide

  11. Image source: caniuse.com

    View Slide

  12. View Slide

  13. Gamepad Interface
    bit.ly/gamepad_interface

    View Slide

  14. View Slide

  15. View Slide

  16. Standard Gamepad Layout

    View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. View Slide

  22. View Slide

  23. View Slide

  24. Events?

    View Slide

  25. bit.ly/gamepad_connected_event

    View Slide

  26. bit.ly/gamepad_disconnected_event

    View Slide

  27. 😔

    View Slide

  28. View Slide

  29. View Slide

  30. Image source: red-gate.com/

    View Slide

  31. Image source: hacks.mozilla.org
    bit.ly/javascript_layout_thrashing

    View Slide

  32. requestAnimationFrame( )

    View Slide

  33. View Slide

  34. The Game Loop

    View Slide

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

    View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. View Slide

  45. View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. bit.ly/joypad_js

    View Slide

  51. Connect/Disconnect

    View Slide

  52. Button Press/Axis Movement

    View Slide

  53. Button Press/Axis Movement

    View Slide

  54. Vibration Effect

    View Slide

  55. Settings

    View Slide

  56. Browsers Support

    View Slide

  57. View Slide

  58. bit.ly/joypad_js

    View Slide

  59. 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

  60. Thank you
    Arun Michael Dsouza


    arunmichaeldsouza.com

    @amdsouza92

    View Slide