An introduction to Godot's Visual Script
Tags: beginners, codenewbie, gamedev, tutorial
Published: 2022-04-22 04:30:00

> **_Update: Godot's Visual Script will discontinue in Godot 4.0._** Therefore, it's useless to continue using Visual Script in Godot now.

## What is Godot?
[**Godot**](https://godotengine.org/) is yet another game engine other than Unreal and Unity. But it is completely _free_ and _open-source_. This means no strings attached, no royalties, nothing. Your game is yours and yours alone.

## Why would you use Godot?
The engine doesn't have the ultimate 3D capabilities like Unreal. And you also can't export your game to console devices. Then, why use it?

- You **have a slow laptop** and don't want to buy a new one (yet). You would want to use Godot rather than Unreal.
- You're **new to game development**. You might want to use Godot because Godot is much less complicated than Unreal. However, you might need to spend more time fixing bugs since Godot is a less-proven engine out of the two.
- You **want to make 2D game**. 

I can tell you from my personal experience with Godot that my game development is very smooth so far with it. **[The official showcase video](https://godotengine.org/showcase)** will show you what kind of game you can expect to make out of the engine.

## Which Godot version should you use?

If you start developing your game today, **you can use Godot 4** _alpha_ for that, as your game will grow with it. As of alpha 6, it's very stable already. You can expect feature changes though, hence the alpha tag in the name. But by the time you published your game, the engine would be at least at the beta or even stable state, and the bugs related to the Vulkan rendering are likely to be fixed by then. There's no need to use relic technologies found in Godot 3.

Therefore I will continue my Visual Script tutorial based on Godot 4.

---

## What is Visual Script?

Visual Script is another way to code your game but doesn't require you to do a single line of code. Instead, you do code by connecting various logic nodes. The most popular form of Visual Script is **[Blueprints](https://docs.unrealengine.com/5.0/en-US/blueprints-visual-scripting-in-unreal-engine/)** from Unreal Engine.

The purpose of Visual Script is to make it easier for everyone to code. Visual Script is easier to learn and understand than C++, that's for sure. And that's the reason why Epic introduced Blueprints in Unreal Engine.

However, many Godot fans would say that GDScript is very easy and Visual Script isn't needed. Of cause, GDScript is much less complicated when compared to C++. Nevertheless, you still have to remember its syntax. With Visual Script, you don't have to remember a language's specific syntax, which is a huge plus. All you have to do is learn the engine APIs and call them with Visual Script nodes.

In Godot, Visual Script is called Visual Script. You can learn some basic usage from the **[official docs](https://docs.godotengine.org/en/latest/tutorials/scripting/visual_script/getting_started.html)** (it's a little bit outdated and lacking though).

---

## What is the Visual Script's flow?

![Visual Script's flow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y4l0vsoy5kbtvrnewra9.jpg)

First, we need to know the order of how the Visual Script works. Visual Script works in a flow. As shown in the screenshot above, I get the first child of the **TouchDPad** node, then I get its the first child and set it as an `object` variable. This whole node sequence above is called a flow.

---

## Visual Script nodes that you will use a lot!

In this article, I will show you guys some very important nodes that most of you will use all the time as Visual Script users.

### Type Cast

![Type Cast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m2sul8tzribsyhn39vah.jpg)

This node filters out the object at the _input_ port, then if it matches **the criteria you set in its Base Type**, the action along with the filtered object at the _output_ port will be triggered.

For instance, if you want to filter _input events_, which will include all the events from the user input, and you want to trigger some action based on the _screen drag event_ only, not the _screen touch event_ or other input events, then you can use this node as shown in the screenshot above.

### Switch VS Condition

![Switch Node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mhoqr04fzw9v5lcgqpuk.jpg)

If you need to use many condition nodes (`if`, `else`) in the same flow, you would rather use a **switch node** instead of a condition node. A switch node will reduce your nodes on the canvas by a lot, hence makes it easier for you to read the code. Use it whenever you can!

### Iterator

![Iterator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qwm4lhe4x81sy0ini4kf.jpg)

Use iterator node with an `array` or `dictionary` variable. For instance, you put a lot of `object`s in your `dictionary`, then want to pick an `object` in the `dictionary` based on some criteria. Therefore you have to scan all the `object`s in the `dictionary` at once (in a single flow), then you can use an iterator for this.

In the above screenshot, I run the iterator in the `_ready` function. It prints all the keys in the `dictionary` in a single flow.

### Expression

![Expression Node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pi73hffz2fybxntwhr9m.jpg)

This node can save you a tons of operator nodes (add, subtract, multiply, divide, and etc.). If you do a very complicated calculation in a flow, you would rather use this node instead. 

### Constructor and Deconstructor

![Constructor and Deconstructor](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0eslug0rdwualf7vmi13.jpg)

The **constructor** and **deconstructor** are another basic yet very essential node in Visual Scripting. For instance, if you want to construct a `vector3` from many `float`s, then you need a vector3 constructor.

### Get and Set Index

![Get and Set Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x3ndzc9vinv2rlcrc06v.jpg)

The **get** and **set** index nodes are very useful to use with `array` and `dictionary`, especially, when you want to **add a key and its value to a `dictionary`** variable, you would use the set index node like this: 

![How to add a key to a dictionary variable](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o2eu19r5biolhl57hhw5.jpg)

You can get the value of a `dictionary` variable by using its key from either the get index node or the specific get node from the dictionary type node:

![Get Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mybwniwdyvvs5kxtrf09.jpg)

### General Get Node with Set Mode set to Basic Type

![General Get Node](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/op5ldzkyvlhi9ak4ec8c.jpg)

I use this node a lot to get an index from a value of any specific type. For instance, if I want to get an `x` value from a `vector3`, I can use this node as shown in the screenshot above.

---

## Call Mode

![Call Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58klyqgm7iza6g5vfgbh.jpg)

There're 4 important call modes, `Self`, `Node Path`, `Instance`, and `Singleton`.
- **Self:** This is the default mode. It means that you will call a function in **the current _scene_ node** that the script is attached to.
- **Node Path:** You can call a function to do something with **another _scene_ node** which the script isn't attached to. For instance, you can change the position of scene node B even though the current script is attached to scene node A.
- **Instance:** This mode is probably one of the most used of all. For instance, you can save a scene node or an input event to a variable of the `object` type, then you can **call a function to do something with that `object`**. It's more flexible than the Node Path mode which can only support a function call based on scene node.
- **Singleton:** You can use some specific engine features with this call mode. For instance, you can set your **[mouse mode](https://docs.godotengine.org/en/latest/classes/class_displayserver.html?highlight=mouse_mode#enum-displayserver-mousemode)** by calling an input singleton.

---

## Let's put some nodes above into practice 💪

![Practice Visual Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/os6mgbcvcyf6ooy5f2m1.jpg)

I create a very simple Visual Script practice. The app above will let you type A-Z from your keyboard input and it will return a word corresponding to the letter you typed in. In order to do that, you can follow these steps below:

- **Create a variable** of type `dictionary` and type in the keys from A-Z with the values corresponding to the key.

![Dictionary's keys and values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g41f5kj3r9x944ykgoz9.jpg)

- **Detect user's input event** with the `_input` function, then filter out unrelated input events with Type Cast `InputEvenKey` node.

![Type Cast](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tjrnc1zhtafd48t3vd1.jpg)

- **Convert the `InputEvent`** that we filtered out **into text** using the `as_text` function (of cause, you need to learn the engine API to access the engine features).

![As Text function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gw1h2r1cmis7zyv9fw31.jpg)

- You need to **check whether the user type in the letter from within A-Z.** Otherwise, the code will generate error if the user type in a symbol or a number as it's not belong to our dictionary's keys. You can use the `has` function from the dictionary nodes for this purpose.

![check whether the user type in the letter from within A-Z](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdm7xyq1larmlpdccgq7.jpg)

- If the user type in the letter from within A-Z, **set text** based on the keys and values in our dictionary.

![set text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5i6do96b10bwt8dufer.jpg)

**It's done!**

Below you can see all the Visual Script nodes needed to create this little app:

![Complete Code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwued90t5cdujsyuypvs.jpg)

You can download a completed project [**here**](https://drive.google.com/file/d/1P7KkFI-qbAiJP1OjeQCg4oKyKH5__PvO/view?usp=sharing). Remember that you need **Godot 4** to open this project. I recommend **[Godot 4 alpha 5](https://godotengine.org/article/dev-snapshot-godot-4-0-alpha-5)** as of this time.

---

Cover Photo by Photo by [Immo Wegmann](https://unsplash.com/@macroman?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)