For this chapter, you need the standard version of Godot 4.0 or later running on one of the following:

• Windows 64-bit or 32-bit
• macOS
• Linux 64-bit or 32-bit
• Android
• Web Editor

You can find the code and the project files for the projects in this chapter on GitHub: https://github.com/PacktPublishing/Godot-4-Game-Development-Cookbook/tree/main/Chapter%202.

In this recipe, we will first look at @export and some of the variations associated with that annotation and then show how to use @onready.

Getting ready

For this recipe, open Godot 4 and start a new project called Chapter 2.

How to do it…

To investigate annotations, we will use each in a script by doing the following:

1. Open a new project in Godot.
2. In the Scene tab, click 2D Scene.
3. Click on the paper icon above Node2D and to the right of the filter Search box or in the Inspector tab under Node | Script. Click <empty>, then select New Script, and name the script Annotations.
4. Click on Script at the top of the editor to look at the new script we added.
5. @export is the same as export in Godot 3.x, so we will add a score to the node so we can see it in the Inspector tab:

   1  extends Node2D                           
   2     
   3  @export var score = 0

6. As you saw from the auto-completion, there are new @export options available now. Let’s add @export_range() to line 4:

   4  @export_range(0, 100, .1) var input_range

Note

This gives a range from 0 to 100 in increments of .1 to the input_range variable, which you can change in the Inspector tab.

7. We can show named enum values in the Inspector tab by adding the following to lines 5 and 6:

                                                         
   5    enum WeatherEnum {Sunny, Rainy, Cloudy = -1}
                                                      
   6    @export var weather: WeatherEnum

8. On line 7, let’s add a file to show up on the Inspector tab using @export_file:

   7    @export_file("*.txt") var file

9. Click on Node2D in the Scene tab. Then, click on + under Scene in the Scene tab to bring up the Create New Node window.
10. Then, type camer2d in the Search box. Select and add Camera2D to Node2D.
11. The onready keyword is now @onready. We will add a Camera2D node and use @onready with the camera on line 7:

    8    @onready var camera = $Camera2d

12. Click on Node2D at the top of the tree in the Scene tab to see everything we used with @export in the Inspector tab.

Figure 2.1 – Annotations.gd

How it works…

We added a score variable so we can could see it in the Inspector tab using @export instead of the export keyword.

We added @export_range(0, 100, .1) var input_range to show a range of 0 to 100 that snapped the value in .10 increments. You could also just use @export_range (0, 100) var input_range or @export_range (0, 100) var input_range: float.

We created an enum and then we used @export var weather: WeatherEnum to put the enum into the weather variable so we could see it in the Inspector tab. You could also do @export_enum(Sunny, Rainy, Cloudy) var weather.

We used the @export_file("*.txt") var file to show how a file is seen in the Inspector tab.

We added a Camera2D node to Node2D so we could use @onready with it. First, we just used @onready var camera = $Camera2d to add the Camera2D node to the camera variable.

In Godot 4, the setget keyword is gone and has been replaced by using properties, so you don’t have to use dedicated functions. We will go through some examples of how to use getters and setters.

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and add Node2D. Click on the word Scene in the top menu next to Project, then select Save Scene As, and name it Properties.

How to do it…

There are two ways we can use getters and setters. The first is like Godot 3.x, where we assign get and set to functions. The second way is to define get and set after we declare the variable. First, let’s create a button:

1. In the new scene named Properties that you created, add a Button node and make it big enough to see.

Figure 2.2 – Creating a Button node

2. Add a script named Properties.gd to the Button node and delete everything except for line 1.
3. At the top center of the editor, left-click on 2D in the Workspace section. Add a signal to the Button node by going to the Node tab to the right of the Inspector tab located under BaseButton and selecting pressed():

   1  extends Button       
   2                                                 
   3     

4. The setget keyword used in Godot 3.x is now gone. We will assign get and set to functions as was done in Godot 3.x:

   5  var value: int = 10: set = set_value, get = get_value                         
   6                                                   
   7  func set_value(new_value: int) -> void:            
   8     value = new_value                          
   9     print('setter', str(value))               
   10             
   11 func get_value() -> int:                         
   12    print('getter', str(value))               
   13    return value                              
   14            
   15 func _on_pressed():                              
   16    value -= 1                              

