How to design a multi-step game menu system?

Question

I am getting started with game programming. I am designing a game that starts by taking you through a series of menu screens. I am interested in learning how this is typically structured in professional game development.

Currently I handle the controller inputs from the main file and have individual classes for each menu screen. When the user makes a selection, I need to transition to the next menu screen. It seems like I either need some sort of "menu screen manager" for keeping track of the previous selection and transitioning between menu screens, and/or I need to pass the controller input handling down to the menu objects, since I want to use up/down on one menu and left/right on the other menu.

How would a professional game programmer architect/design this?

require "components/first_menu"
require "components/second_menu"

first_menu = FirstMenu.new
second_menu = SecondMenu.new
menu = first_menu
menu.render

on(controller: "up")   { menu.prev_option }
on(controller: "left") { menu.prev_option }

on(controller: "down")  { menu.next_option }
on(controller: "right") { menu.next_option }

on(controller: "buttonA") do
  if menu.is_a? FirstMenu
    menu.hide
    selected_option = menu.select_option
    menu = second_menu
    menu.show(selected_option)
  else
    selected_option = menu.select_option
    launch_game(selected_option)
  end
end

Answer 1

If you have nested menus, you can use a stack. I'm not familiar with Ruby, I think there is no 'stack' object. Similar behavious can be created using an Array. You only add items to the end (push), remove the last item (pop) and can interact with the last item (peek).

So the basic idea is: you define a menu class with update() and draw(). This should be a basic menu implementation. Then you create a menumanager that controls what menu gets updated and displayed in the gameloop. This implements the stack: it can add or remove menu's but only displays and updates the top item in the stack. If a nested menuitem should appear, push the new menu class on the Stack. Your controller and display logic should only display the menu that is on top of the stack.

Example:

Base Menu:

• Game Settings -> push gamesettings menu on stack
• Graphic Settings -> push graphics menu on stack
• Audio Settings -> push audio menu on stack
• Exit -> exit menu

Gamesettings menu:

• Number of lives [1|3|5]
• Difficulty [easy|normal|hard]
• Choose language -> push language menu on stack
• Exit -> pop self from stack

Language menu:

• Language [English|Deutch|Nederlands|Français]
• Subtitles [Off|White|Yellow]

Start with the stack by pushing the base menu onto it.

The menumanager will only update and display the top of the stack (this is a 'peek' at the top of the stack).

If the player picks the game settings menu; we push that menu onto the stack. Since we're only updating and displaying the top of the stack the 'game settings' menu is shown and manipulated. Suppose the menu goes deeper; you can just push the next menu onto the stack and update and display that one.

The neat trick is, that if the top menu is removed ("popped") from the stack, the underlying menu is shown - you simply go down a level. As added bonus, that menu will be in te state the player left it!

Now to expand this idea; you can use a stack for your game states as well. This way a menu can be pushed onto the game in progress and when it is popped the game can continue as if nothing happened.

Answer 2

I am going to give a non-Ruby answer, because I don't know Ruby.

I would have lots of classes for this:

MenuOneController
MenuTwoController
MenuOneView
MenuTwoView
InputNames

The controllers navigate the menu. Pressing up and down changes the selected item, pressing enter selects the item. Selecting the item would call code elsewhere to perform the actual action. All the while, anything the controller does is update the views. (Depending on your menu system, you can have a single controller.)

The views draw the actually menu, showing the currently selected option, providing feedback when an option is changed, etc.

Input names is a file of strings such as:

string up = "Up"

string select = "Enter"

This way, if you decide you want spacebar to select instead of enter, you change the string in one place, instead of all of your controllers. So instead of on(controller: "buttonA"), you would use on(controller: InputNames.select).

So if you start in menu one, MenuOneView would draw what you see. The MenuOneController would be active. Then if you select "Menu Two" from menu one, it would start drawing MenuTwoView instead and listen to MenuOneController instead.

Here is some pseudo-code:

Class InputNames
{
    string up = "Up";
    string down = "Down";
    string select = "A Button";
}

Class MenuOneController
{
    int selectedMenuOption;

    void GameLoop()
    {
        if(ButtonPressed(InputNames.up)
        {
            selectedMenuOption++;
        }
        if(ButtonPressed(InputNames.down)
        {
            selectedMenuOption--;
        }
        if(ButtonPressed(InputNames.select))
        {
            if(selectedMenuOption == 0)
            {
                MenuOneView.ShowButtonBeingPressed();
                MyCodeElsewhere.DoStuffFromMenuOne();
            }
            if(selectedMenuOption == 1)
            {
                MenuOneView.ShowButtonBeingPressed();
                GameLoop.Remove(this);
                GameLoop.Add(MenuTwoController);
            }
        }
        MenuOneView.DrawUI(selectedMenuOption);
    }
}

Class MenuOneView
{
    void DrawUI(int selectedMenuOption)
    {
        //draw the UI for the currently selected menu option
    }

    void ShowButtonBeingPressed(selectedMenuOption)
    {
        //draw the UI such that the button is pressed
    }
}

Class MenuTwoController
{
    int selectedMenuOption;

    void GameLoop()
    {
        if(ButtonPressed(InputNames.up)
        {
            selectedMenuOption++;
        }
        if(ButtonPressed(InputNames.down)
        {
            selectedMenuOption--;
        }
        if(ButtonPressed(InputNames.select))
        {
            if(selectedMenuOption == 0)
            {
                MenuTwoView.ShowButtonBeingPressed();
                MyCodeElsewhere.DoStuffFromMenuTwo();
            }
            if(selectedMenuOption == 1)
            {
                MenuTwoView.ShowButtonBeingPressed();
                GameLoop.Remove(this);
                GameLoop.Add(MenuOneController);
            }
        }
        MenuTwoView.DrawUI(selectedMenuOption);
    }
}

Class MenuTwoView
{
    void DrawUI(int selectedMenuOption)
    {
        //draw the UI for the currently selected menu option
    }

    void ShowButtonBeingPressed(selectedMenuOption)
    {
        //draw the UI such that the button is pressed
    }
}