Get Pumped for the HTML 5 Gamepad API

847 views
516 views

Published on

Intro to the HTML 5 Gamepad API

Published in: Devices & Hardware
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
847
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×