5. Now click the Run the current scene button or hit the F6 key. Look at the Output section in the bottom panel.
6. Highlight lines 5–13 and hit Ctrl + K to comment out these lines.
7. Now we will try using a variable declaration and no functions. Let’s start on line 15. Lines 23 and 24 should still be there from step 4. They were lines 15 and 16:

   15 var value: int = 10:            
   16     set(new_value):             
   17        value = new_value                         
   18        print('setter', str(value))          
   19     get:                                        
   20        print('getter', str(value))          
   21        return value                              
   22             
   23 func _on_pressed():                             
   24     value -= 1                         

8. Now click the Run the current scene button or hit the F6 key.

How it works…

We added a button and connected the pressed() signal so we could see that the getters and setters were working.

In lines 7–9, we created the set_value setter function with an integer parameter called new_value. This function does not return a value so we used -> void:. We then made value equal to new_value, and finally, we printed setter with value.

In lines 11–13, we created the get_value getter function, which returns an integer, so we used -> int:. We printed getter with value and then we returned value. In line 16, we added value = value – 1 to the _on_pressed() function that was created when we hooked up the signal in step 3.

We entered the code to call the get and set functions as was done using the getset keyword in Godot 3.x. In line 5, we created a variable called value, which is an int value equal to 10. We then assigned set to the set_value function and get to the get_value function.

Figure 2.3 – The GDScript and console output results

When the button was clicked, the value variable in the setter was decreased by one and then printed on the console, as well as the value getter variable before and after the button was pushed, to show that the getter and setter were working.

We commented out lines 5–13 so we could use the get and set properties with the variable declaration.

On line 15, we created an integer variable called value and assigned it to equal 10. Then, on line 16, we used the set property with new_value as the parameter. On lines 17–18, we made value equal to new_value and printed setter with value. On line 19, we saw the get property. On lines 20–21, inside of the get property, we printed getter with value.

Figure 2.4 – The GDScript and console output results

We select Run the current scene and notice that we get the same output on the console as we did when we used functions. The value variable in the setter is decreased by one and then printed on the console, as well as the value getter variable before and after the button was pushed.

The yield keyword has been removed and replaced by the await keyword. You can use await with coroutines or signals. It pauses the function it is in and waits for a signal to be emitted, or if a called coroutine is finished, it then resumes the function where it was originally called.

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and adding Node2D. Select Save Scene As and name it Await.

How to do it…

We will go through a very simple example of how await works with a coroutine using a button as a character dialogue box. When the button is clicked, it skips to the next character dialogue box:

1. In the new scene named Await that you have created, add a Button node and make it big enough to see the text that we are going to place in it with code.
2. Add a script named Await to Node2D and delete all of the default lines except line 1.
3. Let’s use @onready and create a variable called button to reference our Button node:

   1  extends Node2D                                   
   2                                                  
   3  @onready var button = $Button

4. On line 5, we will create a new function called game_dialogue() and call it in the _ready() function:

   4                                          
   5  func _ready():                               
   6     game_dialogue()                         
   7      
   8  func game_dialogue():                          
   9     button.text = "Dialogue text."               
   10    print("In the game_dialogue function.")     
   11    var next_dialogue = await skip_dialogue()    
   12    if next_dialogue:                    
   13       print("At the end of game_dialogue function.")

