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.

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