Game Development for Beginners: Make a Title Screen with Godot in 30mn | Thomas Gervraud | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Game Development for Beginners: Make a Title Screen with Godot in 30mn

teacher avatar Thomas Gervraud, Indie Game Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (35m)
    • 1. Intro

      0:40
    • 2. Setting Up

      2:36
    • 3. Nodes and Scenes

      4:44
    • 4. Making it Pretty

      6:15
    • 5. Container Nodes

      3:21
    • 6. Using Signals

      3:39
    • 7. Coding the Buttons' Logic

      7:45
    • 8. Adding Keyboard Control

      5:00
    • 9. Outro

      0:32
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

19

Students

--

Projects

About This Class

This short class will teach you the basics of making UI and menus for games.

We'll be using the Godot game engine which is totally free and open-source. It's one of the best engines to get started with game development. A lot of the concepts you'll learn here will be useful to you even if you decide to switch to another one like Unity or Unreal later.

By the end of the class, you'll have a working game title screen in the Godot engine. You'll be able to build on it if you decide to make a full game afterwards.

Along the way, here's exactly what you'll learn:

  • How to structure a game in Godot using nodes and scenes
  • How to use themes to improve the look of your interfaces
  • The basics of organizing your UI with container nodes
  • How to use signals to make buttons work
  • How to add keyboard control to your menus through input mapping

This class is aimed at complete beginners so you don't need to know how to code or to have used Godot before.

All you need is your computer and a half hour.

So, if you're up for the challenge... join the class! I'll see you there!

Meet Your Teacher

Teacher Profile Image

Thomas Gervraud

Indie Game Developer

Teacher

Hello! I'm Thomas aka Blobfish, an indie game developer since late 2018.

I've made games called Space Gladiators and Lost Potato that you can find on Steam. I've also got a newsletter and a YouTube channel that you might want to check out.

I'm working on a series of Skillshare classes about programming, game development and the Godot game engine. Make sure to follow me here if you're interested in those.

