On the Line
I undertook the main role of UI developer and secondary role of level designer for this team project, 'On the Line'. I made the necessary code to show the states of core gameplay mechanics in widgets for the player to interpret, as well as menu screens that provide the player with smooth navigation throughout the game. I drew artwork in Photoshop for all of these elements that represent recognisable symbols to make the UI intuitive and stick to the intended themes. Fight to survive the Alaskan salmon run and reach the spawning pool as a vulnerable fish in this satirical horror PC game!
To arrive at my final designs for the game's main HUD UI, I sought after feedback to make frequent iterations alongside the progression of the project. For the game's hunger system, It was ultimately decided a worm would be most readable due to its more common association with fishing bait. Its thin silhouette also resembles the stamina system's zap icon, making the two designs fit alongside each other more harmoniously. Below are examples of proposed concepts for the hunger icon:
Custom artwork was also required for progress bars that appear during intense fights against fishing hooks, nets, and bear enemies, a core feature of gameplay. Initial sketches I received from team members requested a gritty textured appearance to UI. I was able to adhere to this design brief whilst making modifications when required for mechanical compatibility as a developer. The imagery chosen for each icon is themed around the enemy type it belongs to.
HOW IT ALL WORKS
During gameplay, the fish slowly becomes more hungry and attracted to dangerous bait, demanding players to seek out food within the environment. The hunger bar UI in the top left corner empties to communicate this. If they do get caught, the strenuous struggle to escape begins, and the stamina bar becomes functional. It can be seen depleting the more the player fails during combat. For each enemy type, the fight bar at the bottom of the screen changes colour to reflect the progress of the battle, signalling close escape or near death. If the player does well when tackling a hook, they are awarded a 'second wind' to replenish their stamina for a last chance at pulling free. Screen effects are present as a fight advances, such as a jagged vignette pulsing on screen, surrounding the player character to make them appear vulnerable. All similar UI is grouped together to improve the composition and order of information, ensuring the player's view isn't obstructed.
As shown in the video demonstration, further UI designs are present throughout gameplay. The W, A, S, D keys need to be pressed on the player's keyboard when fighting back against enemies. They never know what's coming, however, as any letter can appear at any time, acting as QTEs. The UI that informs them of which key to press is coloured and animated in such a way to convey tension in reference to horror tropes seen in media. The icons have harsh jagged movements and jump out at players swiftly. Implementing more dynamic UI involves knowledge of animation and Unreal Engine timelines.
The player can get hurt during fights, which they are made aware of through this damage indicator icon. They are able to sustain injuries to each of the four main body parts of the fish, which I represented in a simple yet effective manner. Each segment of the icon flashes red when hit to warn the player, with a skeletal centre appearing over time as they approach their demise. Health slowly regenerates before reaching permanent damage. This morbid approach to the visuals supports the intentions of the game's tone.
If one of the four limbs does become permanently damaged, certain gameplay abilities will be impaired. This includes wobbly movement if the fish has broken fins, slower speed if the tail is injured, and an inability to eat with a broken mouth. The UI needed to demonstrate the severity of this occurrence and be sure the player was aware of it. I designed and implemented images that pop-up on screen when this happens, each reflecting one of the main damage possibilities. I produced a stylised, comical depiction of a salmon displaying a dumbfounded expression. The scratchy black background resembles the visuals of other UI seen in the game, whilst the loud red text grabs the attention of the player.
To make UI elements more dynamic, I needed to plan out the way they would be made to move on screen, and how this will effect their impact on the player. The W, A, S, D keys begin small and expand outwards in a fast motion, making their appearance punchier and demonstrating an event that is just beginning. The damage pop-ups appear when an event has already occurred, which was sustaining damage, therefore it is animated to fade in from large to regular size. The images smack onto the screen with force and shake intensely to induce panic.
If the fish jumps out of the water, they will become stranded on land, slowly running out of breath. When this happens, four bubbles will appear on screen at the top of the screen to act as a timer counting down, popping one after another until it's game over. Players must frantically find their way back to safety as they flop on land, which I depicted as a looping animated icon placed beside the timer to add some context and personality.
Below are examples of sprite sheet creation to achieve the intended results. These series of images act as animation frames, allowing moving UI to be incorporated into games:
Part of improving the user experience involves consideration of how the player will progress between all elements of the game, which requires setting up a comprehensive set of menus. I also made custom buttons for the player to press to access each screen, as well as an image detailing all keyboard controls in a straightforward manner. I came up with the concept for the main menu background and guided a collaborating game artist to complete the final artwork seen in the video. I made elements of this artwork move on screen to bring the player into the experience much more. I wanted the colour palette to appear warm, creating a murkier foreboding atmosphere. Muted red accents for diluted blood is also used for the theme of horror, which is present in the 'game over' menu screen.
This Figma wireframe of the main menu I put together demonstrates my design intentions in order to make alterations before production, communicating my ideas effectively for a finalised decision to be made. The prototype allowed me to predict the player's order of interactions with the menu system, as well as consider the prioritisation of content. Certain elements held a higher level of importance and needed to be implemented within the time frame of the project. The feel for player interactions was solidified here, with the goal of achieving a quick and responsive interface. All required menus should smoothly transition between each other, remaining visually consistent and accounting for backtracking.
My prior experience with level designing saw me taking up this role in earlier stages of production to populate the introductory ocean area of the game with lush foliage. The player is given the chance to become accustomed to the world and movement controls as they slowly venture through rocky twists and turns, stealthily avoiding killer whales along the way. I have a strong ability to multitask and provide artistic guidance on various aspects of a project.
When planning the player's journey throughout the play space, I take game theory into consideration to effectively implement core mechanical elements. I bring my concepts through the sketching and white box phase before building the level with assets and lighting.
