UI Case Study
Multiplayer UI Design for TV Pals Deluxe
Role:
Solo Designer/Developer
Platform:
Game for PC and Console
Making complex multiplayer instantly readable
TV Pals is an action platformer focused on large, local multiplayer sessions. Bring tears to TV to receive power, knock out opponents to win.
To practice working with Unity’s online multiplayer tools, I decided to take an older project of mine and add networked multiplayer. This quickly expanded into a full blown remake of the original, including improvements to the UI, graphics, and animation.
Revisiting an old project with attention to polish and clarity, I made several key revisions to the design:
A playful, nostalgic visual language with nods to early 2000’s console gaming
A lobby that communicates complex networking state with flavorful spatial mapping of clients to ‘planetoids’
A dynamic, cinematic level select screen
Impactful UI and visual effects during gameplay to clarify important game state
Main Menu
Setting the tone
The main menu establishes a quiet, anticipatory atmosphere with a starfield gently floating past and subtle background hum. Contextual help text at the bottom guides players unfamiliar with networking terminology like 'host' and 'client.
Multiplayer Lobby
Supporting simultaneous local and online multiplayer
The lobby needed to clearly communicate a complex setup: multiple remote clients, each potentially hosting multiple local players, all joining the same game session.
The solution reused in-game assets to create a visual metaphor that's both functional and flavorful. Each remote client becomes a small planetoid, with players represented as the game's characters sitting around a TV on that planet's surface.
Sketching out the structure
I started with a text-heavy first pass of the interface to reason about the system.
Players can view details about remote clients as well as locally connected input devices in a compact list view.
Clarifying with icons and color coordination
Device names were replaced by icons. When a player presses A on a gamepad to join, the corresponding list item changes color, and a matching colorful dot is added to the client’s list item.
Players on each client are represented by a colored dot matching the color of their input device in the list.
A spatial metaphor for complex networking
Each remote client becomes its own planetoid with a TV. When players join by pressing a button on their controller, a character in their player color appears on that client's planetoid.
The spatial separation makes the lobby structure immediately readable - you can see at a glance which players are at which location, and if there are clients which aren’t ready yet.
Reusing gameplay assets for efficiency and cohesion
The lobby reuses characters, visual effects, and sounds from the main game.
This visual continuity helped players immediately associate with their character before gameplay started, creating a smoother onboarding experience.
3D perspective creates hierarchy
The planetoid representing the local client is always front and center - giving players a clear picture of their local state.
Remote planetoids recede into the background. Players maintain awareness of other clients without losing focus on their own setup.
Once the planetoid visualization clearly communicated the client structure, the text list in the upper right became redundant. Removing it reduced visual clutter and let the 3D space take focus.
Level Selection
Navigating through space
Level selection uses 3D space to create atmosphere and anticipation. As players browse worlds, the camera flies through a vibrant nebula with floating preview of each level on cards, turning navigation into a moment of exploration rather than a utilitarian menu. Each world has spatial audio of radio static that is modulated in a variety of ways, giving the impression of ‘tuning in’ to different frequencies as the player browses.
Custom shader effects reinforce the theme
UI text and icons use a custom erosion shader that creates a noisy, unstable quality - as if viewed through interference. This subtle effect reinforces the space / telecommunicaitons theming while maintaining readability.
Making Characters Legible in Chaotic Gameplay
In fast-paced multiplayer action with multiple characters on screen, players need to instantly identify their character. I made several improvements to maintain player identity during hectic moments.
Enhanced character shading with color-matched effects
Characters use a lit toon shader with an emissive fresnel effect, ensuring each player's color remains visible regardless of lighting conditions. The rim lighting keeps the character's silhouette defined even in darker areas. When characters run, they kick up dirt cloud particles that match their player color, creating a trailing visual signature that reinforces identity through movement.
Calling out the leader
The character currently in first place displays a small crown above their head. This wasn't just a UI flourish - it encourages emergent "dogpile the leader" gameplay by making the win condition visible to all players at a glance.
Telegraphing Powerup Spawns
Full-screen sigil takeover
When a TV spawns, the screen fills with static and the powerup's sigil briefly takes over the entire display, only just barely legible in the static before resolving and disappearing. This dramatic effect ensures players notice the spawn event and, once they learn the sigil system, tells them exactly which powerup just became available.
Text labels for clarity
Each TV displays text above it indicating the powerup name ("Throw Up," "Speed Up," "Kick Up"). This helps players understand the abilities without needing to memorize abstract symbols, especially during their first few matches.
