SOVEREIGN MOON PRESENTS…

Godot Visual Scripting Tutorial For Beginners

In this tutorial we’ll learn how to use Godot’s visual scripting tools to create video games from scratch.  

Sovereign Moon Studios is dedicated to helping game enthusiasts bring their creative visions to life by teaching them how to make a video game from scratch without having to know how to code or draw. 

How to Use Godot’s Visual Scripting Tools

Today, Sovereign Moon Studios, the makers of your favorite online game development course, are bringing you a comprehensive tutorial on how to use Godot’s visual scripting tools designed to help game-makers create video games without having to know how to code.

Let’s jump in!

Introduction to Godot’s Visual Scripting Tools

In today’s tutorial I’m going to introduce absolute newbies to Godot’s visual scripting tool. Essentially, this tool is a tool that allows you to create games without having to write a line of code.

Many different game engines are incorporating visual scripting tools into their software in a quest to make game development more accessible to a wider audience of users.

I recently created a video about Unity’s free visual scripting tool called Bolt and people seemed to really enjoy that video so I thought I’d make one for Godot’s visual scripting tool as well.

I’ve designed this tutorial to give you a top level overview of how Godot’s visual scripting tool works. Similarly, I’ve designed this specifically for non-programmers.

I find that a lot of no-code tutorials make the assumption that people know the language of coding. Words like “typed data”, “variable” or “function” are thrown around without having the user understand conceptually what those words mean.

So I’ve designed this tutorial to be as beginner friendly as possible by not making any language assumptions. If I use a word like string, float or boolean, I’ll explain to you what those words mean.

So let’s jump in.

We’re going to create the most basic Godot scene today in a quest to introduce you to the basics of visual scripting. We’re not going to do anything complex in terms of environment design. The goal today is to just get you to take your first step. So today, all we’re going to do is spin a cube.

Step 1: Quick & Easy Environment Setup

Let’s open up Godot and start a new project. Simply select an empty folder to store your project and then the main Godot interface will open.

Next, we need to select our root node. So let’s select “3D scene”. This will create a new spacial node for us.

Next, let’s add a plane into our world. To do this simply click on this “+” icon to create a new node and then search for “mesh instance”. Next, click “create”. To stay organized, let’s re-name this object to “plane” in our scene tab. Next, with the plane object selected, look over in the inspector tab and change the “mesh” property from empty to “NewPlaneMesh”. If you want, you can quickly scale up your plane by using the scale tool found here and then simply scaling the object up.

Next, let’s add a cube into our scene by following the same steps. Click on this + icon to create a new mesh instance and then click “create”. Now, let’s name this object “cube” and with Cube selected, let’s go over to our inspector tab and under “mesh” change it from “empty” to “New CubeMesh”. Again, we’ll scale this object down a bit using our scale tool, and then we’ll select our move tool to pull the object up a bit.

The last thing we need in our scene is a camera. So let’s add that now. By click on the “+” icon, search for camera and then click on create. Again, with the move tool selected, you can pull your scene camera back a bit so that it can see the world better. And then you can click the “play” button to make sure your perspective is what you want it to be. The first time you play your game, you’ll be prompted to save your game, so do that first, and once done Godot will launch your game. You should have something that looks like this:

Step 2: Creating a New Visual Script

So first we need to create a new visual script. We do this by first selecting our desired scene node we want to apply the script to, in our case, the cube, and then clicking on this “new script” icon here. We’ll then be prompted to give some information about the script we’re trying to create. The most important step here is to change the selection from “GDScript” to “VisualScript” from the drop down list and then click “create”. You’ll be prompted to save your script and after that is done, a visual editing graph will be made for you.

Now if you navigate away from this script, you can always get back to it anytime by clicking on the script here. And you can toggle between your 3D game view and your scrip view up here.

Step 3: Node Creation

Okay, for the next couple of minutes I need you just to follow along and set a few things up. Don’t worry about how these different components work right now, because I’m going to discuss everything in detail after I get you to do a basic setup.

We’re going to begin by overriding one of our object’s functions. We’re going to click on this “override an existing built in function” icon here. When we’re asked to select a function, we’re going to select “process(float)”. If you’re ever confused about what a node does, you can always select it and the look in the description box down here. Notice in this case, it says that processing is called every frame. This is exactly what we want this process to do, because we don’t want to make a one time change, we want our object to be in a constant state of rotation. That’s why we are selecting this function as our first node. So select this node and then click on “open”

