Keyboard Functionality for Main Menu

Description

The keyboard functionality for the main menu enables users to navigate the main menu without needing to use a mouse. Users can navigate the main menu buttons by pressing the UP and DOWN arrow keys, and then press ENTER to confirm the button selection. This functionality works in conjunction with the original method of using mouse to navigate with main menu.

When using the keyboard to navigate the main menu buttons, a custom designed frame is used to highlight the player's currently selected button. This frame is designed around the retro game theme.

Key Components

The key components of the functionality are:

1. render() in MainMenuScreen
2. pressMenu() in MainMenuDisplay
3. updateMenuFrame() in MainMenuDisplay

Operation

Keyboard Functionality

To implement the arrow keys and Enter to interact with the Main Menu, this was down by adding 3 if statements into render() in MainMenuScreen().

if(Gdx.input.isKeyJustPressed(Input.Keys.UP)){
        MainMenuDisplay.moveUp();
    }
    if(Gdx.input.isKeyJustPressed(Input.Keys.DOWN)){
      MainMenuDisplay.moveDown();
    }
    if(Gdx.input.isKeyJustPressed(Input.Keys.ENTER)){
      MainMenuDisplay.pressMenu();
    }

Each if statement is for each of the desired keys, UP, DOWN & ENTER and each has a corresponding function

moveUp and moveDown

These two function are both in MainMenuDisplay and function to increase or decrease a variable to track which menu item is currently selected. Each function has a respective function to ensure that

updateMenuFrame()

This function serves to update each button and the menuFrame to the current selected button

pressMenu()

This function serves to activate the currently selected button

Visual Representation

Iterations and concepts of potential pointer styles:

Demo:

User Testing

User testing was conducted in order to further narrow down the exact style and layout of the main menu. Clips of unique game menu designs from existing games were showcased to users. Then, comparing to the context of Retroactive, they ranked each menu style based on the most suitable for the game.

Full Test Results Here

Key Findings

• Almost all users prioritised style over graphics quality for Retroactive (i.e. rejecting a triple A menu for a retro one)

• Almost all users identified Retroactive as an 80's arcade game

• "Flashiness" was prioritised over accuracy to era, meaning dynamic menus look better than boring static ones (i.e. Street Fighter)

• Users preferred a main menu with clear indicators and keyboard based controls

• An overly minimalistic design may be user friendly, but testers found it to be too boring