User Interface Tutorial – Create a 2D RPG in Godot 4

Overview

This tutorial shows how to build core UI screens and connect them to gameplay logic in Godot 4 while creating a basic 2D RPG loop. It focuses on constructing interfaces in the editor and wiring them up with signals, scene switching, and state control.

UI Screens Built

Main Menu UI

• Create a new UI scene and rename the root Control (e.g., MainMenu).
• Add a TextureButton with 3 interaction states:
  • Normal / Hover / Pressed textures (loaded from an asset pack).
  • Uses stretch mode switching to Scale so the button scales correctly.
• Add a Label inside the button for text (e.g., “New Game”):
  • Uses anchor presets so the label sizing tracks the button.
• Customize typography using Theme Overrides:
  • Load a specific font from assets (Google font: Patha One).
  • Set font size and improve readability with shadow + outline.
• Duplicate buttons efficiently (Ctrl+D) and align them using VBoxContainer:
  • Place controls inside containers to delegate layout/positioning to the container (transform size/position becomes grayed out).
  • Use shrink flags (e.g., shrink to center) so buttons don’t fill the full container width.
  • Configure VBoxContainer alignment and separation constants.
  • Optionally insert Spacer nodes for extra separation.
• Create additional buttons:
  • New Game, Settings, About, Exit (with spacing to reduce accidental exit clicks).

End Game Screen UI

• Create an EndGameScreen scene:
  • Add a semi-transparent ColorRect overlay (used to emulate blur via transparency).
  • Layout:
    • A VBoxContainer for vertical stacking.
    • An HBoxContainer inside it to align action buttons horizontally.
  • Copy UI styling (font, shadow/outline) from the main menu for consistency.
• Add:
  • Result label (game over / victory)
  • Replay button
  • Main Menu button
• Save as endgame_screen.tscn.

Head-Up Display (HUD) UI

• Add UI under the game scene’s CanvasLayer:
  • Rename CanvasLayer to UI so it overlays the game world.
• HUD structure:
  • A parent container node HUD (renamed to hut in the tutorial).
  • Hit Points bar:
    • Background TextureRect
    • TextureProgressBar on top with a tinted progress texture
    • Enable 9-patch stretch so the bar scales fully
    • Rename nodes to hit_points and hit_points_bar
  • Level indicator:
    • TextureRect banner behind it
    • Label for the current level
• Note: modular UI assets are used only minimally due to Godot layout complexity.

Scene Switching + UI-to-Game Communication

Scene Handler (main scene controller)

• Introduces a top-level Scene Handler (saved as the main scene, e.g., scene_handler.tscn).
• Script attaches to a root node like SceneHandler.
• Holds exported PackedScene references:
  • main_menu_packed
  • later: game_scene_packed
  • later: end_game_screen_packed
• Set Project Settings → Run Options → Main Scene to the scene handler.
• Implements load main menu logic with an origin parameter to decide what to unload/reload.
• Uses custom signals so buttons notify the Scene Handler:
  • Main Menu emits custom signals such as:
    • new_game_pressed, settings_pressed, about_pressed, exit_pressed
  • Scene Handler connects to these signals and performs the scene changes.

Main Menu button actions

• Exit
  • Calls get_tree().quit() immediately.
• New Game
  • Unloads the main menu and instantiates the game scene.
• Main Menu (from end screen)
  • Reloads the menu and frees the game scene.
• Replay
  • Reloads the game scene (after freeing).
  • Avoids creating two game scenes in the same frame by waiting for a process frame.

End-Game Logic (Win/Lose)

Game scene responsibilities

• The Game scene owns the game loop and tracking.
• Adds counters:
  • total_enemies = enemy_array.size()
  • killed_enemies (incremented on enemy death)
• Separates responsibilities:
  • Adds an enemy_died function instead of overloading experience_gained.
• On enemy death:
  • Increment killed_enemies
  • Trigger experience gain separately
  • When killed_enemies == total_enemies:
    • call end-game display with victorious = true

Player game-over handling

• Creates a game_over signal on the player (boolean victorious).
• On player death:
  • emits game_over(false)
• Connects player game_over to the Game scene’s end-game display function.

EndGameScreen instantiation

• Game scene instantiates EndGameScreen as a child of the UI CanvasLayer.
• EndGameScreen stores the passed victorious boolean.
• In _ready() it updates the result label:
  • “victorious” if victorious = true
  • otherwise defaults to “game over”

Preventing further gameplay after end screen

• In display_endgame_screen, after a short animation delay (≈ 0.4s):
  • disable player processing (process_mode = disabled)
  • disable enemies processing
• This prevents gameplay inputs/reactions while end-game UI is shown.

HUD Wiring (HP + Level)

Player → HUD

• Player adds hit_points_max.
• Player emits a signal to update the HUD HP bar when damage occurs.
• HP bar value is treated as a percentage:
  • hit_points_left * 100 / hit_points_max
• The tutorial notes a warning about integer division (precision loss):
  • It’s acceptable for UI and can be ignored.

Game scene → HUD

• Game scene connects the player’s “update HP bar” signal to the HUD script function.
• Stores references like hut = UI/hut so it can call HUD update functions.

HUD script behavior

• update_hp_bar(value) sets the texture progress bar value.
• Level indicator:
  • update_level_indicator(...)
  • called in ready() so the HUD shows the initial level when starting a new game.
• Level updates occur when the player levels up (triggered alongside experience/level-up logic).

Main Menu Background Addition (Aesthetics)

• Adds a main menu background scene:
  • Duplicates a test map and modifies it into a calm island-like environment.
  • Instantiates it behind the UI elements.
• Uses Z-index / ordering:
  • Clouds adjusted to Z index 2
  • Buttons container set to higher ordering (e.g., 3) so UI stays interactive and visible.

Main Speakers / Sources (from subtitles)

• Primary speaker: the tutorial author/instructor (referred to as “me”)
• Primary technical sources:
  • Godot 4 documentation (containers/themes)
• Assets:
  • Font from Google Fonts (Patha One)
  • Assets from a PixelFrogs CC0 texture button pack (e.g., “tiny swords”, “Pirata one regular”)