Notice that this node has now been added to our graph.

Next, we need to specify which process we want to modify. In this example, we want to modify our cube’s rotation, so we need to bring in our rotation node.

Now, there are multiple ways to do this, but the easiest is to just drag and drop the property you want to modify into your graph window. We can do this, by selecting the cube and then looking in the inspector tab. If we scroll down to the transform setting we’ll see rotation. Now all objects are going to have a transform component, because at a minimum Godot needs to know the object’s position, orientation and size within the game world. So rotation, the property we want to edit is part of the object’s transform settings. Now, in order to make this a node within our graph, we can just select it and drag it into our main canvas area. It’s important to note that you can’t drag and drop the input fields, you need to drag and drop the header above the input fields. Also, as a side note, if you’re ever unsure what an object property in your inspector tab controls, you can always roll over the header and you’ll see a little description box popup. In this case, we can see this is the property we want to edit, So let’s drag this into our graph now.

So now, we’ve just added our second node. Now before I explain what all of these nodes are doing, I just want you to do a few more things. Don’t worry that not everything we’re doing will make sense to you right now, just follow along and I’ll explain everything in two minutes once we get our graph set up. First, I want you to wire up these two nodes so that they are connected. You can simply left click and drag your mouse from your functions output port into your rotatations input port.

Okay, now we’re going to add one more node using a different node creation technique. In this case, I’m going to get you to right click within your graph and then search your desired node manually.

Let’s imagine we want to just keep ourselves organized so we want to use a comment node so we can easily describe what we’re building. So let’s search for that now. Simply search for “comment”. Once the comment node is added, you can scale it up by dragging out its bottom right corner and you can select its header to position it where you want it. We want it to encase our two other nodes, because we want to describe what we’re building.

Step 4: Editing Godot Visual Scripting Nodes

Now what we’ll do is we’ll select the comment node and then look over in the inspector tab. Notice here we can add a title and description. We’ll call our title rotation and we’ll call our description something like “rotating cube tutorial”. This will have no impact on our program whatsoever, but as our graph becomes bigger, comment nodes help us keep our work organized.

Now, the very last thing I’m going to get you to do is to edit our rotation node. First, notice that the node is currently set to “set”, but we’re not trying to “set” this object’s position, we want to continuously add rotation to it so that it’s always spinning. In order to do this we can first select the rotation node in our graph and then look into the inspector tab under the assignment operator. Notice it’s currently set to “assign”. Notice if we change this to any other option, the option is reflected in the node. For example, I could select, subtraction, multiplication or any other option and those changes would show up in the node. However, what we want to do is we want to add rotation, so we’ll select “add” from the drop down list. Notice, now our node has changed from ‘set rotation degrees” to “add rotation degrees”. This is exactly what we want.

Next, we need to tell the node how fast we want to rotate the object. We can do this by editing the rotation node’s input field settings. Notice within the input fields we can change the x, y and z rotation. What we’ll do here is we’ll add 5 degrees of rotation to the x axis and hit enter. It’s important that you hit enter after you make this change or the change won’t register. Now remember, we’re using this function process here. And remember previously, I showed you that this function will update the object each frame of the game. So because we’re adding 5 degrees of rotation to this object, were essentially adding 5 degrees of rotation to the object each frame of our game.

Okay, I got you to do all of this because we often find in our more advanced online course that we teach, students learn abstract concepts better if they first get their hands dirty working with the materials first. Explaining theoretical concepts becomes less abstract if you have at least a little bit of experience working with the material first.

So that’s why I like taking this approach with teaching, because as you’ll see, as we jump into theory, it will make more sense to you, because you’ve already been playing around with the graph a little bit.

Okay, but before we jump into theory, let’s first play the game we’ve created. Simply click this play button and if you’ve done everything right you should have a rotating cube.

Step 5: Visual Scripting Language & Concepts

So why is this working and what are all of these elements we have on our graph at the moment? Like what is this small colored circle, or this one? One why is one on the right of a node and the other on the left? What are these white arrows and how are they different from the colored circles? Also, why are node boxes different colors and what the heck is this little symbol here.

So I’m going to help you make sense of all of this right now, because without knowing this, you’ll never understand how visual programming works.

So the items you see in your graph at the moment are called “nodes”. These nodes represent some editable property within your game.