5. On line 15, we created a new function called skip_dialogue():

   15 func skip_dialogue():              
   16    print("Now in the skip_dialogue() function.") 
   17    await button.button_up                    
   18    button.text = "New dialogue text."          
   19    print("At the end of skip_dialogue function." 
   20    return true

6. Now click the Run the current scene button or hit the F6 key.

Figure 2.5 – GDScript for steps 3 to 5 (the code for Await.gd)

How it works…

We added a Button node and made it big enough for us to read the text on the button that we will code in later. Then we added a script called Await to Node2D and deleted all of the default lines except line 1.

We used @onready with the button variable so we could load the reference when the _ready() function was called.

We created a function called game_dialogue(). In line 9, we added text to the button. In line 10, we printed that we were in this function so we could see it in the console to see how the await keyword works. In line 11, we declared a variable called next_dialogue equal to the skip_dialogue() function written in step 5.

This is where the program will pause and go to the coroutine of the skip_dialogue() function. In lines 12–13, we have an if statement that checks that next_dialogue is true, and if so, then prints that we are back in the game_dialogue() function. For it to be true, the skip_dialogue() function has to run and return true.

We created the function called skip_dialogue(). In line 16, we printed to the console that we were now in this function. In line 17, we waited for the user to click the button. In line 18, we changed the text on the button. In line 19, we printed to the console that we were at the end of the skip_dialogue() function. In line 20, we return true so that when we go back to the game_dialogue() function, we can print the last print statement.

We selected Run the current scene.

You see In the game_dialogue function. and Now in the skip_dialogue() function. on the console before you click the button. The default text on the button is Dialogue text.. After you click the button, you see At the end of skip_dialogue function. and At the end of game_dialogue function. on the console and the text on the button is New dialogue text..

In Godot 3.x, we used to call a function of the parent class from a subclass by using the .function of the parent class. Now we use the super keyword. In the example, we will use in this recipe, we have SniperEnemyClass, which is inherited from DefaultEnemyClass. If we wanted to call the rifle function in DefaultEnemyClass from SniperEnemyClass, we would use the super keyword, but in Godot 3.x, we use .rifle().

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and clicking Node2D. Select Save Scene As and name it Super.

How to do it…

We will create two classes called SniperEnemyClass, which is inherited from DefaultEnemyClass. The DefaultEnemyClass class has two functions called rifle and orders. We will use the super keyword from SniperEnemyClass to call the two functions:

1. Add a script named Super to Node2D and delete all of the default lines except line 1.
2. Let’s start on line 11 and create DefaultEnemyClass:

   11 class DefaultEnemyClass extends Node2D:          
   12     func rifie():                   
   13        print("Basic rifle")                        
   14     func orders():                              
   15        print("Guard the front gate.")

3. Now let’s create SniperEnemyClass starting on line 17:

   17 class SniperEnemyClass extends DefaultEnemyClass:
   18     func rifle():                              
   19        print("Sniper rifle")                   
   20        super.orders()                          
   21        super()

4. We need to add a couple of variables to the _ready() function so we can see the output of the print statement on the console. Let’s start on line 3:

   3  func _ready():                           
   4      var enemy = DefaultEnemyClass.new()          
   5      var sniper = SniperEnemyClass.new()          
   6  
   7      enemy.rifle()                                
   8      enemy.orders()                              
   9      sniper.rifle()

5. Now click the Run the current scene button or hit the F6 key.

Figure 2.6 – super keyword code (GDScript for steps 2–4)

How it works…

We added a script to Node2D and named it Super. Then we deleted all of the lines in the script except line 1.

We made a class called DefaultEnemyClass, which extends Node2D so, later, we can see the output on the console. In lines 12–13, we made a function called rifle to print out a rifle. In lines 14–15, we made a function called orders to print out the orders.

We made a class called SniperEnemyClass, which extends DefaultEnemyClass. In lines 18–19, we created a rifle function, which prints out a sniper rifle. In line 20, we called the orders function in the DefaultEnemyClass class using the super keyword. In line 21, we called the rifle function in DefaultEnemyClass from SniperEnemyClass using the super() keyword. As long as you are in a function that is in both parent and child classes, you can use super(). If you want to call a different function in DefaultEnemyClass, then you have to use super.function.

In lines 4–5, we created enemy and sniper instances for the two classes. In line 7, we called the rifle() function in DefaultEnemyClass to see which rifle was set as the default. In line 8, we called the orders() function in DefaultEnemyClass to see the enemy orders. In line 9, we called the rifle() function in SniperEnemyClass.

We ran the current scene. We saw Basic rifle, Guard the front gate., Sniper rifle, Guard the front gate., and Basic rife on the console.

We get the following console output when we run the current scene:

Figure 2.7 – super keyword console output

In Godot 4, we can use typed arrays so if you are only going to use an array of strings, you can set the element type to String and Godot will throw an error if you try to put anything other than a string in that array. Types are validated at runtime and not when compiling, which causes slightly faster performance.

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and adding Node2D. Select Save Scene As and name it TypedArray.

How to do it…

In this recipe, we are going to set up three arrays. The first is not a typed array, the second is a typed array, and the third infers the type of the array:

1. Add a script named TypedArray to Node2D and delete all the default lines except line 1 and the _ready() function.
2. On line 3, let’s create a regular array:

   1  extends Node2D  
   2                                                  
   3  var regular_array = [4, "hello",434]         

3. On line 4, we will create a typed array of int. Try adding a string to this array:

   4  var typed_array: Array[int] = [16, 32, 64]        

4. On line 5, we will create an inferred array of string. Try adding an integer to this array:

   5  var inferred_array := ["hi", "hello"]     

5. On lines 7–10, in the _ready() function, we print out all the arrays to the console:

                                                     
   7  func ready():                                   
   8      print(regular_array)                         
   9      print(typed_array)                             
   10     print(inferred_array)                    

6. Now click the Run the current scene button or hit the F6 key.

Figure 2.8 – GDScript for steps 2 to 5

How it works…

We added a script to Node2D and named it TypedArray. Then we deleted all of the lines in the script except line 1 and the _ready() function. We created a regular array with two integers and one string value. We can put anything in this array.

We created a typed array of int and tried to enter a string in the array to see the resulting error. In step 4, we created an inferred array of String and tried to enter an integer into the array to see the resulting error.

We printed out all of the arrays to the console. We ran the current scene. We saw [4, "hello", 434], [16, 32, 64], and ["hi", "hello"] printed on the console.

In this recipe, we are going to go through some examples of how to use lambdas in Godot 4. First, we create a lambda that takes a greeting parameter, then we will call the lambda and pass in "hello" to the parameter. In the next example, we declare a variable called health outside of the player_health lambda and call the variable inside of the lambda. We will learn two ways to write a lambda function with a button signal. Finally, we use a lambda function, moving the button across the screen with a tween.

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and adding Node2D. Select Save Scene As and name it Lambda.

How to do it…

Let’s start by creating a Button node and referencing it to the button variable:

1. Add a script named Lambda to Node2D and delete all of the default lines except line 1 and the _ready() function.
2. In the new scene named Lambda that you created, add a Button node and make it big enough to see.
3. Let’s use @onready and create a variable called button to reference our Button node:

   1  extends Node2D                                   
   2                                                  
   3  @onready var button = $Button

4. On line 5, in the _ready() function, we create a lambda that will pass in "hello" to the lambda parameter greeting:

   5  func _ready():            
   6      var lambda = func(greeting):                   
   7          print(greeting)                         
   8      lambda.call("hello")                        

5. On line 10, we declare a variable called health:

   10     var health = 100 

6. On line 11, we create a lambda function called player_health:

   11     var player_health = func(): print("Current health ", health)

7. On line 12, we call the player_health lambda function:

   12     player_health.call()                    

8. On line 14, we create a lambda function to run when the button is pressed:

   14     button.pressed.connect(func(): print("button was pressed"))

9. On lines 16–18, we create a lambda to run when the button is released:

   16     var button_released = func():               
   17         print("Button released")                  
   18     button.button_up.connect(button_released)

10. On lines 20–21, we create a tween to move the button across the screen:

    20     var tween = create_tween()        
    21     tween.tween_method(func(pos): button.position.x = pos, 0, 500, 1)

11. Now click the Run the current scene button or hit the F6 key.

Figure 2.9 – Lambda code (GDScript for steps 3–10)

How it works…

We added a script called Lambda to Node2D and deleted everything in the script except line 1 and the _ready() function. Then, we created a Button node in the Scene tab. In the Lambda script, we used @onready to declare a variable called button to the Button node.

We created a variable called lambda equal to the lambda function with the greeting parameter, which prints the greeting. Since lambdas are a type of callable, we call the lambda variable with the "hello" string to be used as the greeting.

We declared a variable called health and gave it a value of 100 in line 10. You can use variables from the outer class or outer function inside the lambda. In line 11, we created a lambda called player_health, which prints out Current health and the value of the health variable. In line 12, we call the player_health lambda to print out ("Current health ", health) to the console.

We pass the lambda as a function argument. When the pressed() button signal is emitted, Button was pressed will be printed to the console.

We essentially do the same thing we did last in the step except we use more than one line. When the button_up() signal is emitted, Button released is printed to the console.

On line 20, we create a tween. On line 21, we use a lambda in tween_method() to move the Button node from position (0) to position (500) with a duration of (1). If we wanted the button to go slower, we would increase the duration number.

We run the current scene. It shows the button move across the screen and on the console, you will see "hello" and "Current health 100". After you click the button, you will see Button was pressed and Button released.

Figure 2.10 – Button and console output

In this recipe, we will see how callables can be used with signals. We will also look at the call and bind callable methods. Callables can be held in variables and passed into functions. As such, you can use them in arrays and in dictionaries as the key or the value.

Getting ready

For this recipe, create a new scene by clicking + to the right of the current Scene tab and adding Node2D. Select Save Scene As and name it Callables.

How to do it…

Let’s start by creating a Button node and referencing it to the button variable:

1. Add a script named Callables to Node2D and delete all of the default lines except line 1 and the _ready() function.
2. In the new scene named Callables that you created, add a Button node and make it big enough to see.
3. Let’s use @onready and create a variable called button to reference our Button node:

   1  extends Node2D                                   
   2       
   3  @onready var button = $Button

4. On line 8, we create a function called signal_callable():

   8  func signal_callable():             
   9      print("This method was called by the button pressed signal.")

5. On line 5, in the _ready() function, we connect a callable signal to the signal_callable() function:

   5  func _ready():                                    
   6      button.pressed.connect(signal_callable)

6. Now click the Run the current scene button or hit the F6 key.
7. Let’s use the .bind method when we connect the signal. On line 6, add .bind after signal_callable:

   6      button.pressed.connect(signal_callable.bind("binding_")) 

8. We need to add a parameter to the signal_callable function:

   8  func signal_callable(param):         
   9      print(param, "This method was called by the button pressed signal.")

9. Now click the Run the current scene button or hit the F6 key.
10. Let’s add a new function on line 11 called player_text:

    10 func player_text(param: String):                
    11     print(param)              

11. Go to line 7, hit the Tab key, and add more code to the ready function.
12. Let’s create a variable called pt equal to player_text:

    7      var pt = player_text      
    8      pt.call("Hello, NPC!")          

13. Now click the Run the current scene button or hit the F6 key.

How it works…

We added a script called Callables to Node2D and deleted everything in the script except line 1 and the _ready() function. Then we created a Button node in the Scene tab. In the Callables script, we used @onready to declare a variable called button to the Button node.

We created a function that we want to run when the button pressed signal is true. Notice that we don’t have to connect the signal in the editor. We can use any method that we want.

In the _ready() function, we used the button reference to connect the signal_callable function when the signal pressed is true, which happens when the button is pressed.

We ran the current scene. In the console, we saw This method was called by the button pressed signal. after we clicked the button.

Figure 2.11 – Using callables with signals (code for steps 4–6)

We used the callable bind method. In line 6, we added .bind like this:

button.pressed.connect(signal_callable.bind("binding_")).

We needed to add a parameter to the function and inside of the print statement to see what we added with bind.

We ran the current scene. In the console, we saw binding_This method was called by the button pressed signal. printed after we clicked the button.

Figure 2.12 – Using callable with the bind method (code for steps 7–9)

We added a function called player_text, which takes a parameter called param that only accepts strings. It prints out the parameter that will be passed in when we use .call.

We created a variable for the player_text() function When you enter var pt = player_text, autocomplete wants to add the () at the end – make sure you delete it. We converted the function into a variable, so now we can use the function in arrays, dictionaries, or in any other way you can use a variable.

We ran it to see Hello, NPC! printed in the console.

Figure 2.13 – Using .call() with a variable of the function (code for steps 10–13)