8. UI & Score

Voeg een UI en score systeem toe aan je arcade racer

Overzicht

Voeg een simpel scoresysteem toe aan je arcade racer:

• UI autoload - Globale UI met score tracking

• Score label - Label dat de score toont

• Checkpoint group - Automatische connectie via Godot groups

Checkpoint group

Begin met het toevoegen van de Area3D van elk checkpoint aan een "checkpoint" group. Godot groups laten je nodes organiseren met labels. Je kan dan alle nodes in een group opvragen met GetTree().GetNodesInGroup("checkpoint"). Perfect voor collectibles, enemies, of checkpoints!

1. Open scenes/Checkpoint.tscn (of waar je je checkpoint scene hebt opgeslagen)

2. Selecteer de Area3D child node (niet de root!)

3. Ga naar de Node tab rechts (naast Inspector)

4. Onder Groups, zie je een tekstveld en een + knop

5. Typ in het tekstveld: checkpoint

6. Vink Global AAN. Deze instelling zorgt ervoor dat we ook in andere scenes van deze groep gebruik kunnen maken.

7. Klik de + knop

8. Je ziet nu "checkpoint" in de lijst onder Groups

9. Sla de scene op (Ctrl+S)

Nu zitten alle Area3D nodes van de checkpoints automatisch in de "checkpoint" group!

Ui scene

Maak een simpele UI-scene die de score toont.

1. Klik Scene > New Scene

2. Klik User Interface (dit maakt een Control node als root)

3. De root node heet "Control" - hernoem deze naar UI

4. Rechts-klik op UI > Add Child Node > Label

5. Hernoem de Label naar ScoreLabel

6. Sla de scene op als res://scenes/ui.tscn

Scene hierarchy:

UI (Control)
└── ScoreLabel (Label)

Positioneer en style de scorelabel

Plaats het Score Label recehtsboven in de UI.

1. Selecteer de ScoreLabel node

2. In de Inspector, onder Control > Layout Mode:

   • Zet de waarde op Anchors

   • Klik het Anchors Preset dropdown menu en selecteer Top Right

3. Onder Label > Text: Typ Score: 0

4. Klik op Control > Theme Overrides > Font Sizes

5. Klik het + icoontje naast Font Size

6. Zet de waarde op 32

7. Sla de scene op

Ui script

Maak nu een script dat zowel de UI toont als de score bijhoudt.

1. Selecteer de UI node in scenes/ui.tscn

2. Klik het script icoontje in de Inspector (of rechts-klik > Attach Script)

3. Path zou moeten zijn: res://scripts/UI.cs

4. Klik Create

1. Start met de basis class:

using Godot;

public partial class UI : Control
{
}

1. Voeg een variabele toe om de ScoreLabel op te halen:

using Godot;

public partial class UI : Control
{
    [Export] private Label _scoreLabel;
}

1. Voeg een score variabele toe:

public partial class UI : Control
{
    [Export] private Label _scoreLabel;
    private int _score = 0;
}

1. Voeg de AddPoint method toe die de score verhoogt:

public partial class UI : Control
{
    [Export] private Label _scoreLabel;
    private int _score = 0;

    public void AddPoint()
    {
        _score++;
    }
}

1. Update de label tekst in de AddPoint method:

    public void AddPoint()
    {
        _score++;
        _scoreLabel.Text = $"Score: {_score}";
    }

1. Ga terug naar de Godot Editor en selecteer de UI node in scenes/ui.tscn

2. Sleep de ScoreLabel node naar de Score Label property in de Inspector

Vergeet zeker deze laatste 2 stappen niet! Anders krijg je een null reference error.

Checkpoint connecties

Vervolgens zorg je ervoor dat alle checkpoints aan de UI laten weten wanneer de speler er doorheen vliegt. Verzamel hiervoor eerst alle checkpoints, en verbind daarna het BodyEntered-signaal van elke checkpoint met de AddPoint-methode.

1. Voeg de _Ready() method toe:

public override void _Ready()
{
}

1. Vind alle checkpoints in de "checkpoint" group:

public override void _Ready()
{
    // Vind alle checkpoints in de "checkpoint" group
    var checkpoints = GetTree().GetNodesInGroup("checkpoint");
}

GetTree().GetNodesInGroup("checkpoint") geeft een lijst met alle nodes die in de "checkpoint" group zitten.

1. Loop door alle gevonden checkpoints:

public override void _Ready()
{
    var checkpoints = GetTree().GetNodesInGroup("checkpoint");

    foreach (Node node in checkpoints)
    {
    }
}

1. Check of elke node een Area3D is:

public override void _Ready()
{
    var checkpoints = GetTree().GetNodesInGroup("checkpoint");

    foreach (Node node in checkpoints)
    {
        if (node is Area3D checkpoint)
        {
        }
    }
}

Met node is Area3D checkpoint controleer je het type EN sla je het meteen op in een nieuwe variabele checkpoint.

1. Verbind het BodyEntered signaal met AddPoint:

public override void _Ready()
{
    var checkpoints = GetTree().GetNodesInGroup("checkpoint");

    foreach (Node node in checkpoints)
    {
        if (node is Area3D checkpoint)
        {
            checkpoint.BodyEntered += body => AddPoint();
        }
    }
}

Waarom de lambda? Het BodyEntered signaal geeft een Node3D parameter mee, maar AddPoint() verwacht geen parameters. De lambda functie body => AddPoint() ontvangt de parameter maar gebruikt deze niet - het roept gewoon AddPoint() aan.

UI als Autoload

Nu maken we de UI beschikbaar in het hele project via Godot's autoload-systeem.

1. Ga naar Project > Project Settings

2. Klik op het Globals tabblad

3. Selecteer Autoload

4. Klik op het folder icoontje naast Path

5. Navigeer naar res://scenes/ui.tscn

6. Selecteer het bestand

7. Het Node Name veld vult automatisch in met "UI"

8. Klik Add

9. Klik Close

Nu is de UI automatisch zichtbaar in elke scene EN verbindt automatisch met alle checkpoints!

Test met F5!

Je zou nu moeten zien:

• "Score: 0" rechtsboven in de UI

• Wanneer je door een checkpoint vliegt:

  • Het checkpoint geluid speelt

  • De score gaat omhoog (1, 2, 3, ...)

  • De UI update meteen

• Alle checkpoints werken automatisch zonder handmatige signal connecties!

Als het niet werkt:

• Controleer of UI.tscn is toegevoegd als autoload in Project Settings

• Check of de checkpoint scene in de "checkpoint" group zit

• Kijk in de Output tab of er errors zijn

• Test of de checkpoint collision werkt (voeg tijdelijk GD.Print("Hit!") toe in OnCheckpointEntered)

Complete script

Klik hier voor het volledige UI.cs script

using Godot;

public partial class UI : Control
{
    [Export] private Label _scoreLabel;
    private int _score = 0;

    public override void _Ready()
    {
        // Vind alle checkpoints in de "checkpoint" group
        var checkpoints = GetTree().GetNodesInGroup("checkpoint");

        foreach (Node node in checkpoints)
        {
            if (node is Area3D checkpoint)
            {
                checkpoint.BodyEntered += body => AddPoint();
            }
        }
    }

    public void AddPoint()
    {
        _score++;
        _scoreLabel.Text = $"Score: {_score}";
    }
}