header

Red Faction: Guerrilla FPS UI Redesign (personal)

HUD Development Details

Project Origins: I recreated the HUD, logo and main menu for Volition’s Red Faction: Guerrilla as a design challenge. Having worked at Volition while RFG was still in development, I’m familiar with the team’s struggle to maintain a coherent first person viewpoint while knocking down large buildings (the eventual compromise being a switch to third-person perspective). While I enjoyed the resulting game, I’ve always been curious as to what it would have looked like had it retained it’s FPS heritage. The images and notes below detail my decision making and design process.

Developing the HUD: Immersion being the central goal of the FPS genre, I started the HUD design process by considering the equipment and environment that Alec Mason interacts with throughout Red Faction: Guerrilla. Unlike Bungie’s Halo series, the player character in RFG has no helmet in which a diegetic display could be projected. Alec does have an in-the-ear communication device, but there’s no indication in the narrative that it has holographic capabilities, or is tapped into his visual cortex.

Wanting to avoid crowding the screen with non-diagetic HUD elements, I constrained the UI’s real-estate as much as possible, choosing simple shapes and repeating 45° angles to communicate data critical to the player’s experience of the game world: direction, locational details of objectives and enemies, and weapon feedback. Here’s a breakdown of each:

On Weapon Display

As a player I want weapons with personality: their reaction to use should tell me about their purpose, and I should be rewarded when I’ve selected the right weapon for the right job. In the beginning I didn’t have a clear idea for how I wanted the weapon feedback elements to interact, so I developed mockups to explore color and shape combinations:

m.curtin_gun_mockups

The assault rifle is a blunt instrument, and is not designed for finesse or specialization (as the sniper rifle is). As a utilitarian tool, I wanted it’s display to reflect it’s purpose; stock parts, clear data, no frills. It’s also not a machine gun, and if used the wrong way (constant fire) then barrel-jam is an issue. I added a heat gauge, and made room for a 1 or 3 round burst indicator. Once I chose a design that fit the weapon, I started thinking about how the gun interface would interact with the rest of the HUD (below). A video detailing state-changes for the assault rifle can be found here.

Directional Compass

Given that RFG is an open-world game, I was more interested in giving the player a directional heading (compass) them providing them with a miniature portion of the full world-map (mini map). In my experience, mini maps have two utilities:

1) Mini Map as Navigational Tool:
Strictly used as a map, the mini map is not very useful to me. If I’m driving, a simple map showing the upcoming roads can be good, but the advent of GPS-style on-screen navigational queues have made that redundant. If you’re willing to project a map element onto the actual game world, it’s superfluous to also feature a tiny top-down map that does the exact same thing.

2) Mini Map as Spatial Notification System (Real Time Radar):
In addition to route and topographical data, the modern mini map is crowded with locational cues representing allies, enemies, weapons, stores / caches, locational objectives, ect. Within reason, this information can be very useful, but often this tiny portion of the screen pulls the player’s attention away from the game world. Particularly when driving, I’ve found myself navigating an entire city via the mini map as opposed to simply looking up and interacting with the environment – which means the ‘game’ I’m playing is actually only about 2 inches-square on screen.

In the case of Red Faction: Guerrilla ( as in most games ), I would prefer that UI directional queues point a player in the direction they need to go, and that game designers find creative ways to keep the player’s attention on the game world once the player arrives at their destination.

compass2

In the example above, the player is facing near-South towards their destination ( a triangle ). An ally resource ( a circle ) is to the right, while an enemy resource ( a stylized X ) is to the left.

Grenade and Ammo HUD

My first pass at the weapon HUD included weapon name, live ammo count, magazine count, and grenade count:

Once completed I determined that it was too dense relative to the rest of the UI – it particularly clashed with the Directional Compass. In simplifying the design I decided that since Alec Mason is not wearing a visible flak jacket, I should restrict the number of carriable items to 3 grenades and 4 ammo magazines. As seen below, I chose to graphically represent bullet, magazine and grenade data in order to more clearly communicate these limitations:

1) Grenade Count: I’ve differentiated anti-personnel explosives (grenades) from weapons that are more geared towards destroying buildings (remote charges). The circle is a simplified grenade silhouette.

2) Ammo Clip Count: The player character can carry 4 ammo mags per firearm. The example above is for the Assault Rifle, which carries 30 rounds per mag. When only 1 mag remains, that mag triangle would pulse on and off to remind the player to find some ammo. The wing on the right is a stylized arrow to subtly connect the ammo clip count with the ammo indicator.

