Building a 4-Player, Gamepad-Controlled Lobby UI in Unreal Engine 5

For our game, Mug Off!, we set out to create a fun and frantic couch multiplayer game where four friends battle it out as cartoonish, low-poly mugs. Each of these mugs has to be unique and so we had the idea to create a customization screen in the lobby, where every player can choose their own unique mug design. This meant building a lobby UI that allowed each player to use their own gamepad simultaneously on a single screen, a feature we quickly discovered Unreal Engine 5 didn’t offer out-of-the-box.

In this dev blog, I'll break down how our team tackled the challenge and built the feature entirely using Unreal's Blueprints system.

Feature Goals and UI Design

Our lobby had to meet some key goals. First the design. It had to clearly divide the screen into four separate sections, one for each player. We took inspiration from other couch coop games for this. Next, each controller needed to exclusively control one player's UI. Lastly, players needed to quickly and easily customize their mugs, choosing from different colors, models, facial expressions, and control schemes.

The UI ended up as four panels placed side by side. Each panel featured its own customization options on top and a mug preview at the bottom, instantly updating as players made changes. The background is a wooden texture, reinforcing the idea that the mugs are placed on a wooden table.

Development Approach and Technical Details

We developed the entire lobby system using Unreal Engine 5’s Widget Blueprints and the built-in Enhanced Input System.

Each panel is its own widget which holds all the controls to move up or down and through a list via a set player controller. The player controller calls the functions inside the widget blueprint. When a controller is connected the lobby assigns that controller an ID (0 to 3), and then assigns it directly to a specific UI panel. We stored this controller ID inside the player’s UI widget itself, which allowed us to filter out inputs from other controllers. We handled navigation using a straightforward indexing system. Every selectable option, like choosing mug color, is stored in a list that can be accessed via a controllable index. This list has to be created at first:

Same for the values of each customization option (e.g.: colors):

The currently selected index gets highlighted, by changing the color and increasing the text size. When the player presses the D-pad up or down, it simply increments or decrements the index, which results in the new option getting highlighted. The same approach is used when moving through the different values of each customizable option, e.g.: switching from yellow to green. All options are stored in a list, and when pressing the D-pad right or left, another index variable is changed, which controls the current option. The input action calls the function in the player widget, which then calls the corresponding function based on the current index:

Customization and Live Preview

Customization was important to make our game fun even before players started battling. We not only provided a range of quick customization options, we also allow the players to test the controls inside the lobby by pressing the Ready button.

To achieve this, we use a Render Target in the Widget, which live renders a hidden scene. This is also how we live preview the changing customization options. When pressing Ready, the Input Mapping Context switches from the UI controls to the Mug fighting controls. By pressing Unready, players can change back to customization.

Problems and Challenges

Of course the main challenge was Unreal's default UI navigation system, which expects just one controller, which forced us to build a custom input-filtering system using Blueprints. We made sure each widget only responded to inputs that matched its assigned controller ID, ignoring inputs from all others.

Another difficulty arose with performance, due to multiple previews updating at the same time it reduces the performance slightly. As this is only the lobby, and no real gameplay is happening, we chose to not care too much about this inconvenience.

Scalability and adaptability are also not this solutions strong suits. As each selectable element has to be manually set up and assigned beforehand to make the index work, regular changes can be very tedious to deal with. This is an area that can be definitely improved upon in the future, by creating or getting all the options at runtime and handling all index controls dynamically.

Conclusion

Overall, we successfully implemented a fully functioning four-player lobby UI completely in Blueprints. The feature works smoothly, letting players customize and start games quickly without any confusion or input clashes.

Looking forward, we might add a few extra options for mug customization, such as new colors or models. But for now, the lobby is exactly what we envisioned: easy, engaging, and a fun way to kick off the gameplay in Mug Off!

Thanks for following our journey! Feel free to reach out if you're curious about how we built this feature or have ideas you'd like to share.