Also feel free to send me a message on Twitter, Discord or by email if there's a specific subject you'd like me to make a class about and I'll take it into consideration!

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Intro: In this class, I'm going to teach you how to make a simple data screen using good, which is a free and open source imaging. Along the way, we'll learn about some basics of game development and how to make UI includes. A lot of these concepts are more generally applicable. So even if you decide to switch engines later on, it will still be useful to know. My name is Thomas, also known as Blowfish. And I'm an Indian developer. I've had two games called pili gladiators and loss potato that you can find an STI. This class is aimed at complete beginners, so you don't need to know how to code or to have used to do before. All you need is your computer and a little bit more than a half hour. So if you're interested in, let's start by installing Hadoop. 2. Setting Up: So we'll first go to the official good a website, which is good to engine.org, and you'll end up on this page, then click on Download. And civic diversion that corresponds to your computer from Easter 64 bit version. Once you click on this button, it will download a zip file that you'll be able to extract somewhere on your computer. And then you just have to launch the program on your computer. You don't need to install anything. So long ago do and you'll end up on the screen like this. So from here we're going to start a new project by clicking on New project. We're going to name it Title screen. And we're going to choose a bath where to save the project. Then click on create folder. Make sure OpenGL ES 3 is selected, which is the renderer used in most modern computers. And click on create an entity. So a project is open and we have a few different dogs. In the middle of the screen, we have the scene view. On the top left, we have seen tree, which will be a tree of all of the objects or nodes as they're called in Hadoop that will be present in our scene. For now we have nothing and we'll have to add the first note to get started, which we'll do in a bit. Below that we have the file system, which shows us all the files that are contained within a project. The red path is basically the root folder that contains everything in our project. And on the right of the screen we have the inspector, which will display some properties about the object that we are clicking on and that will be able to modify it, but not worry about it now because it will start making more sense once we add some stuff in our project. Finally, at the top of the screen we have some tabs which allows us to save our scenes open. Some files are tweak some settings. We also have a few types that allow us to switch the view of the main Docker, the editor. So we can make 3D games, which is the default that is shown. Or we can also make 2D games, which is what we'll use in this project because we only going to make user interfaces and we also have a tab to see all of our scripts, but we'll look more into it later. So I'm going to go back to the 2D view. And the first thing we'll do is to tweak the project settings a bit. So go to the Project tab on the top left of the screen. Click on Project, then project settings. Here we go down to the window property in the display category that allows us to tweak some settings about the window where our game will be run. What we'll do is change the width and the height of the window to be 1280 by 720, which is the most common screen aspect ratio on the market right now. Then we can close this window and we can import the assets that have attached to this class, extract the zip file, and you will have these three assets inside of it, a background, a button, and logo. And then we can drag and drop these three assets into the file system in goodwill, which will import the assets into our project. And now we'll create our first scene. 3. Nodes and Scenes: So to create our first scene, we need to understand what nodes are in voodoo, nodes are the fundamental ingredients of goodwill games. Every node has a name and some properties. In Godot, we combine those nodes to create complex behaviors. One node basically has one function. Does one node that displays an image. There's one that can play a sound, one that can set a timer, one that allows us to animate a character and much more. Every node can have other nodes inside of it. And it can itself be the child of another node. So it means we have trees of nodes. For example, to have a character, you might have a base node to control its position and movement. And another node below it controls the shape of the collision of the character and the other one to display it, et cetera. We combine them, package nodes inside of scenes which we can save and reuse in our project. A scene is usually a group of nodes that are bundled together. We would create a scene for a character, but also for levels of our games, for different screens, etc. Once we have saved as seen, we can create as many copies as we want with it. It's useful, for example, if we make a scene for our enemies and we want to spawn a lot of them. So in the end, our game is basically a bunch of scenes that each contains a bundle of nodes. And every scene can even contain other things. For example, or level will contain a character and enemies. In today's project, we have three scenes, one for the title screen and to other scenes as mock-ups for the option speech and for a level which will allow us to simulate starting the game, will use a lot of control nodes, which are a specific family of nodes that are used to draw interfaces and UI UX. So to create our first scene, we'll add a root node to that scene, which will be of type user interface. So click on User Interface. And now we have a scene with one node, which is control node, will start by renaming that node to title screen. So right-click on the control node and click on Rename and type title screen. And then save that scene by going to the scene tab and clicking on Save Scene, we'll name it Title screen and save it in the root folder of a project to click on. And now they're seen as appeared in our file system. So now that we have a root node, we add more nodes as children of this node to design our title screen. So to do that, we can click on the little plus to add a child node. And first, we'll add a background to our screen. So in this window we can see all of the different types of nodes that are available to us. In Gueckedou, there are three main families of nodes, which are the nodes used for 3D games that are red, denotes used for interfaces which are green. Those are the control nodes that we'll use in this project. And the blue nodes are the nodes used for 2D games. So note we need to add a background to our screen is called a texture node. So we can just type this in the search bar and click on Create. Then we'll rename it to background. So you can right-click and click on Rename. I'll click on F2. And you can see in the scene view that a node has been added, but it's tiny and it's positioned at the top-left corner of the screen. And we want our image to take the full screen. So what we'll do is click on the Layout tab here and click on full rect, which will extend the image to take the full screen. Next, we need to assign the background image to that node. So click on the background that PNG file that you've imported into the project earlier and drag it into the texture property. Indeed, inspector dog, on the right of the screen, it should appear on the screen and inside the preview of the property. Next we'll add a few more nodes to our scene. So click on title screen. We want to add children to the root node of the scene and click on the little plus. We need another texture rakes node to display the logo of our game. So we can create again and rename it to Logo and assign the logo that PNG file to the texture property of our new node. After that, we'll need three more nodes. So feedback on the root node and click on the little plus and those new nodes will be of type button. So search for button we can create. And we'll have three buttons to stop button, the options button, and the exit button. So first we'll rename the first button to stop button. And in the text property of a button will start. You can see that our button is now on the top left corner of our screen, and we'll duplicate it to create two more buttons. So Right-click on the Start button node in z node tree and click on Duplicate. You can also use the Control and D shortcut. We'll rename it to Options. Button. Change the text to options, and we'll do it again for the exit button. So now we have all of the components of our scene, except that it looks very ugly and that is not organized. So next we change the style of our buttons to look a little bit better. 4. Making it Pretty: Now we'll make the buttons look a bit better. And the first thing we'll do is to add a custom font to a project. So to do that, you can go on the website called definite.com, which is a big library of fonts that you can use for free depending on the license. So feel free to pick a font that you like. The font I'll be using is called Nathaniel 19. Once you have chosen a font, you can just download it, extract it, and add it to your group project. So I'll just drag and drop the front file into the project. And now we need to apply it to our buttons. So to do that, we'll create a theme which is a style that we'll be able to reuse amongst different elements of our game, and especially for the UI. So we'll create a new resource. Bye, doing a right-click in the file system and clicking on New Resource. We searched for him and click on Create. We rename the file to custom theme and save it. And now you should see that a new tab has opened in the bottom of the screen, which is the theme editor tab. To modify it will click on Edit theme on the right of the tub. And we'll need to create a new template that we can modify it. We can either create a new empty template or to go faster. We can create a template from the current editor theme, which means the buttons and everything will have the same style as the buttons and the other elements of the editor to just click on Create from current editor of them. And it has updated the style of our buttons. Now we can see that it still doesn't apply to our buttons, is because we haven't applied this team to them. To do that, we can just delete the root node of our scene. And in the Inspector tab and the theme, we can assign a theme to this node. What's great about themes is that we can just assign the steam to the parent node and all of the children will have the same theme applied to them automatically. So drag the custom theme that we created and put it in the theme property. And now it has abated. Our buttons look. So we'll go back to our theme editor to do that, double-click on the custom theme resource. And you can also see that on the right under the Inspector tab, we have a bunch of new properties that we can edit. The first property is called default font, where we'll be able to set a font, but we can just drag and drop the file directly in the field. We need to first create a new category of. So we can either choose a bitmap fonts power dynamic fraud, which is just two different ways to implement thoughts on the backend, which you don't really need to worry about it. We'll just choose new dynamic, which is the most commonly used. And then if we click here in the field that we just modified, it will have some new properties puppet, which are the properties of the dynamic photo that we just assigned. And here we have a font category where we'll be able to assign the font that we imported into our project. So drag-and-drop your thought into this field. And you can see that the font has been applied to all of our buttons. We can also modify under the Settings category, the size of our font. So I'll sell it to 36. And I'll also add an outline to a font of three, and I'll change the color of that outline to black. So it already looks a lot better. But now we'll change the background of our buttons. So we'll go back to the theme editor by double-clicking on the custom theme resource. And we'll close the font properties by clicking again on the dynamic font field. And now we'll go until the button category. Here we have two sub-categories called colors. This part will control the color of the font during different events that can happen to the button. For example, if we hover over it or if we click on it. And the second part will control the appearance of the background of the button during those same events. If we click on the little arrow on the right of style but flat, we can see the different options we have to assign. The appearance of our buttons can just make it empty. We can have a flat color, which is what is currently applied. Or we can also have the texture, which means an image. And that's what we are going to use, but we don't need to assign everything. For example, we won't have a disabled state or a focused state, so we can just clear them. We'll start by designing the style for the normal state. So we'll click on the little arrow for that state and click on new sandbox texture. For now the buttons have disappeared because we haven't assigned an image to them yet. So just like for the font, will click on the stables texture that we just assigned and we have some new properties. The first one that will set is the texture property. So drag-and-drop the button that PNG file into that field. We now have a buttons, except it doesn't look great because it's just stretching the image depending on the length of the text. What we want is to be able to have buttons of any size using the simple texture. But we don't want the borders to be stretched, but only the middle of the texture. So to do that, we need to, so margins, we can do it by dragging the dotted lines in the tab that should have appeared at the bottom of your screen. Or we can do it through the inspector by setting the margin property. So that's how I'm going to do it. I'm going to set all of the sides to 20. So now we also need to modify the color of a button. So go to modulate property and click on the color. And here you can adjust it to whatever color you want. I'm going to make it brown. And now we are done for the normal state of a button. You want to see how it looks when you run the game, you can click on this button, which will play the scene. So now we can see that our buttons work. But if we hover over them or if we President the style, the right one. So we have to fix this. To do that in our theme, we can drag and drop the style that we just created into the other fields. So I'll take the style of the normal field and put it in the hover field. And now we can modify this field, but before that we need to click on the little arrow and click on Mate unit. If we don't do that, kudo will consider that the two sides are the same. And if we modify this one, it will also modify the style of the normal field. So make sure you click on make unique. And now we can change the color when we hover over it. So I'm going to go to the module property again and tweak the color to be a little bit lighter. And I'm going to do the same for the Pressfield, but I'm going to make it a bit darker. So drag and drop the styling to the field. Click on the make unique, change the color. Now if we run our scene, we can see that our buttons are working. One last thing that we could do is to change the color of the font when the button is pressed. So I'm going to make it yellow because I think it looks a little bit better. Now our buttons look pretty good, but they are all over the place. So we'll see how we can use container nodes to organize our screen. 5. Container Nodes: Container nodes are a specific type of node that control the position of their children. For instance, we have the VBox container, which means vertical box container. And if we put children in it, they will all be aligned vertically. In the same way, we have the H box container for horizontal alignment. We also have the center container, which will align all of its children at the center of it. Today, we'll mostly use VBox container. So in our scene, we'll start by clicking on the title screen root node, then adding a new node. And we'll type VBox container. Then we'll click on Create, and I rename it to main menu. So now all of the nodes that we put inside of it will be aligned vertically. So we'll put the logo and the three buttons we created before, and we'll drag them into the main menu. This way they will all be children of the main menu. And as you can see that no aligned vertical. They're also all on the top left of the screen. So if we want them to appear in the middle, we can just increase the size of the main menu node by selecting it and clicking on layout than full rate, which will make it take the entire screen as we've seen before, will also align logo to the center of the screen. So click on the logo. And in the stretch mode property, we'll sell it to keep it centered. And now there are few more things we want to do. So first, I want to have a bit more separation between the logo and the buttons. So what I'm going to do is to add another VBox container inside the first one, to click on the main menu at the new child, select VBox container and create it. And I'm going to rename this one to menu options. I'm going to drag the three buttons inside of it. So this way, the menu options and the logo are separated. And next I'm going to click on Main Menu. And we have a category that's called custom constant. If we open it, we can see it has a separation field which allows us to add some space between its children. So toggle it and set it to 30. So now we have some more space between the logo and the buttons. And next, we'll want the buttons to not take the entire width of the screen. So to do that, we're going to click on menu options. And in the size flags category will be able to change how it's children are displayed horizontally and vertically. So by default, they are set to fill the entire space that they can on both axis. But we want to change that for the horizontal axis. So we're going to toggle the field property and we're going to activate the shrink center property. This way, instead of taking up the whole space that they can, they'll just take the minimum amount of space and go to the center of the container. But now Val little bit too small. So what we can do to increase their size to go under direct category. And here we can set a Min size on the x and y axis, on the horizontal and vertical axis. So there I'm just going to put 300 as the minimum size on the x-axis. And now it looks a bit better. When that's in, I'm going to do is to lower everything a little bit. So select the Main Menu node and drag the top component down a little bit. This way, I think it looks a bit better. Now that our title screen looks good, we're going to make the buttons functional. 6. Using Signals: So now our title screen looks good, but it doesn't do anything yet. To add some logic to it will have to attach a script to our scene and write some code in it to make it. So when we click on the Start button, it will go to the first level of our game. If we click on the Options button, will go to the Options menu. And if we click on the exit button, it will quit our game. To do that, we're first going to click on our title screen node and click on this little button that allows us to attach a script to the node. We have a new window with a bunch of properties. We can choose the language we use, which here will be GD script, which is the programming language. We also have a visual language, but we're not going to use it in this class. It inherits the functionalities of the control node because our title screen root node is a control node and we can set a template. So default, we have some comments to help you get started, but we don't really need it. So we're going to use the empty template instead. And we can set a path for script, but we can just leave it as default. So now we can click on Create, and it has created or new file and move us to the screen view. This is where we write all of our code so far now, there is only one line of code which tells us this script will extend the functionality of the control node and it has created a new file in our file system, which is called hatreds. When the GED, it is associated with our data screenshot asean, which is our scene. Before we can write our code, we need to understand what signals are. Signals allow our nodes to communicate between each other. Every time an event of some importance happens for node, it will emit a signal. And every other node will be able to connect to that signal and do something to respond to that event. In our case, we're going to connect to our buttons once the emitter is a pressed signal, which means when the player presses them. And we're going to do some stuff depending on which button is pressed, like changing the scene or quitting the game. To connect to the signals, we have to first click on our button. On the right, you can see we have the Inspector tab, which is the one we've been using since the beginning to modify the properties of the node. And we have another tab which is called node. And if you click on it, you will see a list of all of the signals that the node is emitting at different times. If we want to connect to a signal, we just have to click on the signal, click on Connect. And we'll see a new window that allows us to choose which is the node that wants to connect to the signal. So here we can see we are connecting from the start button. And now we're going to select the title screen node, which is the one where we have added our script. This way we'll be able to write some code in the script to respond to the signal of the stop button. The name of the function where we write the code that answers to the signal is what appears in this field. So it's called onStart buttonPressed. So we can just press Connect. And now we're back to our title screen script. And there's a new function that has been added, which is called onStart button pressed. And this is where we'll tell it to do what we want to happen once the start button is pressed. But first, we're going to do the same thing for the options button and the button. So click on the Options button in the node tab, click on pressed connect, Select Data screen, and click on Connect. And we'll do the same thing for the Exit button. Now we can save file and save the scene. And we're all set up to start writing our code to implement the functionality of the buttons. 7. Coding the Buttons' Logic: So when we click on the Start button, we want to change the scene to the first level of the game. The first thing we have to do is to create a new scene that represents the first level of the game. So in the file system tab, we're going to right-click on the res folder and click on new scene. We'll name it level. I'm going to go back to the 2D view for just going to do a mockup for the level. So we are not doing to make a real level. So the root node will also be a user interface node. So a control node. I'm going to rename it to level. And I'm going to save my scene. Inside of that node, I'm going to add a child which will be a color correct node, which is the same as the texture rate, except we'll be able to just assign a flat color. So click on Create, then click on it. I'm going to expand it to take the full screen. So click on Layout fully erect. Okay, to go back to the Inspector tab and change the color property to be a dark blue. Then I'm going to add another child to the level node called center container. This way we'll just center everything. It will be simpler. I'm also going to expand it to take the whole screen it can layout and full rate. And inside that container, I'm just going to add a node called label, which is used to display a simple text. So click on label, Create, and I'm going to call it level. We can see that our font is not applied to this node. And it's because we haven't applied theme to all of the nodes of our sin to select the level node. And under the team category, we're going to assign our custom theme. So drag and drop it inside the field. And we can see that our food has been applied. So now we want to add another button that will allow us to go back to the main menu. This way would just be more practical to test our title screen. So we want the button to appear below the text, so we have to align them vertically. It means we have to add a vertical container inside the center container. So select VBox container and click on Create. I'm going to put the label inside of it. And I'm going to select the VBox container and add another child, which will be the back button. So I'm going to search for button, icon, button, Create. I'm going to rename it to Back button. And I'm going to set the text to back. If I go down a bit, I can also modify the indirect category, the mean size property to be 300. And I can align the label in the center. So clicking on the label, I'm going to change the align property to be centered. So now if we want our back button to work, we need to attach a script to it. So click on Back button and click on Attach script. We're going to create an empty script and name it back button. It's fine. You can create. And now we are in the new script for the back button, just like our title screen, we need to connect the signal of our back button to our script so that we can write some code to respond to the signal. And since the script is on the back button itself will just connect to the button to itself. So click on the button becomes a node tab, select suppressed signal. Click on Connect. And we're going to connect to the back button itself. Click on Connect. Now we'll save our script and save our scene. And now we can write some good. Right now we have two scenes, the title screen and our level. And we want to be able to go back and forth between them when we click on the Start button in the title screen and in the back button on the level. So I'm going to go back to the script view. And in my back button script, I'm going to replace this line because it's an empty function, but we are going to replace it with some actual code. So deleted. And everything we're going to right now will be inside of this function. So what we're going to do is really simple. We're going to write get tree. So this is a function that already exists inside of the button node because we extend the functionality of the button, we have access to its functions. And this allows us to get a reference to the symmetry, which means an object that represents all of the nodes inside of our scene. Actually, if you hold Control and click on the function, we can see some documentation about how the function is implemented, what it returns, and what it does. Please go back to our script. Getting access to this object gives us some functionality that allows us, for example, to change scenes. So if we write dot, we can see all of the functions that are available to us in this object. So there are a lot of them, but the one that is interesting to us is changed sin. If you just click on changing or you can also just write it yourself, dysfunction will allow us to go back to the title screen. So this is the name of the function, and we call it by writing these parentheses. And inside of these parentheses, we can tell it which scene we want to go to. So since we want to go to the title screen, can actually just go to our file system and find our title screen cin, and drag and drop it inside of the parentheses. This way it will retrieve the path automatically. We could also just have written it or if we delete it and hold Control, click on space. We can see all of the different options that we can put there. So we only have two scenes, so we can choose which things we want to go to. Select Data screen, it does the same thing. So now if we go to a level sin and run the scene, if we click on the back button, it will send us to the title screen. So this is working as we want for the levels in and we're going to do the same thing for the options page. So we'll duplicate this scene finite on the file system and click on replicate naming options, and click on Duplicate. Now it has created a new color options. Double-click on it to open it. And we are going to rename the root node two options and change the text to Options. This way we'll be able to test if we're going to the right spin on it. Now save the scene and we can go back to the title screen. So now we have to make our three buttons work. So go to the script view and in the title screen that script, we're going to do the same thing as we did for the back buttons of our sins. But instead of going back to the title screen, we're going to go to the levels in for the Start button and to the options sin for the options button. So right, good tree, which retrieves the symmetry object that deserves some functionality, right? Dot to access its functions, then change sin and we can select the level seen. So when we click on the Start button, it will change the scene to the levels and we can copy this line and put the same thing when the options button is pressed. But we are going to change the levels in to the options sin. And finally, we'll call another function of the symmetry to quit the game if the player presses the exit button. So instead of change sin, we're going to write and quit. So now we are going to test our logic so we can run the scene as usual, or we can also click on Play, which will play the project. If we do that, we have to set a main scene. So we're going to set our table screen as the main scene. So click on Select, say the title screen cin, we can open. And now pressing Play will always run the scene. So let's see if it works. Click on the Start button and it brought us to the level seen. If we click on back in, bring us back to the title screen, the options button does the same, but for the option sin and back it works two. And if we click on Exit, it will quit the game. So our menu is fully functional. Now we'll add a bit of Polish by making the player be able to control the menu with a keyboard. 8. Adding Keyboard Control: What keyboard control to our game? We need to do a few things. First, I'm going to go back to the title screen script. So you can click on the little icon next to the node or just go back to the script view and make sure you're in the title script.js file. And then I'm going to add a new function. So until now we had three functions that responded to the signals of the buttons. But there are also a lot of other functions that respond to other events. For example, we'll add a new function which is called underscore ready, open the parentheses and put current. And dysfunction is basically called when the note is created in the syntax. So everything we write inside of this function will be run directly when we launched the scene. And what we need to do here is to first put a tab. So everything we write will be inside of that function and we need to retrieve the start button and make it selected by default when we launched the scene. And once we do that, we'll be able to switch between the options with the keyboard. The only reason we are not able to do that right now is because we don't tell Godot which options should be selected by default. So it doesn't know what it should do when we press the up or down arrows. So to do that, we need to get a reference to the Start button. So take the dollar sign and you can see that the auto-completion gives us different. And those options are actually path from the node where the script is. So here is the title screen, which is the root node to all of its children nodes. So if we go down a bit, we can find the Start button, click on it, and this represents our start button node. So now that we have this button, we can call a function on it. So right dot. Once again, we have all of the possible functions and we're going to call a function called grab focus. If this line of code, it will make a start button be selected by default, and then we'll be able to use the arrows. So to test it, first, save the file, and launch the game. And you can see that the start button is highlighted by default. If you use the arrows on your keyboard, you are able to cycle through the options. Now there are still some issues. For example, if I'm on the Exit button and I press the down arrow, it doesn't go back to the start. And the same thing happens for the Start button if I press the up arrow. So to fix that is fairly simple. I go back to my title screen, cin isolate, Start button. And in the inspector, I'm going to find defocus category. And inside of it I have some fields called neighbor left bottom, or I need to do is to assign the exit button as the neighbor top of the stat button. This way, when we press up, the neighbor above the Start button will be the exit button, so it will cycle. So if I click on Assign for the neighbor's property, I can select the Exit button and click on. Okay. And I'm going to do the same thing for the exit button. But instead of assigning the neighbor tip, I'm going to assign the neighbor button. So click on, Assign, select the Start button and click on. Okay. Now if we launch the game, we can cycle through the options with the arrows. Can also press a button with the space bar. But if we are on our level of sin, we can't go back with the space-bar because we haven't told go do that. Potentially be selected by default. And the same thing happens for options page. So we can do that real quick. So if we go back to our script View and go to the back button, that GD file, we can add the ready function, just like with our title screen script inside of it, we can just call grab focused. We don't need any reference to anything else because the level seen and the option, since we have attached a script directly on the back button. So in the title screen, we needed to find the reference to the button in the children of the status green node, which was the root node. But here it's the same node that has the script. So we don't need to do that. So now if we save this file, the keyboard control will work in all of our sins. There is one last thing I want to show you, and it's how to control the menu with W ASD instead of the arrow keys, which can be a bit annoying. So to do that, we need to go to the Project tab at the top left corner of your screen in Project Settings. And then we're going to go into the input map tab. We can see a list of input actions with names like UI accepts, and the list of all of the keys that are assigned to that action. The ones that are used by default for cycling through our buttons at the bottom of this window. And they are called UI, UX and UI down. So if we press the plus button next to the UI input action and we select key and then press W key, click on, okay, we do the same thing for the UI down input. So click on plus t and press S. Now we'll be able to control our buttons with those two keys instead of only the arrow keys if you want to be thorough, we should also add the G key to the UI right action. So click on Add event, he press D, okay, for the UI right protection and for UI left in protection, we're going to add the 80. Now if we close the project settings window and launch the game, you should be able to cycle through your buttons with the WASD keys. And we now basically have a completely functional status screen for game. 9. Outro: Congratulations for getting to the end of the class, we made a fully functional game title screen and we learned about the basics of goodwill. Nodes seems themes, Container Nodes, signals, scripting, input mapping, and how to control the menu with a keyboard. Lds introduction to the Godot Engine was helpful to you and that you'll keep building on it if you want to learn more about programming, game development and Qdot, if free to follow me here on Skillshare and on my website at blood sheeted dead, you'll find the link on my profile. Thanks for watching and I'll see you next time.