Intro to the HTML 5 Gamepad API

1. Get Pumped for the
HTML5 Gamepad API
MidwestJS 2014

2. kevin
whinnery
@kevinwhinnery
kw@twilio.com
github.com/kwhinnery

3. kevin
whinnery
@kevinwhinnery
kw@twilio.com
github.com/kwhinnery

4. html5 gamepad api

5. html5 gamepad api
25+ 29+

6. html5 gamepad api
25+ 29+

7. object model
• Gamepad
• GamepadButton
• GamepadEvent
• GamepadList

8. collecting input

9. standard layout

10. standard layout

11. gamepad buttons
gamepad.buttons[0]
gamepad.buttons[1]
gamepad.buttons[2]
- pressed (bool)
- value (double)
gamepad.buttons[3]

12. gamepad axes
gamepad.axes[0]
( left x-axis )
gamepad.axes[1]
( left y-axis )
gamepad.axes[2]
( right x-axis )
gamepad.axes[3]
( right y-axis )
Number value between
1 and -1

13. mapping gotchas
• Not all gamepads will
map to the
“standard” layout in
every browser
• Chrome seems to
support more pads
• No way to know but
to test :(

14. direct vs x input
• X Input - Windows
standard for
gamepad games
• Direct input -
customizeable
• X Input for Windows,
Direct input for Mac

15. live
code

16. check yourself
• Hardware support still super
buggy
• Mappings differ per browser
• Direct Input versus XInput
• Detecting hardware ( Windows
“solution” )
• Chrome supports more
hardware as “standard”

17. thank
you!
slideshare.net/kwhinnery

18. Resources
• http://kwhinnery.github.io/starfox
• https://dvcs.w3.org/hg/gamepad/raw-file/default/
gamepad.html
• https://developer.mozilla.org/en-US/docs/Web/Guide/API/
Gamepad
• http://www.html5rocks.com/en/tutorials/doodles/
gamepad/
• https://connect.microsoft.com/IE/feedback/details/
793740/ie11-feature-request-support-for-gamepad-api

19. image credits
• http://piq.codeus.net/picture/32029/
mozilla_firefox_logo_8_bit
• http://www.notoriouswebmaster.com/2012/06/24/
testing-web-sites-with-ie-on-osx-using-parallels/
• Mike Tyson’s Punch Out!! for NES