00:00
00:00
3p0ch
If you like hard games try my Daxolissian System series

plasmid @3p0ch

Cat

Scientist

Read the manual & try stuff

So Cal

Joined on 2/13/10

Level:
13
Exp Points:
1,648 / 1,880
Exp Rank:
38,302
Vote Power:
5.48 votes
Audio Scouts
1
Rank:
Portal Security
Global Rank:
23,497
Blams:
50
Saves:
375
B/P Bonus:
8%
Whistle:
Normal
Medals:
4,619
Supporter:
3y 3m 10d

Want a gamepad input mapper for HTML5 games? Try this out

Posted by 3p0ch - February 27th, 2022


TL DR: If you're a player, try this out and lemme know how it works with your system – which gamepad and which operating system (Windows / Mac) and browser.

If you're a game dev, I plan to make this open for everyone to use. Let me know if you'd like an implementation for your game engine.


Gamepad support in HTML5 is kinda sux because the JavaScript API behind it doesn't consistently map the same physical gamepad input to the same variables if players are using different gamepads and operating systems. So for my next game I made a scene where if the player has a gamepad they'll be prompted to press each of the buttons and move each of the sticks on the gamepad, and the game will read those inputs and map them to the in-game actions you want. I tested it out with my Switch controller on Windows and it works for all buttons except the left D-pad (which for some reason gives output to an Axis like with a stick instead of to Buttons) but that's fine for my game since the mapping works great for the left and right stick, the four right-side buttons, top and bottom left and right shoulder triggers, start, and select which is plenty.


Even better, I wrote code to save the gamepad configuration to LocalStorage so players will only ever need to configure their gamepad once. Even if they configure it in one game, they can still read that saved configuration data even from a different game, even if it's made in a different game engine. And I ultimately plan to make this public so any game devs on NG can use it in their games.


I'm saving it to LocalStorage as a JSON where the keys are button/axis names in human readable text (LStickDown, R2, ButtonUp [for the right pad's upper button] etc) and the values are the button number that the JavaScript API associates with it (and for axes it also has another key/value indicating whether it's the positive or negative direction). So it should be straightforward to import it into any game engine that can run JavaScript and handle return values, or get a JSON from LocalStorage through any other means. I've already written code for cross-game collabs in Unity, Godot, HaxeFlixel, and Phaser (JavaScript) that could be used to read the values in, so you would just need to handle them in a way that makes sense for your engine/framework.


3

Comments

Neat! Could this be combined with the controller/key prompts pack (https://thoseawesomeguys.com/prompts/) for a consistent game input prompt library of sorts?

Hmm, maybe? I intentionally designed the mapper to be agnostic of what type of gamepad you're using -- so players can use their XBox, PS, Switch, or whatever other gamepad they happen to have. As long as they can plug it into a USB drive and it has enough buttons and stick axes it should work. So players might get confused if they see symbols for a specific company's gamepad and think they need that particular one, when really they don't.

works fine for me on windows/firefox/xbox one controller. i think something that would be nice if possible is to have presets for xbox, ps, and switch, so that players don't have to go through the mapper if they have a common controller, plus that way it could enable the use of manufacturer specific button prompts re: gimmick's idea. though you said the mapping is inconsistent across browsers so i'm not sure if that would be practical. cool system!

Yeah, my understanding is that it's not just determined by the controller, but also possibly by the operating system and/or browser. So if that's accurate (which I'm not 100% sure of tbh) that might make it tougher. But at least the players will only go through the mapper once, ever, and it would work for every game on NewGrounds.

I love the idea of a universal system like this for web games. If you make this open source and release implementations, I hope developers use it frequently enough and with the consistency that would make it worthwhile.

This seems pretty handy. I'm not sure how handy bc I've only ever used my 360 controller, but still.

I can definitely see this project becoming the web equivalent of Steam Input in providing customization and accessibility to both developers and players.