DEV Community

Cover image for Do you have a gamepad? Help me test a library!
Alvaro Montoro
Alvaro Montoro

Posted on • Updated on • Originally published at alvaromontoro.com

Do you have a gamepad? Help me test a library!

This past week I got to learn and play with the Gamepad API (which allows to control gamepads/joysticks on the browser using JavaScript)... and I must say, it was a lot of fun.

After running tests and creating some demos, the result was GameController.js: a lightweight JS library to simplify the API interface and make it easier to use on web applications and games. Still at an early stage, but fully working.

...But I have a problem: the gamepad I used for testing is a SNES replica that only has 8 buttons and 1 joystick/axe, and the API supports a standard 17-button and 2 joysticks/axes gamepad. So I haven't been able to test the whole functionality 😅

If you have a gamepad/joystick for your computer, please give it a try. Test the demo page below or the ones on github, and let me know what you think. All feedback is welcome.

Thanks! 😊


Demo (you may need to open it on a new page):

  • Select button will reset the game
  • Start button will start a new game after reset
  • Right/Left joystick/buttons to move the paddle

If you don't have a gamepad, you can see a video of the API at work here and another video here.

Top comments (10)

Collapse
 
mtpiercey profile image
Matthew Piercey

Cool library! With my Logitech Attack 3 (amazon.com/9632910403-Logitech-Win...

  • Alvanoid works well (tilting the stick left/right moves the ship, Button 9 resets the game, and Button 10 starts it)

  • The gamepad connects properly and is recognized

  • According to the button-mapper example, all of the buttons (including the trigger - maps to Button 0) map to the button one below them (i.e. Button 3 -> Button 2) from 0 until 10 (except button 7, strangely, though I tested it with html5gamepad.com/ and it didn't register so it may be broken). Moving the stick maps to the left analog stick, but the slider doesn't register (html5gamepad.com/ saw it as "Analog 2")

With a cheapy usb "SNES" controller:

  • Everything works; all the buttons are recognized except...
    • > X => B
    • > A => A (nothing new here)
    • > B => Y
    • > Y => X
Collapse
 
alvaromontoro profile image
Alvaro Montoro

Wow. That's some thorough testing. Thanks a lot! I will definitely need to create a mapping system, so users can "redefine" the buttons because it seems that the different gamepads all follow different layouts. Thanks again for your help.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

By the way, we might have the same cheap USB "SNES" controller, because mine has the same issue with those buttons.

Collapse
 
7twin profile image
7twin

I have an xbox 360 controller clone from speedlink, the buttons match all fine (except 16, because that launches the windows game control center) - the joysticks don't light up at all though.

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Thanks for testing! Which example did you try? Was it this one?

Collapse
 
7twin profile image
7twin

Interestingly enough: the one you linked works for joystick presses, but none of the joystick examples have the movement working.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

Hmmm... I need to create a way to map the gamepads. I was able to test with an original PS3, and it works fine; but all the clones give me some type of trouble.

Thread Thread
 
7twin profile image
7twin

Maybe it would help to have just a key dump on screen, so lots of people could submit you what their controller sends to the browser? similar to how desktop mapping tools do it, not sure if that transfers over to web though.

Thread Thread
 
alvaromontoro profile image
Alvaro Montoro

I may need to do something like that. I followed the layout specified in the standard, but not all the gamepads follow it :-/

Collapse
 
johannesjo profile image
Johannes Millan

Nice library! Don't have gamepad with me atm, but I'll give it a go once I'm back in my flat.