Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

RetroLab

Early access to simulations and prototypes in development for RetroFab · By Itizso

Gamepad support

A topic by Itizso created Jun 12, 2023 Views: 539 Replies: 17
Viewing posts 1 to 4
(1 edit)

I've spent some time this weekend working on adding support for gamepad controllers :) You can test it out on the Super Mario Bros prototype and Las Vegas. If you do try it out, I'd appreciate some feedback.


I've used the standard HTML5 Gamepad API, so it should work for most controllers. 

You can view the default gamepad assignments in the game settings [F3] , or by hovering over the button with your mouse. 

To change a gamepad assignment, click on the name of the button in the game settings (it should start flashing) then press the button on your gamepad to assign. It should show the number (or arrow in the case of directional buttons) associated with the button on your gamepad. I've left some functions (like Start and Select) without a default assignment, but you an assign them to your gamepad if you like.

The Gamepad API unfortunately only identifies buttons by number, and which button is assigned to which number will vary by manufacturer, so there is no easy way to display the button names or symbols. But if you hover over the gamepad icon in the game settings, it will show you the ID of your gamepad. There is a possibility I can then, based on that ID, map the numbers to button names (or symbols). If you'd like your controller mapped then let me know and I'll give you with details of what to provide.

I've also added a "Reset" link so you can restore the default assignments (for both keyboard and gamepad) in case you run into any trouble.

Tested in Chrome on PC with Xbox One controller and it works well, although I needed to manually add the extra buttons for start and select as they weren't in there by default. The left joystick is also set up as the default control method and need to manually change to D-Pad keys if you want to use that instead. You can only have one or the other though, not both control methods at same time.
I also tested on Xbox One and there are some issues there on Edge Browser. There is an option that pops up to use controller buttons for gaming rather than for browser navigation, this gets around the issue of when you press B button it would usually jump to previous browser page.
However when I tried to map keys for start and select to the controller buttons they seem to come up as unidentified buttons.

Thanks for testing. Your feedback is really helpful.

You should be able to use the d-pad by default (instead of the joystick) by toggling the analog button, if your controller has one. Also, with analog off, you can use both the d-pad and left joystick at the same time. 

Because the buttons map differently for different controllers, I decided to not map start and select by default. Although it is interesting that yours also mapped to 8 and 9, same as for my PC gamepad. 

Not being able to identify the start and select button on Edge is unfortunate. Likely down to Edge implementing the Gamepad API slightly differently. But I suppose you can always map those controls to some other button on your controller.

Thanks again for the feedback.

Xbox One controller doesn't have an analog switch unfortunately but that's not a big issue.

My comments regarding Edge were in relation to attempting to play on my Xbox One X (not on PC).

Edge browser on Xbox uses a few of the controller's buttons and joysticks for browser navigation purposes however you can override this when your game starts up to some degree (I think you need to hold down the menu button to switch controller mode to "Use game controls" rather than the usual browser controls.

One issue is that when you need to remap the controller buttons in "Use game controls" mode, you cant of course move around the game's menu system as the joysticks no longer work for controlling the mouse cursor so you need to plug a mouse into the Xbox to enable you to select the menu items. If you attempt to remap buttons whilst the controller is still in browser control mode then most of the controller buttons come up as unidentified.

A further issue, when I finally managed to remap the start and select buttons to controller using the mouse method above, it seems to remove the keyboard mapping and simply marks the original keyboard key settings as unidentified under the keyboard column, which is a bit strange. This also causes a problem with game control as this unidentified keymapping seems to want to press the start and select buttons whenever you press any other button/joystick in game.

I think for gaming on Xbox Edge, you would need to create a mapping preset at your end and give the user the ability to select that as the default mapping.

On my Xbox One X I can only play fullscreen (at 1080p) if I select the low definition mode in game. Higher definition crashes the game and browser needs to be restarted due to webgl crash I think (cant simply reload the game page, need to close browser and restart it).

(1 edit)

