Master Godot UI: Interfaces with Control Nodes (2024)

Explore the inheritance structure of Control nodes and how they affect each other's sizes and positions with in the hierarchy of the scene tree. Use anchors and theme overrides to create a title for your game.

Exploring more of the options available for label nodes, even if they aren't relevant to this project.

Draw an imported image file using a texture rect node, adjusting how it expands or stretches to fit the screen. Explore the Project Settings to further customize how all canvas items are stretched when resizing the game window.

Learn how buttons can display both text and an icon on a background image, and how themes can be used to change all of these components when the button is in different states.

Exploring more options available for configuring buttons, changing the textures used as style boxes, and the different kinds of style boxes that are also available.

Adding links to websites to your game is pretty simple, but we'll use horizontal and vertical box containers to keep them uniform and organized.

Do you have some nodes that you want to theme differently from others of the same type? Use a theme type variation to keep them grouped together, yet separate from other nodes of the same type!

Draw backgrounds that are designed to tile or stretch to fill an area, and use scripts to manipulate nodes.

How useful could a GUI Control be if all it does is draw a color?
Very useful!  Learn how to make a simple fade transition for your game.

Add a menu bar to your game and use margin containers to space things out.

Adding items to a popup menu, both through the inspector and using code to create a sub-menu. Also adding shortcuts to menu items through code and making everything look good with the theme editor.

Connect signals for every menu option to scripts to run automatically in response to the player selecting them. Create custom signals and emit them too.

Learn how to use Godot's built-in Singleton classes to save and load player's save data.

Automatically display the value of an integer variable from the player's save data on the user interface as a resource counter.

Allow players to edit text and save the value they entered; commonly used for naming characters and other things in games.

Explore the property and theming options available to the Line Edit node and Grid Container.

Create a button with a popup menu that allows the player to select an item from a list of options. Generate the list of items through script and react to the selection change based on the index.

Split a control node and divide its space between 2 child control nodes.  Also allow the player to adjust this division left and right.

Organize content into multiple different tabs that the player can swap between, whether because of spatial limitations or so they aren't overwhelmed by the amount of information on screen at once.

Learn how to use a Tree node to display hierarchical items like the Godot scene tree on your game's UI.  Use recursive algorithms and embed dictionaries inside arrays inside dictionaries.

Exploring the theme options available for the Tree and scrollbar nodes. Also added some extra code to adjust the pay rate of the ship's crew.

Use a scroll container to wrap any control node, and checkboxes for selecting items from a grid container.

Use button groups to create radio buttons for your game. Use theme settings to stylize buttons that don't necessarily look like buttons.

A simple control node for toggling something on or off, but is themed differently from Check Boxes.

Change integers or floats using a slider, and use theme properties to make nodes look nothing like they were originally.

Use a progress bar to display something that happens over multiple frames, with or without a specific percentage of completion.