Lukas Čižauskait ė
Game Designer
Technical UI
21 People
8 Weeks
Unreal Engine
TARGET AUDIENCE
PLAYER EXPERIENCE
A co-op twin-stick bonk’em’up (hack n’ slash) that was created with families and children in mind. Therefore, the game was focused on simple puzzles, flashy visuals and an interactive world.
When creating a UI for a couch co-op played by parents and children, the design focused on:
-
Large, easily readable structures and icons;
-
Familiar UI elements from other party games to invoke understanding;
-
Complementing gameplay without obstructing it.
When designing UI for parents and their children, it had to be:
-
Goofy and bright like the rest of the game;
-
Clearly colour and shape coded for quick and easy understanding;
KEY FEATURES
DESIGN PROCESS
As a UI designer I had these responsibilities:
-
Designing and wireframing UI pieces;
-
Leading my personal UI strike team;
-
Aligning vision of the UI with the team;
-
Researching UI implementation;
-
Delivering updates about progress.
The project followed a simple structure:
CONCEPTING
PREPARATION
IMPLEMENTATION
ITERATION
PREPARATION & PROTOTYPING
PROPOSAL
The proposal that was made after aligning within the team and producers for UI elements.
The most unique part of this proposal was the in-game main menu that would be used as an onboarding level. This proposal screen was used to track progress of each feature to report back to the team and artists within the UI strike team.
Flowcharting
CONCEPTING
To create a clear structure within the engine, a flowchart of features and functionality was essential to easily translate the proposal into the game. Due to the length of the project and the potential that help will be needed elsewhere - it was important to outline which features were essential and which could be cut without diminishing the experience.
Strike team communication
CONCEPTING
KEY FEATURES
To promote clear communication between the UI strike team members, a chart of features, their expected functionality clearly written and references attached was added. The chart was required to be filled by the team members in respective sections: the artists would showcase their art and I would update functionality additions.
PROTOTYPING
Prototyping was done early within Figma to test the placement and shape of the UI pieces. This was also used to provide the artists with an asset list as soon as possible with the variables that will be necessary to showcase to the player.
IMPLEMENTATION & ITERATION
Layering
After prototyping and sending artists a list of art needed for the UI, we discussed how to best layer them and have each piece contribute to showcasing important functionality.
The Off-Screen Indicator is meant to accurately show to the player where their character is even when exiting the camera view. For this, the artists layered:
-
The clown face that would be painted during runtime based on clown color;
-
The outlines of each piece so they contrast against each other;
-
The pointer circle that always points towards the character’s position.
EXAMPLE
IMPLEMENTATION
Functionality
With modularity in mind, widget blueprints were implemented to support changing the tints of icons and buttons. This was done as we had plans to test out different colors of the main characters.
Along with those options, the blueprints were constructed to account for viewport sizing due to the game being a couch co-op, likely played at a TV.
Within the widget blueprint only the Indicator Icons overlay would spin and points towards the player while the Clown Icon overlay would follow the location of the previous but not the rotation.
IMPLEMENTATION
Gameplay Connection
During the game, a key goal of the player is to keep their clown car alive as the player characters have no health or pure death state. Because this is a moderately unfamiliar concept to most co-op games, there was a need to connect the health bar at the top of the screen to the clown car.
At first we relied on icons, but after the first playtests and feedback, we decided on teaching the players how to heal the car within the hub and creating an animation that always starts from the car to further connect the pieces.
IMPLEMENTATION
Animations
To accentuate the style of the game and encourage the player to look towards the health bar when it changes - large movement within the animations were essential. These large movements and size changes would create visual interest even in high visual noise.
IMPLEMENTATION
Curtain opens and closes as level loading screens.
Health bar reacts to each hit, whether from enemy or player.
Enemy Intros
As a way to make the enemies that the player faces more memorable and give a hint to their defeat, we decided to make some simple enemy intros.
These were made in engine using the Cinematic Camera component to record pre-made animations, textures and lighting. After recording, they were stored as PNG files that would be played by a PNG sequencer within the UI.
IMPLEMENTATION
Trip to Elfia
During our trip to Elfia, Going Bonkers was part of the Breda University of Applied Sciences booth. The children and adults alike came to play the game with it being a particular hit with the little ones.
Within Itch.io the game was viewed 800+ times with 150+ downloads.
RECEPTION
RETROSPECTIVE
This was one of the first projects that I had partaken in with a large amount of different students and awesome contributions. I loved being in an incredibly creative, fun and extraverted environment. Getting a team of such size focused on a single target and reaching it to get great reception by the end of its development from the target audience was incredibly gratifying and still one of my favourite projects.
If I could approach this project again and its technical UI components, I would:
-
Focus on collaborating more closely with level designers for the in-level main menu;
-
Establish rules for art creation for UI as early as possible and create similar communication strategies along with the strike team;
-
Actively request updates on features to expand how the UI could be used for game to player communication;
-
Expand on and research further a good UI for a co-op environment.
Overall, I am incredibly happy with how the project turned out and grateful to my fellow teammates for the amazing experience.