Using a Gamepad for HTML5 projects
The HTML5 gamepad API allows you interact with the web browser through a traditional gamepad, whether it is from Microsoft, Sony, or some other third party product. Bear in mind that it is an experimental technology, so that means it isn’t implemented in every browser (yet).
Mozilla has some fantastic docs and examples for the API, so I won’t reinvent the wheel here.
Why would anyone do this?
The browser is fast today. Really fast. With that, comes the ability to add new experiences, such as games on the web. Now, I’m not talking about only games that were written directly in JavaScript (those are fast too) but with the recent rise of asm.js and emscripten, which allows us to transpile C / C++ to JavaScript, we can now utilize popular middleware such as Epic’s Unreal Engine and Unty’s Unity 3D to write games in another language, but play them in the browser.
With these new experiences come new ways to interact with the browser, and therein lies the desire to use the gamepad.
Now would I use this for browsing Facebook? Eh, probably not. But it would work very well for any of these 30 games.
Xbox One Gamepad
The Xbox One Wireless Controller can be used to play Xbox games on your PC when connected via micro-USB cable.
To use an Xbox One Wireless Controller with your PC, you’ll need to make sure you have the current PC drivers.
Windows 10
The drivers come pre-installed with the OS.
Windows 8 or 7
You’ll need to download and install one of the following driver packages:
You can find more information on the topic here.
What if you prefer a PS4 gamepad?
Well you’re in luck! Just download DS4 windows, plug in your PS4 gamepad, and you’re good to go. It’s a set of drivers which sit on top of your gamepad drivers, and behave exactly as you’d expect. I actually use this pretty often when playing games on my PC.
EDIT: Great insight from Reddit user NoDownVotesPlease:
I’m not sure you even need DS4 to use the PS4 controller. [At least for HTML5 projects] I have tested the controller with chrome and firefox on both Window and OSX and it works fine without any specific drivers. The only issue I had was the right stick doesn’t map correctly in firefox, but it was perfect in Chrome.
One cool thing is the gamepad API works in the Android version of chrome too. So my html5 game had full controller support on my phone once I connected with a usb on the go adapter.
HTML5 Gamepad Tester
There’s a fanatic tool in the browser to check that this all works, and you can find it here.
Troubleshooting
Upon plugging in my Xbox One gamepad to my Windows 10 machine, I discovered that it wasn’t immediately recognized. I opened the Device Manager and saw that I needed to update the driver.
Sure enough the problem had to do with the fact that the USB wire I was using was not working properly. Always check your wires. But I figured I’d throw some of the debugging tools in here so that you can step through some issues, should you have them in the future.
At the next screen I selected “Search automatically for driver” but saw that the best driver was already installed. Odd.
I restarted the machine and the warning went away, but it still wasn’t picking up my gamepad. I found this great article on how to debug the situation. It was now detecting my device, but I couldn’t calibrate anything.
Try it out
Reddit user Gamepadable created a site to showcase games and projects that make use of the API.
-----------------------
#mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
/* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
Subscribe to my startup, tech, and game dev newsletter
The post Using a Gamepad for HTML5 projects appeared first on Dave Voyles | Tech Evangelist at Microsoft.
Source: DaveVoyles