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

Red Faction: Guerrilla Main Menu Redesign (personal)

Main Menu Development Details

Menu Logo: Overlayed on the curve of the planet, the Red Faction logo’s color has been changed to resemble the surface of the sun. This was done to make it stand out, as well as allude to the conflict of the Second Martian Revolution.

Menu Options: I considered using frames or even tabs to arrange the menu options, but chose a basic text-wall for player expediency. Please note that this menu assumes that a single-player game has already been saved. Overall I made several changes to the menu choices:

1) Load Game is now the default (top) option. I prefer this arrangement as it gets the player back to their game faster.

2) The original Red Faction menu had 8 choices. I removed System Link, Downloadable Content, and Wrecking Crew. They are now nested beneath the new Extras heading.

3) I changed XBOX Live to Multiplayer for clarities sake: I feel it’s more specific.

Background: RFG’s character-silhouette background was at times very busy. I like the idea of starting each gameplay session with a simple image of mars because it’s a clear reminder of the gameplay goals: to wrestle control of the planet away from the EDF. The image of mars itself is courtesy of NASA. The colors and tone were changed to make it more easily identifiable as mars. If animated the planet would slowly turn clockwise.

post_footer

Red Faction: Guerrilla Logo Redesign (personal)

Promotional Poster Development Details

The Poster Design: A spin on the Cold War’s anti-communist slogan “Better Dead than Red”, the miners of the First Martian Revolution used the transposed ‘Better Red than Dead’ as a rallying cry. When the Red Faction re-emerged to engage the EDF authorities in the Second Martian Revolution, I like to think the colonists whispered the phrase to spread word of the rebellion. Both the colors, the text, and the imagery pay homage to the Russian Constructivism movement of the early 20th century.

Swapping the Sledgehammer for the Remote Charge: While Red Faction: Guerrilla featured the sledgehammer as both it’s primary melee weapon and symbol of the revolution, I felt the switch to First Person Perspective required a reconsidering of it’s place in the game world. As an FPS I think RFG would focus more on either breaking or shooting into buildings, setting remote charges at key locations, then escaping with your life prior to detonation. Being a mine engineer, abundant access to and knowledge of explosives should be Alec Mason’s primary skill, not his ability to swing a hammer.

I chose to simplify the design of the handheld detonator to make it seem universal in the hand of the player-character: anyone can pick this symbol up and ‘hit the button’ to enact change.

Second Martian Revolution Symbol Development Details

The images on the left are a stripped-down version of the fully rendered image above. I prefer the image in the lower-left, as it’s red background invokes the planet Mars more clearly. The more detailed version on the right is a mid-step between the simple logo and the detailed one above.

post_footer

Red Faction: Guerrilla Logo Development Details

Main Title: The upper portion of the logo (Red Faction) is Adobe’s Gothic Std font with angular embellishments. I started the design process by reviewing promotional materials for the original Red Faction (2001), and chose to recreate it’s gradual curving line (assumably a nod to the surface of Mars). I also chose to keep it horizontally tight in order to better enclose the Gorilla subtitle.

Subtitle: Since much of the game is focused on wrestling territory away from the EFG, I developed a faint grid-like pattern (nodding to topographical maps) to hang behind the Guerrilla subtitle.  The 45 degree angle of both the grid and the font itself is repeated throughout the HUD. The Guerrilla font is an original one based on the grid, and similar to the posters above invokes a Cyrillic-style popular in Russian print-media.

Detailed Logo: For the more detailed logo (top) I chose to add sparks to indicate conflict (and explosions!) and a color-shift to represent the land of Mars and the space above it.

post_footer