Building a Custom Stream Deck for My D&D Table: Solving Gamepad Integration with a Custom SDK

As a passionate Dungeons & Dragons player and tech enthusiast, I decided to elevate my game setup by creating a custom coffee table that features an embedded screen. This table displays maps, tokens, plays sound effects, and even shows artwork for players. All of this runs through a powerful platform called Foundry VTT, which is similar to Roll20 but with a better pricing model and an extensive open module system. It's perfect for customizing your tabletop experience.

While exploring ways to enhance my setup, I noticed modules that allowed stream decks to be integrated with Foundry. These tools provide quick access to macros and commands, making gameplay even smoother. However, after seeing the price of a stream deck (200 euros!), I wasn't ready to make that investment.

Then I remembered something – a few years ago, I built an arcade machine. Though the machine has long since been dismantled, I still had the buttons and controller boards from the project. With a bit of creativity and a 3D printer, I made my own custom "stream deck" by printing a small box with slots for the buttons.

Now I had the hardware ready, but integrating it with Foundry VTT presented a challenge. I wanted to use the Gamepad API in the browser to register my button presses, but I was shocked by the lack of flexibility in how the API handled inputs. The default approach was to use a while(true) loop to constantly poll for the pressed state of each button. While this works fine in a game loop using requestAnimationFrame, for my purposes, it felt inefficient and frankly, stupid. I wanted to simply respond to button presses with event listeners, not constantly check the gamepad state in an endless loop.

This led me to create the Gamepad SDK I'm sharing today.

With this SDK, I simplified the process by allowing developers to add event listeners for button presses, releases, and axis changes directly – no polling required. It also includes support for connecting and disconnecting gamepads, which makes it easy to integrate with platforms like Foundry VTT or any browser-based project.

By using this SDK, anyone can hook up their custom controller to a browser-based app without the hassle of manually checking gamepad states. For my D&D table, it now means I can seamlessly use my makeshift stream deck to control in-game macros, actions, and more – all thanks to a few buttons and a little code.

If you're interested, check out the SDK, and feel free to reach out if you're looking to solve similar problems!

The Github: https://github.com/RamonGebben/Gamepad-SDK
NPM: https://www.npmjs.com/package/@pindakaasman/gamepad-sdk

The above is the detailed content of Building a Custom Stream Deck for My D&D Table: Solving Gamepad Integration with a Custom SDK. For more information, please follow other related articles on the PHP Chinese website!