For example, this rotation node represents your cube object’s rotation property. Now the node itself might not look very complex or editable and that’s because, for the most part, you’ll edit your node properties in the nodes inspector tab, just as you would an object’s properties. For example, notice when I select my cube I can see the cube’s properties in my inspector tab. Now, notice what happens when I select the rotation node. That node’s properties become available to me in the inspector tab. For example, rather than rotating this object on all three axes, I could just select one if I wanted.

Or notice, for example, what happens when I select the comment node. It’s properties become available to me in the inspector tab as well. But because this node does fundamentally different things than a rotation node, different properties become editable. For example, I can edit my comment nodes title, description or size here.

Step 6: The Components of a Visual Scripting Node

Now let’s look a little bit closer at the node itself. First, understand that node logic moves from left to right. So first Godot will process this node, then this node and then continue working in that direction.

Step 7: Understanding Ports

Notice our nodes have white arrows and colored dots. These are called “ports”.
On the left of a node you have the nodes’s input ports, and on the right of a node you have output ports.

There are two types of ports. There are sequence ports and data ports.

Sequence ports allow you to define an order of operations. As I mentioned, Godot will read our nodes from left to right. So by connecting our function node, to our rotation node, we’re doing so through its sequence ports. Essentially, we’re telling Godot, start here and then go here.

Next, there are data ports. Data ports allow you to connect “typed values” to nodes. Now, this is where many no-coders start having difficulties because many online tutorials assume that you know what “typed values” are. Some of you watching this may already know, but many of you will not, so I want to go over some common types now and I’ll explain briefly what each one is because types are at the core of both programming and visual scripting. So you really need to understand how types work.

Step 8: Understanding “Typed Values”

So here are some of the most common types you’ll be working with.

Float: A float is simply a fancy way of saying “number”. Now a float may or may not include decimals. For example 2 is an example of a float as is 2.2.

So let’s look at a quick example of a node that allows for a float. Here I’ll add a basic math addition node. I’ll just right click on the graph and search for “math” and here I’ll see the “math add” node. Notice that floats are represented by blue and if you look really closely you can see the float abbreviation of “flt”. This means that this port is looking for a float or a number to plug into it. If you tried to enter something that wasn’t a float, like the word five, the node would reject your entry. But notice, if I wrote “5” like this, or 5.5 like this, the node accepts my input. So this port is looking for you to only connect a float to it, or assign it a float value.

Integer: Next, an integer is similar to a float, but it doesn’t allow for decimals. So an integer can be any whole number like 1, 66 or 142. However, an integer can’t be 1.34. So for demonstration and practice purposes, let’s change this math addition node we’re working with and change it from float to integer by selecting the node and then looking under “type” in the inspector tab.

When we do this, notice that the integer type is also represented by a blue circle but this time the abbreviation is “int”. If I tried to enter a float such as 45.55 into the input field, it wouldn’t let me. It would automatically round my number so it was an integer.

Vector3: Next, let’s look at a Vector3. We actually have a Vector3 on our rotation node here. Notice a vector3 is purple and uses V3 as it’s abbreviation. A vector 3 is just an ordered list of three values. It’s often used to modify an object’s position or orientation in 3d space, because the three values can be used to represent the objects x,y and z values. So for example, you could further modify these input fields and type in 5 for the y and z values and then play your game again. Notice now that your block is rotating on multiple axis because you’ve programmed it to do so.

Vector2: A vector2 is similar to a vector 3, but instead only has an ordered list of 2 values. This makes vector 2 a popular node to use in 2D games, because it allows game makers to quickly position objects in their game world. I’ll add a sample vector2 node to this graph just so you can see how it looks. Notice that a vector2 is represented by a light purple circle and uses the abbreviation v2. But most importantly, notice it’s looking for two values, where our vector3 was looking for 3 values.

String: Next, we have a string. A string is just a fancy way of saying a sequence of characters. So for example, if I need to reference my character’s name, I might need to use a string. For example, the word “player” is a string as is the word “player1”. As you can see in our graph I’ll add a node called “string.find”. First notice, the string type is represented by blue and its abbreviation is “str”. When I add this node, notice that I can add a string such as Player” or “player1” into the input field.

As a practical game use-case, you often use strings to reference or compare the name of game objects. For example, I might want to set a trap in my game if my player walks onto a certain area of the graph. So I might use a string to trigger this trap only if an object with my player’s name walks into the trap area. If a Non Player Character (NPC) or enemy enters into the region, it wouldn’t trigger the trap. So that’s one common use case for strings.

