logo

Telling a Story - Module overview

You've been hard at work learning the fundamentals of movement and collisions, which are part of the foundational knowledge to make any game. It's time to move on to the next cornerstone: user interfaces, or UIs in short.
Games usually require simpler UIs than most applications but there is almost no way around them. You will need to build UIs anytime you want to create an inventory, a HUD, a healthbar, an options menu, dialogues, tutorial popups, slideshows and cutscenes to tell a story, and more.
We will start slow with only a few UI elements and work our way up to an animated dialogue between two characters.
open in new tab
In this module, we'll code a dialogue system and take our first steps towards building user interfaces and working with text in Godot. Whether you want to make 2D games, 3D games, Visual Novels, or even applications, UI will always be an important part of your projects. A dialogue system is an accessible way to get started.
It's also a great project to use and combine arrays and dictionaries. Arrays and dictionaries are fundamental data structures in programming. They're used extensively in games and applications, so we need to be comfortable with them.
We learned them in M3. Learn GDScript, and we used arrays in the last two modules to store items in the random spawner and chest. This module is a good opportunity to also practice using dictionaries.
Before we dive into UIs, let's have a quick refresher on arrays and dictionaries and what they're used for.
Remember to visit the Glossary whenever you need a refresher about a programming concept. You can access it anytime from the shortcut bars in lessons. For example, you can learn more about arrays, dictionaries, and data structures there.
Nathan
Founder and teacher at GDQuest

A quick refresher on arrays and dictionaries

An array is a sequential list of values. Each value has an associated number we call the 'index'. Removing or adding a value in the middle of the array changes the index of the following values.
Arrays are perfect for storing lists of elements like the items in a player's inventory or lines of text to display on the screen in a dialogue system, for example!
open in new tab
A dictionary maps any value type to another value type that serves as its unique identifier, or key. Unlike the indices in an array, which are sequential numbers, with dictionaries, you can use any value type as a key.
Dictionaries are great for storing structured data. In this module, we will use dictionaries in a dialogue to pair a character facial expression with its corresponding line of text. In the next module, we will use dictionaries to create a branching dialogue system.
open in new tab

What you'll learn in this module

  • Control nodes: There are two ways to position UI elements in Godot and you can combine them to build any interface.
  • The Label node: It will allow you to display and animate text to appear letter by letter.
  • The AudioStreamPlayer node: You will use it to load and play sounds.
  • Arrays: You will store lines of text and display them in order in a dialogue system.
  • Dictionaries: You will map the names of character expressions to their corresponding images.
  • Dictionaries inside arrays: You will learn how to combine them to build more complex data structures.
  • Theming: You will style and customize your UI using Godot's UI theme feature.
  • Iterative design: You will learn how to start with a simple structure and change it in little increments until you get all the features you need.
Lots to learn with lots to gain! Let's have a look at the project files!

Download the project files

If you haven't already set up your project files from the previous modules or you don't have M7. Telling a Story in your Godot project list, you can download the latest project files below.
Click the button corresponding to your system below to download the up-to-date course files:
Files not accessible
Looks like you don't own this course. Get it now.

Open and review the workbook for this module

To get started, open the Godot project M7. Telling a Story (Workbook). In this project, you will create all scenes and nodes yourself. As always, we will provide you with assets and effects so you can follow along more easily.
In the future, when you create your own games, you would either download assets or design your own if you're artistically inclined or working with someone who is.
Remember to always look into (and respect!) the terms of the license of any assets you use. It's part of your ethics as a gamedev.
Nathan
Founder and teacher at GDQuest
Open the assets folder in the FileSystem dock. Double-click it to open the folder.
The assets folder in the FileSystem dock
open in new tab
Take a minute to review the files we will use:
  • You will use the bubble_pattern.png and sliding_background.gdshader files to create the background of your scene.
  • pink.png and sophia.png are two character portraits without any expression or facial feature. This is so you can add facial expressions to them.
  • emotion_happy.png, emotion_regular.png, and emotion_sad.png are facial expressions to layer on top of the Sophia and Pink sprites.
  • talking_synth.ogg is the sound (in ogg format)you'll play when a character speaks. It's a CC-By-Sa licensed sound made by tcarisland. The license is in talking_synth.license.txt.
  • Finally, test.svg is a test image you will use as a backdrop guide to learn more about Control nodes and Godot's UI anchor system.
