Main Menu Screen

Feature - Main Menu Screen

Description of Feature

The main menu screen is the first screen which appears when the game starts. Different screens of the game can be accessed by clicking on the buttons on the main menu screen. The user can either click on "start" button to play the game, click on "tutorial" button to access the tutorial, click on "setting" button to change settings of the game or click on "exit" button to exit the game.

Clicking on the start button directs you to the game story screen where the background story of the game is given.

Design

The main menu screen have space background with spars. The similar background is followed on other screens to maintain design consistency. The title and buttons used in the main menu screen are designed using Canva. These buttons are used on other screens as well to maintain consistency with design.

Initial Design - 1

Initial Design - 2

Initial Design - 3

Final Design

Buttons

The following buttons were created for main menu screen:

• Start
• Tutorial
• Setting
• Exit

• The user can press "START" button to start the game. Game will be started after game story screen.

• "Tutorial" button to access tutorial of game,

• "Setting" button to change setting of game

• Clicking on "EXIT" button will exit the game.

The Main Menu Screen can be found under source/core/src/main/com/deco2800/game/screens/MainMenuScreen.java

...
 public class MainMenuScreen extends ScreenAdapter {
  private static final Logger logger = LoggerFactory.getLogger(MainMenuScreen.class);
  private final GdxGame game;
  private final Renderer renderer;
  private static final String[] mainMenuTextures = {"images/Ragnarok_main_title.png", "images/ragnarok_background.png","images/space-background.png",
  "images/ragnarok_title.png", "images/purple-title-1.png","images/purple-title-2.png"};

  public MainMenuScreen(GdxGame game) {
    this.game = game;

    logger.debug("Initialising main menu screen services");
    ServiceLocator.registerInputService(new InputService());
    ServiceLocator.registerResourceService(new ResourceService());
    ServiceLocator.registerEntityService(new EntityService());
    ServiceLocator.registerRenderService(new RenderService());

    renderer = RenderFactory.createRenderer();

    loadAssets();
    createUI();
  }
...

...
private void loadAssets() {
    logger.debug("Loading assets");
    ResourceService resourceService = ServiceLocator.getResourceService();
    resourceService.loadTextures(mainMenuTextures);
    ServiceLocator.getResourceService().loadAll();
  }

  private void unloadAssets() {
    logger.debug("Unloading assets");
    ResourceService resourceService = ServiceLocator.getResourceService();
    resourceService.unloadAssets(mainMenuTextures);
  }

  /**
   * Creates the main menu's ui including components for rendering ui elements to the screen and
   * capturing and handling ui input.
   */
  private void createUI() {
    logger.debug("Creating ui");
    Stage stage = ServiceLocator.getRenderService().getStage();
    Entity ui = new Entity();
    ui.addComponent(new MainMenuDisplay())
        .addComponent(new InputDecorator(stage, 10))
        .addComponent(new MainMenuActions(game));
    ServiceLocator.getEntityService().register(ui);
  }
}
...

The logic behind the Main Menu Screen can be found under source/core/src/main/com/deco2800/game/components/mainmenu/MainMenuActions.java

...
public class MainMenuActions extends Component {
  private static final Logger logger = LoggerFactory.getLogger(MainMenuActions.class);
  private GdxGame game;

  public MainMenuActions(GdxGame game) {
    this.game = game;
  }

  @Override
  public void create() {
    entity.getEvents().addListener("start", this::onStart);
    entity.getEvents().addListener("exit", this::onExit);
    entity.getEvents().addListener("settings", this::onSettings);
    entity.getEvents().addListener("tutorial", this::onTutorial);
  }

  /**
   * Swaps to the Main Game screen.
   */
  private void onStart() {
    logger.info("Start game");
    //Goes to story screen before main game screen
    game.setScreen(GdxGame.ScreenType.GAME_STORY);
  }

  /**
   * Exits the game.
   */
  private void onExit() {
    logger.info("Exit game");
    game.exit();
  }

  /**
   * Swaps to Tutorial Screen.
   */
  private void onTutorial() {
    logger.info("Launching tutorial screen");
    game.setScreen(GdxGame.ScreenType.TUTORIAL);
  }

  /**
   * Swaps to the Settings screen.
   */
  private void onSettings() {
    logger.info("Launching settings screen");
    game.setScreen(GdxGame.ScreenType.SETTINGS);
  }
}
...

The logic behind displaying the Main Menu Screen can be found under source/core/src/main/com/deco2800/game/components/mainmenu/MainMenuDisplay.java

...
 // start button

      Button.ButtonStyle startStyle = new Button.ButtonStyle();
      startStyle.up= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_start1.png"))));
      startStyle.over= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_start2.png"))));
      Button startBtn = new Button(startStyle);

      // Setting Button
      Button.ButtonStyle settingStyle = new Button.ButtonStyle();
      settingStyle.up= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_setting1.png"))));
      settingStyle.over= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_setting2.png"))));
      Button settingsBtn = new Button(settingStyle);
...

...
 // exit button
      Button.ButtonStyle exitStyle = new Button.ButtonStyle();
      exitStyle.up= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_exit1.png"))));
      exitStyle.over= new TextureRegionDrawable(new TextureRegion(
              new Texture(Gdx.files.internal("images/FDS_btn_exit2.png"))));
      Button exitBtn = new Button(exitStyle);

        // Triggers an event when the button is pressed
        startBtn.addListener(
            new ChangeListener() {
              @Override
              public void changed(ChangeEvent changeEvent, Actor actor) {
                logger.debug("Start button clicked");
                entity.getEvents().trigger("start");
              }
            });
...

...
 table.add(title).padBottom(60f);
    table.row();

    table.add(startBtn).size(200f,80f).padTop(20f);
    table.row();
    table.add(settingsBtn).size(200f,80f).padTop(15f);
    table.row();
    table.add(tutorialBtn).size(200f,80f).padTop(15f);
    table.row();
    table.add(exitBtn).size(200f,80f).padTop(15f);

      tablebackGround.add(background).size(Gdx.graphics.getWidth(), Gdx.graphics.getHeight());

      stage.addActor(tablebackGround);

    stage.addActor(table);
...

User testing

testing plan

Plan

The main goal of user testing is to gather feedback for our main menu screen. Feedback from people other than studio will be extremely helpful - providing us with unique and unbiased perspective for our design. The feedback we receive will then be taken into consideration when finalising the main menu screen design.

In the user testing, participants will be shown a variety of main menu screen designs. Design will be analysed using SUS method, as to gather information (e.g. likes, dislikes and suggestions). The result will be analysed and taken into consideration.

user testing for main menu screen can be found here

** Result and Analysis**

Through SUS results we can find that the mark is all above 80 which means participants are all satisfied with the main menu screen on both function and designs (Purple titles and background images.) On the other hand, users can complete tasks in a design walkthrough session which means it’s easy for all of them to complete the tasks. The functionality works well by the main menu screen with buttons.