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.

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