Title Screen - UQdeco2800/2021-studio-6 GitHub Wiki

The title screen displays the title of the game as well as a button for each menu option, which the user can then select.

The current buttons on the menu are: Start button - Starts a new game by setting the screen type to "MAIN_GAME". Settings button - Lets the user adjust game settings by setting the screen type to "SETTINGS". Exit button - Quits the game by calling game.exit().

The title screen will be disposed when the user clicks on any of the buttons on the title screen.

Class Overview

  • MainMenuScreen.java handles:

    • load/unload of all the assets required for the main menu
    • creating the UI for the MainMenuDisplay.

  • MainMenuDisplay.java handles:

    • Adding the assets on the stage and determining the layout of these assets. The layout is controlled through the use of a table.
    • Adding music and sound effects
    • Adding the animated background using the textureAtlas
    • Adding listener events to the buttons
    • Resize elements when a screen resize has been detected

  • MainMenuActions.java handles:

    • Functionality for when a button is activated in the "MAIN_MENU" screen.

Unified Modeling Language

Note: Right click and select open image in new tab to see the full quality image.

This is the UML diagram that shows the connection between main menu related classes. For simplicity, only the classes immediately connected to the main menu classes are shown on this diagram.

Note that the MainMenuAction class receives the button events through the EventHandler sending an event to the entity attached to the UIComponent class (through the parent Component class). This has been intentionally left out to keep the focus on the main menu classes.

Assets loaded to display the title screen

  • images/title-screen.atlas: This contains the information regarding each frame in the background animation. The background animation includes the distant light, the title text, and the lamp.

  • images/sounds/title-screen-music.mp3: This is the title screen music that is played on loading the "MAIN_MENU" screen. The music is approximately 25 seconds long and will continuously loop in the background until a button has been activated.

  • images/sounds/rollover.mp3: This is the sound effect that is played whenever the user rolls over a button, i.e. when the "enter" listener for a button is activated. The sound effect can not be played again until the "exit" listener has been activated.

  • images/sounds/click.mp3: This is the sound effect that is played whenever the user activates a button. Note that this sound effect is not disposed of immediately with the rest of the menu screen and is instead disposed of after a 0.2 second timer to allow the sound effect to finish.

How to add a button

Within the MainMenuDisplay class "Add Actors" method:

  • Step 1 - Add a new TextButton
TextButton startBtn = new TextButton("Start", skin, MENU_BUTTON_STYLE);
  • Step 2 - Call the addButtonSelectListener method with the following parameters: Button button, String eventTrigger, String debugCommand. When a user activates the new button, this will play the click sound effect and run the event trigger specified. The debugCommand is to specifiy what text will be displayed in the logger debug when the button is clicked on.
MenuUtility.addButtonSelectListener(entity, startBtn, "start");
  • Step 3 - Call the addButtonRolloverListener method with the button as it's sole parameter. This will add the rollover sound when the user mouses over the new button.
MenuUtility.addButtonRolloverListener(startBtn);
  • Step 4 - Add the button to the table called "table"
table.add(startBtn);

Within the MainMenuActions class:

  • Step 5: Within the "create" method, add a new listener for the event trigger you have specified in step 2.
entity.getEvents().addListener("start", this::onStart);
  • Step 6: Add a new method that the new event trigger (from step 5) will call when the button is selected.
  private void onStart() {
    logger.info("Start game");
  }

How to initiate the title screen

Call the setScreen method to display the MAIN_MENU screen:

setScreen(ScreenType.MAIN_MENU)

Further Reading