Hmm, the Select and Start buttons must also be generating a keyboard event which is why the keyboard mapping gets overridden :( For now I've uploaded a new build with these mapped by default. So far, it seems that buttons 8 and 9 are generally mapped to Start and Select (although that is only based on three gamepads tested),  so hopefully it will work for most controllers. And of course people can still reassign them to the correct buttons if that's not the case.

As for performance of the Edge browser on Xbox , not sure how much more I can optimize the WebGL to improve the performance or prevent crashes. I need to do some more research.

I'd like to create a profile for the button names for your XBox controller on PC, so if you have the time, maybe you can do something similar to this post?

Works great! Tested with Firefox and Chrome. When do you expect it will be available on other games?

I'm using a generic gamepad, so not sure if it's worth mapping the button names given not many people may be using the same one, but if you can that would be great!

Hovering over the gamepad icon it says:

USB Gamepad (Vender: 0810 Product: 0003)

And for the button assignments I get:

0 = triangle (green)
1 = circle (red)
2 = cross (blue)
3 = square (red)
4 = L2 (bottom left bumper)
5 = R2 (bottom right bumper)
6 = L1 (top left bumper)
7 = R1 (top right bumper)
8 = select
9 = start
a = L (left joystick in analog mode)
b = R (right joystick in analog mode)

The analog, turbo and slow buttons are not recognized.

(1 edit)

Thanks. Gamepad support should be available to all simulations with the next general release (v 0.9.8) in a couple weeks :)

Thanks for the button mappings for your gamepad. I've mapped the button names for your gamepad uploaded a new build. Let me know if it works.

It works!! The buttons match! Nice touch adding the colours too. 

I also like the new style of the menu headings :-)

It seems to be working, but I did have to remap some buttons with a Series X and PS4 gamepad. This is in Chrome Version 114.0.5735.111 (Official Build) (64-bit).

Default:

Remapped to use D-pad and map Action B to Xbox A/PS4 Cross and Action A to Xbox B/PS4 Circle:

Series X gamepad:

PS4 gamepad:


(1 edit)

Thanks Victor! That's really helpful.

I've uploaded a new build that maps buttons 12-15 to the D-pad by default.  So in theory, even if you reset the controls, you won't need to remap those :)  Similarly, I've set the default mappings for Action A and Action B to your preference.

I've also mapped the symbols for the Start and Select buttons for both controllers.

I've left the others as numbers until you can confirm I've understood the mapping correctly. 
And maybe you can supply the missing ones as well?

This is what I have based on your post:

PS4

Cross      :  0
Circle      : 1
Square   :  ?
Triangle :  ?

Xbox

A  :  0
B  :  1
X  :   ?
Y  :   ?

Ah nice, yep I see the changes.

Here are those numbers:

PS4

  • Cross: 0
  • Circle: 1
  • Square: 2
  • Triangle: 3

Xbox

  • A: 0
  • B: 1
  • X: 2
  • Y: 3

Great! Thanks :)

I've now mapped all the symbols for the Xbox and PS4 controllers and uploaded a new build.

I've changed the default mappings (again) for the A and B actions so they match the A and B buttons on the PS4 controller. 

I think your previous setup for PS4 was good. In the new setup, in order to map the buttons so the B button is on the left and A button is on the right (to match the game), I had to remap like this:


Sorry, I meant to say I made the action buttons match the lettering of the A and B buttons of the Xbox (not PS4). But yeah, it does mean you'd have to remap the PS4 manually since the default mappings are not gamepad specific but for the game. Fortunately you only need to remap the PS4 once since the setting is persistant.

Okay, let me think about it some more. I'm currently mapping all the other simulations for the general v0.9.8 release in a couple of weeks.  

Thanks again for your help in improving the gamepad support :)

Awesome, sorry I didn't get back to you earlier with the button mapping for Xbox, hopefully goodolvic has supplied what you needed?

No worries, mate. Maybe just test  on the latest build the buttons map correctly for your specific Xbox controller with the right symbols. If not, just screenshot the name of your controller (mouse over the gamepad icon) and let me know what number each button corresponds with.

(1 edit)

@goodolvic , assuming you have one of latest gen series X Xbox as well as the controller?

If you get a chance, could you please test some of the games in the Edge browser on your Xbox Series X and see if you can run them fullscreen in HD mode? On my older Xbox One X I need to reduce the detail to medium or low definition on some of the games to get them to run without crashing webgl at 1080p

Oh interesting thought. I gave it a shot on my Series S and it looks like it's got issues with the graphics driver.