There is also an extra audio file, talking_synth_alternate.ogg, which you'll use in one of the challenges if you choose to take it on.
With that, you're ready to start building the dialogue system. I hope you like to tell stories! Let's gooooo (dot)!
PreviousNext

Lesson Q&A

Use this space for questions related to what you're learning. For any other type of support (website, learning platform, payments, etc...) please get in touch using the contact form.

  • What are the limits of dictionaries?slim-lemurSo in the "Learning GDScript from Zero" course, we were taught that dictionaries can hold any data type as a key, not just strings, as each key is hashed under the hood anyway. Hence, why Godot dictionaries are equivalent to hash maps. But beyond that, we can even use sub-dictionaries as keys. (Which talking to a friend who uses Python, exceeds the capacities of Python dictionaries.) Dictionaries in Godot seem ridiculously powerful if that's the case, since it seems like we can basically use anything. But that get's me wondering what the limitations are: 1) Can you use objects as a key? 2) How about resources? 3) Nodes? Just curious. 2 5 Jul. 07, 2024
  • Download for Windows link not workingnice-sheepI'll try downloading the group of project files, but when I click on the dowload for windows it takes me to: [aipqadxyfpdcvlwpnxbu.supabase.co/storage/v1/object/sign/course-files/l2dfz-0.29.0-win.zip?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJjb3Vyc2UtZmlsZXMvbDJkZnotMC4yOS4wLXdpbi56aXAiLCJpYXQiOjE3Mzk4MDkzMzYsImV4cCI6MTg5NzQ4OTMzNn0.EPMAUV_s7ONoN1BeQY186imeqg9JiMC6vAbAv1Bv8U4](https://aipqadxyfpdcvlwpnxbu.supabase.co/storage/v1/object/sign/course-files/l2dfz-0.29.0-win.zip?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJjb3Vyc2UtZmlsZXMvbDJkZnotMC4yOS4wLXdpbi56aXAiLCJpYXQiOjE3Mzk4MDkzMzYsImV4cCI6MTg5NzQ4OTMzNn0.EPMAUV_s7ONoN1BeQY186imeqg9JiMC6vAbAv1Bv8U4) saying: {"statusCode":"404","error":"not_found","message":"Object not found"} 1 0 Feb. 17, 2025
  • v0.9.0 Cannot open the workbook M7 with old video cardCasimirMorelHi, I think I encountered a bug Using 0.9.0 on Windows 10, with an old Intel graphic card, when trying to open the M7 workbook, the console display continuous error messages in what looks like an infinite loop Things like ```gdscript ERROR:ERROR; Condition "shader_data.is_empty()' is true. ``` With version 0.7.0 the message is more clear, and it sems that there is no infinite loop > Your video card drivers seem not to support the required Vulkan version. > If possible, consider updating your video card drivers or using the OpenGL 3 driver. > You can enable the OpenGL 3 driver by starting the engine from the command line with the command: > 'Godot_v4.2.2-stable_win64.exe' -rendering-driver opengl3 > If you have recently updated your video card divers, try rebooting A question: will a similar command line works with the 0.9.0 M7 workbook, or a graphic card compatible with Vulkan is a prerequisite ? 12 0 Oct. 16, 2024
  • Opened clear Workbook and have an errortan-duck```gdscript Godot Engine v4.3.stable.official (c) 2007-present Juan Linietsky, Ariel Manzur & Godot Contributors. platform/windows/os_windows.cpp:1794 - Condition "res != ((HRESULT)0x00000000)" is true. Returning: String() platform/windows/os_windows.cpp:1794 - Condition "res != ((HRESULT)0x00000000)" is true. Returning: String() --- Debug adapter server started on port 6006 --- --- GDScript language server started on port 6005 --- platform/windows/os_windows.cpp:1794 - Condition "res != ((HRESULT)0x00000000)" is true. Returning: String() ``` 1 0 Oct. 07, 2024
Site is in BETA!found a bug?