3) Ammo Count: The bullets represented above tick down and are refilled as ammo is consumed and reloaded. I prefer audio indicators when bullets are low, (such as a pitch change when firing the weapon) as opposed to UI cues like blinking bullets or a color swap. Each weapon would have a different ammo representation, but all would fit into the horizontal bars seen above.

Weapon Reticle

Each weapon has it’s own reticle. For the assault rifle, I’ve simplified the leupold marmint reticle ( which has indicators for bullet range and drop ) into two simple triangles. Locationally I chose to orient the reticle in the center of the screen ( a’ la Valve’s Half Life ) as opposed to off-center ( as Bungie’s Halo does ). The reticle fades away when the player character is driving a vehicle, and changes color when pointing at enemies and allies.

Notes on the non-HUD elements (gun body and environment)

Red Faction: Guerrilla’s third-person perspective precluded me from using existing in-game screenshots for this project. Instead I used early promo-images of RFG’s martian landscape. I borrowed a gun from Unknown Worlds Entertainment’s Natural Selection – primarily because it had space on the gun stock for me to add my own ammo counter, and because it was high-res enough for my purposes. The nighttime image seen below was a daylight shot color-tinted blue.

Weapon Select Development Details

Weapon Breakdown:

TOP = Remote Charge: I developed this silhouette based on promotional renders of the weapon. I changed the detonator to a simple thumb trigger (more on this decision detailed in the Red Faction: Guerrilla logo redesign entry below), but retained the in-game design of the remote charge itself.

LEFT = Assault Rifle: I pieced together this silhouette from several different guns featured in different games, and did so in order to match the weapon that appears in the first person view above.

RIGHT = Sledgehammer: Throughout the project I chose to limit the importance and visibility of the sledgehammer, favoring instead the Remote Charge as the symbol and primary weapon of the Second Martian Revolution. That said, I do feel it’s important to include in the game, particularly when needing to expose load-bearing beams on buildings slated for destruction.

BOTTOM = EDF Rail Driver: Based on Volition’s concept art for the weapon.

Overall I chose to keep the weapon select screen as simple and strait-forward as possible. The game-world fades, and all other HUD elements are switched off while the weapon-select screen is active. Weapon-ammo is only detailed when a weapon is selected. The center selection ‘arrow’ does not spin freely (no 360° of movement), but rather turns 90° to face the quarter of the screen the player has selected:

Radio Transmission Development Details

I tried several different iterations of the incoming radio transmission element, using character profile-silhouettes, audio waves instead of bars, and attempts to incorporate the direction of the transmission based on the compass heading. All had some merit, but I chose the arrangement above for it’s simplicity and utility. The character photo is static, though interference would disturb the photo image when Alex Mason is out of range (in the Badlands for instance). The audio bars move relative to the incoming transmission, with the main bars pushing the smaller blocks from left to right. They smaller blocks would then slowly slide back to the left until they were once again pushed rightward. Color choices and the angles used were made to correspond with the rest of the UI.

Life Bar and and Damage Indicator Development Details

Life Bar: I really liked the fact that RFG hid the life bar when it wasn’t changing (when you’re either being hurt or ‘healing’). I stuck with this minimalist option, but chose to further shrink it down. Life drains from right to left, and pulses on and off when Alec’s health is below 20%.

Taking Damage: Meta representations of directional damage (like blood splatters) have been heavily featured in FPS games for the last 8 years or so. More literal alternatives include rendering veins on the edges of the screen to reinforce that you’re looking through the player character’s eyes. This idea of further linking the UI to the character’s physical being is appealing to me, but I haven’t always liked how it’s executed (too literal, too cartoony, or just too red). To avoid these pitfalls, the first path I followed was a doubling of vision to indicate trauma to the eye itself, which I quickly ruled out as too obstructive to gameplay.

The second attempt (above) is less literal and more representational: I considered the eye’s place in the skull, and depicted the immediate geography of bone in which eyes are encased (taking care to leave the center of the screen free of obstruction).  When shot or hit, waves of this ghostlike image will flash across the screen, it’s coloring dynamically sampled from the present on-screen palette. The idea being that instead of simply seeing red to indicate damage, your vision itself (through the physical shape of the eye) is being altered. If the screen is bright yellow, you’ll see a flash of dark orange or red. If the screen is dark blue, you’ll see a flash of light blue or purple, ect. Directional damage works the same way:

post_footer