In this lesson, we’ll improve the look and feel of our slideshow by adding a picture and animating the text display.
Let’s start with the picture.
There is a user interface node dedicated to displaying images inside your interface: the .
Create a new as a child of the and drag and drop it above the and in the Scene dock.
We should assign it a texture to see how it looks in the viewport.
With the node selected, right-click on the Texture slot
in the Inspector and select Quick Load. Then, search
for the image named community_garden.jpg.
By default, the will resize to match the texture’s size and may cause your interface to stretch. To avoid that, turn on the Expand checkbox in the Inspector to make the texture fit the node’s original rectangle.
At this point, the image should get squashed into a line and disappear.
To make the take vertical space in the parent , we need to change the node’s Size Flags.
In the Inspector, expand the Size Flags category and turn on the vertical Expand size flag.
The image should reappear but it’s now stretching to the node’s bounding box, deforming the image.
It’s because of the node’s default Stretch Mode which does not respect the image’s original proportions.
Change the Stretch Mode to Keep Aspect Centered to preserve the image’s proportions.
You will then want to resize your Slideshow node so that the image roughly matches the width of the label below it.
We now want to change the picture as the player moves through the dialogue lines.
We need to add extra data to our slides dictionaries to
load a unique texture for each slide.
Open the Slideshow node’s script again by clicking the script icon in the Scene dock.
So far, our slides variable contains dictionaries with a
single key named text.
In each dictionary, we want to add a new key-value pair. We will name
the new key texture.
We can use the preload() function again to load a
texture to display. Each dictionary in the slides array
should look like this.
{
"text": "Displayed text goes here",
"texture": preload("path/to/image.jpg"),
}Here’s the complete slides variable, still with four
slides and with added textures.
We want to display a garden in the first two slides, then the character’s bedroom in the third and fourth slides. So we use the same texture across multiple slides.
var slides := [
{
"text": "In this series, you'll code a slideshow.",
"texture": preload("common/backgrounds/community_garden.jpg"),
},
{
"text":
"You can use the techniques you'll see here for simple cut-scenes, linear conversations, and more.",
"texture": preload("common/backgrounds/community_garden.jpg"),
},
{
"text":
"What you'll see here isn't limited to conversations. You'll learn the basics behind any sequence of events.",
"texture": preload("common/backgrounds/dani_bedroom.jpg"),
},
{
"text":
'We will build upon this series to later create a branching dialogue system, a sort of "choose your own adventure" toy.',
"texture": preload("common/backgrounds/dani_bedroom.jpg"),
}
]Notice how there’s a comma between dictionaries, but not after the last dictionary.
Also, you can see we pass a relative file path to the
preload() function. The preload() function
will look in the corresponding subdirectories to load the images.
In the show_slide() function, we add a line to update
the ’s texture.
onready var texture_rect := $VBoxContainer/TextureRect
func show_slide(new_slide_index: int) -> void:
# ...
texture_rect.texture = slide["texture"]The key takeaway here is how, when using dictionaries, you can add new data to them anytime and add features progressively. They’re very flexible.
You’ll often use dictionaries and similar data structures for that reason.
Open the practice Simple dialogue box.
You’ll complete a simple dialogue box display by reusing the principles you learned with the slideshow.
The final result should look like this.
In the next lesson, we’ll animate the text display with tweens.