Setting up the slideshow scene

In this video, we’ll set up the slideshow scene.

Our slideshow should display text and have a button to advance to the next slide.

So we’ll need a Label and a Button node, which we can stack vertically using a VBoxContainer.

Errata: we renamed the DialogBoxes folder

We renamed the DialogBoxes folder into DialogueBoxes in the Godot projects. Be sure to look for DialogueBoxes when opening the project directories.

Improving the text with a theme resource

In the video, you can see the text looks larger than Godot’s default. This is because I was using a Theme resource.

You can assign a Theme to your Slideshow node to get the same result.

Select the Slideshow node and in the Inspector, go down to the Theme category. Right-click on the slot and select Quick Load. You’ll want to assign the theme from res://DialogueBoxes/common/theme.tres.

New concepts

Giving Control nodes a minimum size

You can give Control nodes a minimum size in pixels by using their Rect -> Min Size property. Unfortunately, Godot doesn’t provide us with a property to give UI nodes a maximum size.

The Fill and Shrink Center size flags

Control nodes inside a container resize and change position differently depending on their Size Flags. By default, most try to Fill the space the container gives them.

In the case of a VBoxContainer, that space is only the container’s width. The VBoxContainer squashes children to their minimum height if their Size Flags are set only to Fill.

The Shrink Center size flag is useful when turning off the Fill flag. It centers the node horizontally or vertically within the space a container gives it.

This can be confusing at first, so don’t worry if it takes time to wrap your head around size flags.

Your questions

Where should I save the scene?

To run your slideshow come out good at will ask you to save the scene first.

You can save the scene in the DialogueBoxes/Slideshow/ directory and name the file Slideshow.tscn.