All lessons
Lesson 15

Main Menu

Play, Options, Back. A menu is really just panels hiding and showing, with one visible at a time.

Loading the game engine. This takes a moment the first time.

A menu is really just panels hiding and showing. Only one is visible at a time. This scene has three: MenuPanel, OptionsPanel, and PlayingPanel.

The scenes

■ UI node · ■ 2D node · % unique name · .tscn instanced scene

game.tscn
  • Game Control game.gd
  • MenuPanel VBoxContainer %
  • TitleLabel Label
  • PlayButton Button %
  • OptionsButton Button %
  • QuitButton Button %
  • OptionsPanel VBoxContainer %
  • OptionsLabel Label
  • VolumeSlider HSlider
  • BackButton Button %
  • PlayingPanel VBoxContainer %
  • PlayingLabel Label
  • BackToMenuButton Button %

FileSystem

  • game.tscn
  • game.gd

The code

extends Control

@onready var play_button: Button = %PlayButton
@onready var options_button: Button = %OptionsButton
@onready var quit_button: Button = %QuitButton
@onready var back_button: Button = %BackButton
@onready var back_to_menu_button: Button = %BackToMenuButton
@onready var options_panel: VBoxContainer = %OptionsPanel
@onready var playing_panel: VBoxContainer = %PlayingPanel
@onready var menu_panel: VBoxContainer = %MenuPanel

func _ready() -> void:
	# Each line names the function to run when that button is clicked.
	play_button.pressed.connect(_on_play_pressed)
	options_button.pressed.connect(_on_options_pressed)
	quit_button.pressed.connect(_on_quit_pressed)
	back_button.pressed.connect(_on_back_pressed)
	back_to_menu_button.pressed.connect(_on_back_to_menu_pressed)
	# Start with only the main menu showing.
	options_panel.hide()
	playing_panel.hide()

func _on_play_pressed() -> void:
	menu_panel.hide()
	playing_panel.show()

func _on_back_to_menu_pressed() -> void:
	playing_panel.hide()
	menu_panel.show()

func _on_options_pressed() -> void:
	menu_panel.hide()
	options_panel.show()

func _on_back_pressed() -> void:
	options_panel.hide()
	menu_panel.show()

func _on_quit_pressed() -> void:
	# A real game would call "get_tree().quit()" here to close the window.
	# This lesson goes back to the lesson list instead.
	get_tree().change_scene_to_file("res://shared/ui/lesson_select.tscn")