Using a Gamepad for HTML5 projects

Sign in to queue

Description

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.

I'll have a video on how to use the API in the coming weeks.

gamepad-compat

 

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?

ds4-windows

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.

 

HTML5 Gamepad Tester

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.

device-manager-xbox-gamepad

At the next screen I selected "Search automatically for driver" but saw that the best driver was already installed. Odd.

update-gamepad

I restarted the machine and the warning went away, but it still wasn't picking up my gamepad. I found this great articleon how to debug the situation. It was now detecting my device, but I couldn't calibrate anything.

gamepad-debugging

Embed

Download

Download this episode

The Discussion

Add Your 2 Cents