Loss & Win In Game Menus
In-Game loss & win menus allow for the player to control the behaviour of the game when they lose or clear a level, giving the player a sense of direction in the game. These menus give players' options about how to proceed next once they have failed or cleared a level.
Menus appear on the screen as floating boxes or 'pop-ups' such that the rest of the game screen is still be visible behind them. Menus feature buttons which allow the player to choose whether to continue, retry or return to the main menu, depending on the menu type and the player's live count.
Buttons & Interaction: The Loss menu features 2 buttons, 'Replay' and 'Return to Main Menu'.
Structure & Design: The menu colour is a 'cold' blue with 'cold' (blue, purple) embellishments, the specific colours chosen was based on the colour palette of the game. (See Design Guide). This style was chosen to represent the contrast with the win screen, which has 'hot' embellishments (yellow, orange, pink).
Activation: The loss menu appears when the player's health drops to 0.
Buttons & Interaction: This menu features 2 buttons, 'Continue', which restarts the player at the beginning of the level, and a 'Main menu' which returns them to the menu screen.
Structure & Design: This menu will be similar in appearance to the loss menu described above.
Activation: The loss menu appears when the player's health drops to 0, and the lives count currently reads 0.
Buttons & Interaction: The Level Cleared / Win menu features 3 buttons, 'Continue', 'Return to Main Menu' and 'Replay'.
Structure & Design: The menu colour is a 'cold' blue with 'hot' (orange, yellow, pink) embellishments, the specific colours chosen were based on the colour palette of the game. (See Design Guide). This style was chosen to represent the contrast with the loss screen, which was 'cold' embellishments (blue, purple).
Activation: The win menu appears when the player clears the level by reaching the right-most edge of the screen.
Both screens feature design assets shown in the Design Guide for a consistent style throughout gameplay.
-
PlayerWinDisplay&PlayerLossDisplayCreates the visualisation of the pop up menus. -
PlayerWinActions&PlayerLossActionsHandles the actions taken when the buttons on the menus are pressed. -
PopupMenuActionsHandles actions after pressing buttons that are common across all pop up menus -
PlayerWinPopup&PlayerLossPopupTriggers the pop up menus based on the status of the game -
ForestGameAreaIs used to keep track of theplayere.g. health status, position on the map. This will be extended as additional maps are added into the game.
Currently, the menus are UIComponent's of the MainGameScreen, which are passed a reference to the player (Entity), game (GdxGame) and currentMap (GameArea) so that they can keep track of the player state in the game, make changes to the game accordingly (eg, set the new screen) and be aware of their location in the currentMap.
In the MainGameScreen's createUI method:
Entity ui = new Entity();
ui.addComponent(new ...)
.addComponent(new PlayerLossPopup(game, currentMap.getPlayer()))
.addComponent(new PlayerWinPopup(game, currentMap));
The MainGameScreen's constructor has been changed to retrieve a reference to the ForestGameArea object, so that it's player Entity and the endOfMap can be retrieved:
public MainGameScreen(GdxGame game) {
...
this.currentMap = forestGameArea;
createUI();
}
The appropriate getters were added to the ForestGameArea to retrieve the endOfMap and player.
public Entity getPlayer() { return player; }
public Entity getEndMap() { return endOfMap; }
Add a win or loss menu to a player by adding it to the MainGameScreen UI. Inside the MainGameScreen createUI method:
Entity ui = new Entity();
ui.addComponent(new ...) // Other entities for the UI
.addComponent(new PlayerLossPopup(game, currentMap.getPlayer()))
.addComponent(new PlayerWinPopup(game, currentMap));
The LossPopup only requires the player as it does not need to know where the player is in the currentMap. The WinPopup is passed the currentMap object so that it may have access to the currentMap information (when the player has cleared the currentMap) and the player, (from ForestGameArea's getPlayer method).
The final designs for the Loss and Win menus which will be placed into Ragnorak Racer are below. These screens are a second iteration after changes made from user testing. See the Pop-up Menus User Testing wiki page
Below are the designs of the previous Win and Loss screens added to the game.
| Previous Win Menu | Previous Loss Menu |
|---|---|
 |
 |
The designs of the Win and Loss menus were further developed and updated in Sprint 2, see the Score System page for more information. Custom loss screens were created to display and notify the player of the various loss conditions caused by different enemies and obstacles. Some information about the enemy obstacle will also be presented to the player, along with their score and button options to redirect to the main menu screen or replay from a checkpoint.
| Example Loss Screen | Robot Death | Ufo Death | Asteroid Death |
|---|---|---|---|
 |
 |
 |
 |
| Example Win Screen | |
|---|---|
 |
 |
Continue Screen: A new "Continue?" screen was created and displayed when the player loses one of their remaining lives. This aimed to help distinguish the different loss conditions. Previously the condition where the player losing one life versus the player losing all their lives used the same "You Died!" screen. The "You Died!" screen will now be displayed when the player loses all lives and must restart the game. If the player selects the "yes" button, they will respawn at their last saved location. If the player selects the "no" button, then they will return to the main menu screen.
| Continue Screen | Example Design |
|---|---|
 |
 |
Level Cleared Screen: The continue screen was also updated to reflect the game changes. With the addition of new levels, the "You Win!" win condition popup screen was no longer suitable to play at the end of each level. So, a new screen was designed to be displayed when the player reaches the portal win condition with the updated title "Level Cleared!".
| Level Cleared Screen | Example Design |
|---|---|
 |
 |