Beatborn UI

UI / UX DESIGN

7 weeks

12

Beatborn is a 3rd person rhythm-based hack-n-slash game.
It's designed to function like a tower defense game, where instead of placing turrets in order to defend a base, the player must move around to intercept the incoming waves of enemies and stop them from reaching and damaging the central core.

THE HUD

INFORMATION TO CONVEY

  • The core's HP
  • The player's HP
  • Visualization of the beat
  • Current SYNC power level (ulti-meter)
  • Wave progression
  • Total score
  • Current score multiplier

FINAL VERSION OF THE HUD

Through many iterations, the HUD was simplified to combine beat visualization, SYNC power and score multiplier into what is essentially one central UI element. Core HP was placed at the top of the screen, while information that has less impact on moment-to-moment gameplay is placed in the left border.

PLAYER HP

Since the player respawns while the core is alive, the most important one of these two HP values was the core's. The obvious solution was to have the player's HP regenerate and only indicate taking damage by tinting the screen.

This freed up a lot of screen real estate for the rest of the HUD.

TEACHING HOW TO PLAY

THROUGH THE TUTORIAL

Before any enemies arrive in the arena, the game presents the player with some tutorial text prompts, requiring the player to execute some sequence of button presses in order to progress. This was designed under the premise that "no one reads text". Therefore we required the player to

        - Attack to the beat for one measure (4 beats)
        - Execute all three combos

in order to make sure the player had performed these actions at least once.

THROUGH THE OPENING CINEMATIC

I designed and implemented the opening cinematic to both serve as a way of introducing the level's geography, as well as introducing the "character" of the core that the player is tasked with protecting.

As a part of this exposition, the core also teaches the player about the basic premises of gameplay:

        - The player should protect the core
        - Attack to the beat to make more damage
        - The player will respawn as long as the core has HP left

DURING GAMEPLAY

As a way of reinforcing to the player that no damage is done when attacking off beat, we used several audio cues. The audio ducks in volume and a sound effect is played, as well as the beat visualizer saying "Missed". This created enough of a difference to playing on beat to get players to start playing the way we intended.

When the player has collected enough SYNC power by playing to the beat, a prompt appears, instructing the player how to use this power.

Instructions on how to perform combos are available at all times in the game's pause menu.

UX

MAIN MENU

For menus, we decided to go with radial menus, as this look would underpin and establish the game's theme of a synthetic world from the start.

UX WIREFRAME

We decided to start the game with an epilepsy warning, since the game contains a lot of rapidly shifting visuals.
The game is divided into threat levels, which are essentially three levels of increasing difficulty. The player can choose which one to play from in the main menu, or choose to replay the current threat level at game over.