Adding a form to enter your name

In this lesson, you’ll add a field to let the player add their name to the Scoreboard.

We’ll first design a name form with a confirmation button to let the player enter their name.

Then, we’ll code the ability to register a name typed in the field into the scoreboard.

In the next lesson, we’ll add a button to hide the scoreboard and go back to the form.

That’ll allow you to enter multiple names in the scoreboard.

Creating the ScoreForm scene

To add the form and make it communicate with the scoreboard, we need a scene with a form and an instance of the scoreboard.

Go to Scene -> New Scene to create a new empty scene and click the User Interface button in the Scene dock.

A Control node appears in your Scene dock. Rename it to ScoreForm.

We want a row containing an input field and a button for the form.

With the ScoreForm selected, create a new HBoxContainer node. The HBoxContainer node arranges its children in a row.

Then, create both a LineEdit node and a Button as children of the HBoxContainer. Rename the LineEdit to NameField and the Button to OkButton.

So far, your scene should look like this.

Making the form wider

Our form is tiny and stuck in the top-left corner of the view.

We need several steps to make it stretch along the top edge of the ScoreForm node’s bounding box:

1. First, select the HBoxContainer, and in the toolbar at the top, click on Layout -> Top Wide.
2. With the HBoxContainer selected, click and drag the bottom resize handle to make the container taller.
3. Select the NameField. In the Inspector, turn on its Expand checkbox in Size Flags -> Horizontal.

The name field should now squash the button in the top-right of the view.

Setting a node to expand inside a container makes it grow and push siblings down to their minimum size.

We can increase the button’s minimum width by giving it some text. Select the OkButton and set its Text to “Ok” in the Inspector.

While we’re at it, let’s select the NameField and give it some placeholder text. In the Inspector, expand its Placeholder category and set the Text to something like “Enter your name.”

Then, you can select the ScoreForm, press Alt, and click and drag one of its corner resize handles to make it smaller.

As you can see, the text looks different from the scoreboard. To remedy that, select the ScoreForm and expand the Theme in the Inspector. Right-click on the [empty] slot and select Quick Load.

Load the scoreboard_theme.tres file we saved earlier.

Instancing the Scoreboard scene

When we click the OkButton, we want to show the Scoreboard with the input name. To achieve that, we need to add an instance of the scoreboard as a child of the form. This will allow us to call its add_line() function.

Select the ScoreForm and click the link icon at the top of the Scene dock to open the Instance Child Scene window.

Search for Scoreboard.tscn and press Enter to add the node.

We want to see the form first, but the Scoreboard hides it. Click the eye icon next to the Scoreboard in the Scene dock to hide it by default.

Your scene should look like this.

Please save the scene next to the Scoreboard.tscn file in the Scoreboard/ directory.

With our form designed, we’re ready to add code and display the entered name on the Scoreboard. We’ll do that in the next lesson.