Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Get Pumped for the HTML 5 Gamepad API

1,082 views

Published on

Intro to the HTML 5 Gamepad API

Published in: Devices & Hardware
  • Be the first to comment

Get Pumped for the HTML 5 Gamepad API

  1. 1. Get Pumped for the HTML5 Gamepad API MidwestJS 2014
  2. 2. kevin whinnery @kevinwhinnery
 kw@twilio.com github.com/kwhinnery
  3. 3. kevin whinnery @kevinwhinnery
 kw@twilio.com github.com/kwhinnery
  4. 4. html5 gamepad api
  5. 5. html5 gamepad api 25+ 29+
  6. 6. html5 gamepad api 25+ 29+
  7. 7. object model • Gamepad • GamepadButton • GamepadEvent • GamepadList
  8. 8. collecting input
  9. 9. standard layout
  10. 10. standard layout
  11. 11. gamepad buttons gamepad.buttons[0] gamepad.buttons[1] gamepad.buttons[2] - pressed (bool) - value (double) gamepad.buttons[3]
  12. 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. 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. 14. direct vs x input • X Input - Windows standard for gamepad games • Direct input - customizeable • X Input for Windows, Direct input for Mac
  15. 15. live code
  16. 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. 17. thank you! slideshare.net/kwhinnery
  18. 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. 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

×