Green Reaper

In Green Reaper, you play as a small flower creature purifying a greenhouse from the corruption of enemy mushrooms. The game was made using Unreal Engine 4.

This was a group academic project lasting from Sept 2021 to Dec 2022. I was the UI and UX designer, with a heavy focus on the in game menus and HUD. The game was a finalist in the 2023 Rookie Awards.

Download on Steam

HUD

The HUD was iterated on many times throughout the project, as we tested and discovered what helped the player intuitively know what they needed to know.

Care was taken to ensure that no HUD element overlapped another, even temporary ones that rarely showed up at the same time.

All text was given a subtle border to make reading against complex backgrounds easier while still blending with the artistic style of the environment.

Health Pips

Losing Health

Gaining Health

The Problem: Players did not understand what the health pickups did when they found them.

The Solution: Animate the health pips to draw attention to the changing health.

Health pips were made red and heart shaped to make it easier to identify their purpose.

When touching a health pickup, the health pips briefly grow to help players notice the change.

When taking damage, the health pips shake violently to help players notice the change.

Green and red vignettes were added for healing and damage, respectively, to help players notice changes to their health, as well as make those changes feel more impactful.

The images were made by our UI artist, the animations were done by me.

Special Attack

Refilling special attack

Full special attack

Dynamically changing button prompt

The Problem: Players could not remember the button to do a special attack.

The Solution: Include a button prompt on a full special attack meter.

The special attack is refilled by defeating enemies and gathering their "souls" (it also slowly fills over time). Gathered souls move from the defeated enemy to the special attack meter to help the player understand this concept.

When the meter is full, it emanates sharp rays of light, to give the impression that a power is ready to burst out. The meter and souls are yellow, a high energy color to match the high energy attack.

A button prompt appears next to a full meter, to remind players what button they need to press. The prompt only appears when the meter is full, so players aren't confused when pressing the button while their meter is empty.

The button prompt changes between the keyboard and controller when the player presses a button on one or the other.

The images were made by our UI artist, the animations were done by me.

Text Boxes

Controls tutorial

Area description

The Problem: Players had trouble reading the text over plants in the background

The Solution: Give the text a subtle outline, include a semi-transparent text box

Area descriptions were placed center screen above the player, overlapping the view of the environment, to emphasize that these are statements about the world around them.

Area descriptions never appear in combat or during tricky jumps, so they don't block the player's view during critical times.

Control tutorials overlap the player character, to reinforce the idea that these are actions the player takes.

We had to balance the ability to read the text without completely compromising the view of the area, as the art was considered one of the most important aspects of the game.

Soul Meter

Collecting a soul

Soul meter full

The Problem: Players don't understand the purpose of the soul meter

The Solution: Cut it from the game

Early iterations of the game featured a “soul collection” meter, which filled when collecting glowing orbs dropped by defeated enemies. When the soul meter was full, players could press a button to cleanse the area and move on.

Players did not understand the meter or its purpose, constantly confusing it for the special attack meter.

Ultimately, we decided that the area cleansing could happen automatically, without player input, as soon as the last enemy was defeated. Removing this HUD element removed a lot of confusion and made for overall smoother game play.

While it didn't make it into the final product, I'm proud of the work we did on this HUD element.

The image was made by our UI artist, the animations were done by me.

Menus

The Main Menu was made to be relatively simple, allowing the player to focus more on the visuals of the game. Fonts and button styles were given an elegant look, to match the elegant bearing of our protagonist. Fonts were also chosen for thickness, as they would frequently be seen over complex backgrounds, and needed to be readable.

Minor animations were added to allow menus to slide in and out as the player transitioned between them.

Wireframes

UI Flowchart

A basic flowchart was made to help ensure that all screens were accounted for, and to show the player's journey through the menus.

Final Product

Main Menu

Though the specific buttons changed, the overall design remained mostly the same as the beginning.