top of page
VICTORIA CHASTAN
UI DESIGNER, ARTIST
About
Project Details
Role Summary
Style Guide
This is a 3-month user-interface individual assignment. The objective is to create the user interface design based on the gameplay and genre of any choice. Wildforst is a 2D platformer Metroidvania game about a fire being called a Pyros, exploring the ruins of a city engulfed by darkness and frigid cold.
Tools
Duration
Photoshop, Azure RP 8
September 2018 – December 2018
UI Artist
-
Created UI style guide and wireframing
-
Created UI concept and implemented them into project.
-
Conceptualized art direction, colour scheme and UI transition.
-
Create and managed 2D game assets.
-
Improved UI and visual issues thanks to class and lecturer feedback.
Development
High Concept
The first hurdle of this assignment faced was "what should the concept be" for a platformer game - a common genre most companies aim to create a game that stands up. The original alpha project started with combining survival elements in a 2D platformer such as light opacity and item crafting.
The project draws inspirations from popular platformers and survival games like Hollow Knight, Dead Cells, the Flame in the Flood and This War of Mine. It has an urban fantasy theme that aimed to have a Hub & Spoke layout using clean and simplified geometric shapes. The design of the vital information was important to jump forward and catch the eye more than other user interface elements, such as health, enemies' states, interactable objects etc.
Below is the flowchart on the menus and what condition is needed for each transition between them.
The game concept is where the protagonist is a main source of light that has a limited radius for the player to see their surroundings. However, the light also attracts enemies - black creatures that blend into the darkness. Enemies can be seen by their bright orange internals in their ribcages.
Alpha HUD
When the light radius overlaps on an enemy, they will go into a hostile state - a brighter, saturated intensity of their internals - and attack the protagonist until they lose interest.
Idle
Hostile
The protagonist cannot permanently die but the flame is extinguished. The flame appears at the last checkpoint - a fire source - where the player controls. The player will need to return to the last point the protagonist's body is at. The protagonist is revived with a moment of time where they are safe: their light radius is smaller and enemies will be not interested after some time has passed.
Attacked
Death
Checkpoint
Attacked
1/3
The protagonist cannot permanently die but the flame is extinguished. The flame appears at the last checkpoint - a fire source - where the player controls. The player will need to return to the last point the protagonist's body is at. The protagonist is revived with a moment of time where they are safe: their light radius is smaller and enemies will be not interested after some time has passed.
There are ways to avoid death: the player can hide at interactable objects and wait it out or use weapons to temporarily stun the enemies. Enemies, however, cannot be killed, making the best option is to quickly get away as soon as they are stunned. The levels provide many ways to avoid enemies such as taking to the roof or sneaking around through vents or behind a blockade. Certain items (example: flare from a flare gun, attraction light, snowball) can also help temporarily distract enemies to give the player a window of opportunity.
Because the theme is a survivor's journey, most of the menus are designed as a journal to contain vital information and navigation menus. The transition and the animation for the journal are that of a book with its pages turning. First, a closed book sliding up from the bottom of the game screen before it opens up to reveal its contents. When the player selects a navigation button to the specific menu, the pages will turn over or a piece of paper will slip from the pages and onto the opened book. The audio cue for these transitions are sounds of paper moving or flipping. Some submenus have a simple transition of sliding from the right side of the game screen.
Options - Game
Options - Video
Options - Control (Keyboard/Mouse)
Options - Game
1/5
Save Slot
Credits
Save Slot
1/2
The HUD needed to stay out from game environments that use dark colours so that input buttons or interactable objects wouldn't be obscured because of poor colour palette or saturation choices.
The choice in typography was also relevant in design for the player to be able to read it - using two different font types, one for aesthetic purpose and the other for standard, and with white colour against dark backgrounds catches the eye instantly.
Input Buttons (Controllers)
Input Buttons (Keyboard/Mouse)
Inventory (closed, activated and inactive states)
Input Buttons (Controllers)
1/3
More details in the Style HUD Guide above.
bottom of page