Get Pumped for the HTML5 Gamepad API

MidwestJS 2014

kevin whinnery

@kevinwhinnerykw@twilio.com

github.com/kwhinnery

kevin whinnery

@kevinwhinnerykw@twilio.com

github.com/kwhinnery

html5 gamepad api

html5 gamepad api

25+ 29+

html5 gamepad api

25+ 29+

object model

• Gamepad

• GamepadButton

• GamepadEvent

• GamepadList

collecting input

standard layout

standard layout

gamepad buttons

gamepad.buttons[0]

gamepad.buttons[1]

gamepad.buttons[2]

- pressed (bool)

- value (double)

gamepad.buttons[3]

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

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 :(

direct vs x input

• X Input - Windows standard for gamepad games

• Direct input - customizeable

• X Input for Windows, Direct input for Mac

live code

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”

thank you!

slideshare.net/kwhinnery

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

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