Adding a score when pressing the Ok button

When the player clicks the OkButton, we want to register the name they typed in the scoreboard.

To do so, we need to:

1. Attach a new script to the ScoreForm.
2. Connect the OkButton’s pressed signal to the ScoreForm.
3. Get the Scoreboard node and call its add_line() function.

Right-click the ScoreForm node and select Attach Script to create an empty script for it. We need the script to connect the button’s signal.

Connecting the button’s pressed signal

Select the OkButton node.

In the Node dock on the right, double-click on the pressed signal and connect it to the ScoreForm.

This should take you to the script editor and create a new _on_OkButton_pressed() function.

func _on_OkButton_pressed() -> void:
    pass

Registering the name when pressing the button

We need access to both the Scoreboard and the NameField nodes to use the text the player entered.

So we define two onready variables at the top of the script.

onready var scoreboard := $Scoreboard
onready var name_field := $HBoxContainer/NameField

Then, we can call the Scoreboard’s add_line() function in the callback function. We also call its show() function to make it visible and reset the NameField’s text to empty the field.

func _on_OkButton_pressed() -> void:
    scoreboard.add_line(name_field.text)
    scoreboard.show()
    name_field.text = ""

Hiding the scoreboard with a button

When the player enters a name, they’re stuck on the scoreboard.

We can use a Button and its pressed signal to hide the panel.

In the Scoreboard scene, select the VBoxContainer node and add a new Button as its child named HideButton.

Set the button’s Text to “Hide” at the top of the Inspector.

The button stretches horizontally to fill the space available to it. We want to place it in the bottom-left corner instead.

To achieve that, we have to make two changes:

1. Make the ScoresColumn expand vertically and push the button down.
2. Change the button not to fill all the available horizontal space.

Select the ScoresColumn and in the Inspector, go down to the Size Flags category. Expand it and check the Expand checkbox next to Vertical.

The Vertical flag makes a control node inside a container try to make itself as tall as possible.

Then, select the HideButton and, in the Size Flags category, uncheck the Fill checkbox next to Horizontal.

The Fill flag makes a Control stretch to take all the horizontal or vertical axis space.

Connecting the button’s pressed signal

With the HideButton selected, head to the Node dock to connect its pressed signal to the Scoreboard.

In the function Godot creates for us, _on_HideButton_pressed(), we want to call hide(). It will hide the Scoreboard upon clicking the button.

func _on_HideButton_pressed() -> void:
    hide()

The code

Here is the complete code for the ScoreForm and the Scoreboard so far.

ScoreForm.gd

extends Control

onready var scoreboard := $Scoreboard
onready var name_field := $HBoxContainer/NameField


func _on_OkButton_pressed() -> void:
    scoreboard.add_line(name_field.text)
    scoreboard.show()
    name_field.text = ""

Scoreboard.gd

extends PanelContainer

onready var scores_column := $MarginContainer/VBoxContainer/ScoresColumn


func add_line(player_name: String) -> void:
    var line := Label.new()
    line.text = player_name
    scores_column.add_child(line)


func _on_HideButton_pressed() -> void:
    hide()