Breakwater Arena: New Wave

Background

What is Breakwater Arena: New Wave?

Breakwater Arena: New Wave is a multiplayer, first-person battle royale game. Players pilot submarines in six degrees of freedom and fight to collect the"supercell" powerup, which grants "Juggernaut status" to its possessor along with an immense damage boost. If a player holds the supercell long enough for its gauge to fill up completely, they win.
‍

Creating a 6DOF multiplayer shooter inspired by the Y2K era

Breakwater Arena began as a product of 2023 Epic MegaJam hosted by Unreal Engine. With the jam criteria requiring us to use Unreal Engine, we wanted to create something that utilized the engine's unique capabilities, so a multiplayer shooter seemed like a fun challenge.

With the jam's theme being "antiquated future", we aligned on a Y2K-inspired aesthetic since it's a style that feels both dated and futuristic.
‍

Research & Inspiration

Nailing down the Y2K aesthetic

The Y2K style wasn't something I was overly familiar with, so I began my research looking at ads, music, and (of course) iconic video games from that era. The main style characteristics I found during my research were:

• Asymmetry
• Biomorphic shapes
• Bold typography with rounded glyphs
• Rounded edges
• Maximalist composition

‍

UX Inspiration from FPS games

I also looked at the top FPS games from recent years and examined the UX decisions being made in them to make sure that our UI would balance aesthetics and usability. The main characteristics I found were:

• Most information is placed on the bottom corners of the screen
• Use of semi-transparent colors
• An overall sense of "minimalism"

Designing the Combat Screen

Refining the information architecture with rapid iteration in low fidelity

I opted for a layout where the match-related details (menu, kill/death ratio, and game communications) were at the top of the screen, while everything related to the player vitals and weapons were toward the bottom.

This clustered the "must-know" information to the bottom of the screen and kept the "nice-to-know" information at the top, which was consistent with many of the games I played for research.

IA tweaks based on weapon design decisions and for better eye focus

A couple days in, the team had decided on a few design tweaks I needed to incorporate into my work:

• We wanted to try and make the UI look like it was projected onto the spherical cockpit window of the player's submarine

• The player would have two weapons at their disposal: one that had infinite ammo and another that also had infinite ammo, but would overheat if used too often.

I then began iterating around a circular motif to make the UI feel visually coherent while incorporating the new designs around weapons, and making it so that the player could check their vitals without having to take their eyes off of the center of the screen.

Adding the "Juggernaut timer" and weapons into the game screen

Once we had decided that the players would win by holding onto the supercell for a certain amount of time, I began iterating on how to integrate the "Juggernaut timer" into the UI. Because the win conditions were now based on obtaining and holding the supercell, we decided to remove the player's KDR since it no longer felt relevant to the gameplay.

Taking the designs to high fidelity

With the layout finalized, I began implementing visual upgrades to render the interface in high fidelity.

• For the weapons, I went with a biomorphic approach that embodied the maximalist, retro-futurism of Y2K without cluttering the player's view.
• One of my teammates had the idea to remove the health icon and invert the health bar to make its shape echo the geometry of the cockpit for a more cohesive look.
• I kept the Juggernaut timer semi-circular and positioned it close to the reticule to allow the player to easily see how much time they have left before they win. I used a shark icon because it fit the nautical theme and sharks are known as fierce predators.

Designing the Start and Matchmaking Screens

Leveraging industry-standard UX patterns for a more approachable experience and faster build

Building on my established design aesthetic, I quickly created high-fidelity menu iterations, drawing on UX patterns identified during research. I used a sea green and white color scheme for a nautical vibe along with a topographic map pattern to give the menu visual interest without overpowering the items in the foreground.

For a little bit of Y2K ridiculousness and a nod to the maximalism of that era, I connected the buttons via a circuitry pattern and added forward slashes to the labels for a bit more of a "hi tech as perceived in 1999" feel.

Dealing with the uncertainty of Epic Online Services' capabilities

One big unknown we grappled with was Epic Online Services. While I wasn't involved in the technical side of its implementation, I knew that I wanted to keep the menus related to that as simple as possible, so I opted for a modal-based approach instead of a full-screen one.

This option felt less cumbersome to use during prototyping and the modal could grow to accommodate whatever game match parameters (e.g. game name, number of players, etc.) we were implementing.

What I learned

Balancing seemingly conflicting styles

The clash between the maximalist Y2K aesthetic and the minimalist UX needs of modern FPS games was apparent from the beginning and I found myself presented with having to choose between what would look cool and what would deliver a better experience.

When presented with these choices, I asked myself the following questions:

• Would taking a maximalist approach here overwhelm the player with information?
• Would it make the game harder to understand?
• Would it significantly impede visibility to the point where the player might not see an enemy?

If the answer to any of these questions was "yes", I would err on the side of usability and clarity. Otherwise, I would explore options that embraced the retrofuturistic aesthetic of the early 2000s.