Boolean: Next, we have booleans. Booleans are used a lot in game making because they allow you to create branching logic. In Godot this is called flow logic and one popular boolean node you’ll use a lot is called the “condition” node. So I’m going to add that now. Notice when I add this node that booleans use the abbreviation “bool” and they are represented by purple circles.

So how are booleans used in games? Well in countless ways but at their core, they are used to create true or false logic. But let’s not speak in abstractions. Let’s imagine we have a locked door in our game and we want our player to find a key to open the door. So we could create the following logic. If the character has the key, we could wire up the true branch to open the door. However, if the character hasn’t found the key, we could wire up the false branch to open up a dialogue box that says something like “this door is locked”.

So in a nutshell that’s how types work in the world of programming and that’s how types are represented in these visual scripting nodes. Now of course, there are many more types than the ones I covered, but my goal for this tutorial was just to introduce you to the most common ones.

Step 9: Visual Scripting & Sequencing of Nodes

So let’s rewind a little bit. Earlier we were talking about ports. I mentioned that we have two types of ports: sequence ports and data ports.

Now Godot is amazing, because if you drag a wire up from a node’s sequence port and then let go, it will show you a contextual list of possible nodes to connect to. The same is true when you drag a wire up from any data port’s output.

Next, I want you to pay attention to how each node is color coded. Like typed data, each visual script node also has a type and a color code associated with that type.

Again, you don’t need to know how the nodes I’m about to show you work, I’m just trying to show you how node color coding works. Notice for example if I add math nodes that my math nodes share a similar color and have a purple box around them. Or notice if I create and then drag and drop variables into my graph, that my variables share a common color of green.

Again, this can just help you get a quick “at a glance” feel for what’s happening within your graph.

Step 10: Understanding Node Sequencing Logic

Now let’s quickly talk about the sequencing of nodes. Now, I’m sure you’ve seen complex visual scripting graphs that seem to branch all over the place. And even if our general direction does go from left to right, it’s common to see logic that appears to move backwards as well.

For example, let’s get rid of our rotation node for a moment. You can just select the node and then hit delete on your keyboard. Now, right click within the graph and search for ‘rotate(y)” that’s looking to be fed “float” data. Now remember, float is just a fancy way of saying a number, that may or may not have a decimal. Now this node has an input field built into it, but let’s imagine we want to feed this node data from somewhere else. Remember, these colored ports are data ports and allow us to pass data between different nodes. So let’s imagine, that we didn’t want to use the built in input field, but instead wanted to pass in our rotation data from somewhere else.

I’m going to make this example, really easy, because I just want to show you the logic so let’s create a math node and select the “add” math node. Notice that this node can output a “float”. And notice that our “rotate node” can be fed a float into its input port here.

So what we’ll do is we’ll set our rotation speed in our math node here by changing the float to something really slow like 0.009. Now we’ll wire the math nodes data output into the rotate nodes input. When we do this notice that the input field in the rotate node disappears. This is because it’s not being fed data from itself any longer. Instead it’s data is being injected into it from this math node.

So now look at what happens when we play our game. Now we can control this object’s rotation through this math node instead of the main rotation node.

Essentially, the sequence logic will wait to pull any necessary data from connected nodes before moving on with the order of operations. So if we had 10 nodes in this sequence, it wouldn’t move on from the rotate node before allowing the rotate node to pull the necessary data in from nodes that are essentially feeding it data.

So that’s the flow logic in a nutshell. 

Godot’s Visual Scripting Conclusion

Okay, that’s all I have for you. I hope you’ve enjoyed this Godot tutorial and remember, if you’re looking to bring your no-code game development skills to the next level, consider signing up in our comprehensive game development course. In that course, I go into much more detail than I do in these YouTube video tutorials, so if you’re interested in leveling up your game dev skills, I’ll provide a link to our premium game development course in the description below.

Thanks for stopping by today!

Sovereign Moon Studios is dedicated to helping game enthusiasts bring their creative visions to life without having to know how to code or draw. Our NoCode game development course teaches indie game devs how to build breathtaking games from scratch. 

Want to Make Video Games?

Do you love game design? So do we! For this reason, we created a no-code video game development course that walks you through the process of bringing your game visions to life without needing to know how to program and without having to be an artist. We will teach you how to bring your game to life in our 4 hour 36 module no-code game development course.