6. Score & UI

Maak een score systeem en HUD met Godot Autoload

Overzicht

In dit hoofdstuk maak je een UI systeem dat de score bijhoudt. Elke gedode enemy levert punten op. Je leert hoe je Godot's Autoload feature gebruikt om een globally accessible GameManager te maken, hoe je UI elementen maakt met Control nodes, en hoe signals gebruikt voor clean communication tussen systemen.

GameManager Autoload

Maak een GameManager die de game state bijhoudt (zoals score). Deze GameManager moet op elk moment, op elke plaats in je spel beschikbaar zijn.

GameManager Script

1. Maak een nieuwe C# script: scripts/GameManager.cs

2. De GameManager is een Node (geen Node3D)

3. Voeg een Signal toe dat uitgezonden wordt wanneer de score verandert

using Godot;

public partial class GameManager : Node
{
    [Signal]
    public delegate void ScoreChangedEventHandler(int newScore);
}

1. Maak een variable aan die de huidige score bijhoudt

using Godot;

public partial class GameManager : Node
{
    [Signal]
    public delegate void ScoreChangedEventHandler(int newScore);

    private int _score = 0;
}

1. Maak een functie die de score verhoogt en een signal uitstuurt

using Godot;

public partial class GameManager : Node
{
    [Signal]
    public delegate void ScoreChangedEventHandler(int newScore);

    private int _score = 0;

    public void AddScore(int points)
    {
        _score += points;
        GD.Print($"Score: {_score}");
        EmitSignal(SignalName.ScoreChanged, _score);
    }
}

1. Zorg dat de GameManager de score uitstuurt wanneer hij klaar is met opstarten

using Godot;

public partial class GameManager : Node
{
    [Signal]
    public delegate void ScoreChangedEventHandler(int newScore);

    private int _score = 0;

    public override void _Ready()
    {
        // Stuur initial score uit zodat UI's de startwaarde krijgen
        EmitSignal(SignalName.ScoreChanged, _score);
    }

    public void AddScore(int points)
    {
        _score += points;
        GD.Print($"Score: {_score}");
        EmitSignal(SignalName.ScoreChanged, _score);
    }
}

Autoload

De GameManager moet globaal beschikbaar zijn. In Godot kan je dit doen met de Autoload feature.

1. Ga naar Project > Project Settings...

2. Klik op de Globals tab bovenaan

3. Bij Path, klik op het folder icoon

4. Navigeer naar scripts/GameManager.cs

5. Selecteer GameManager.cs en klik Open

6. Bij Node Name, typ GameManager (dit wordt de global naam)

7. Klik op Add, je ziet nu de GameManager in de lijst met Autoload nodes

8. Klik Close

HUD Scene Setup

Maak nu een HUD (Heads-Up Display) die de score toont. We gebruiken een Control node als root - Control nodes renderen automatisch bovenop 3D scenes.

1. Ga in de menu naar Scene > New Scene en kies voor User Interface

2. Hernoem de root node naar HUD

3. Rechtermuisknop op HUD > Add Child Node

4. Zoek naar Label

5. Klik Create

6. Hernoem deze Label naar ScoreLabel

7. Sla de scene op als res://ui/HUD.tscn

Je scene hierarchy is nu:

HUD (Control)
└── ScoreLabel (Label)

Position en style de score label

1. Selecteer de ScoreLabel node

2. In de Inspector, vind de Text property

3. Zet Text op Score: 0 (dit is de default text)

4. Vouw Layout uit en klik op de Anchor Preset dropdown (het grid icoon bovenaan)

5. Klik op Top Right (rechtsboven preset met rode hoekjes)

6. Verplaats de label een beetje van de rand af

7. Vouw Theme Overrides > Font Sizes uit

8. Klik op Font Size en zet deze op 24

9. Vouw Theme Overrides > Colors uit

10. Klik op Font Color en kies een kleur (bijvoorbeeld wit: #FFFFFF)

11. Sla de HUD scene op

HUD Script

Maak nu een script dat de score label update wanneer de GameManager een ScoreChanged signal uitstuurt.

1. Selecteer de ScoreLabel node

2. Klik Attach Script

   • Language: C#

   • Class Name: ScoreLabel

   • Path: res://scripts/ScoreLabel.cs

3. Klik Create

4. Maak een functie die de label text update wanneer de score verandert

using Godot;

public partial class ScoreLabel : Label
{
    private void OnScoreChanged(int newScore)
    {
        Text = $"Score: {newScore}";
    }
}

1. Wanneer het spel start, zoek je de GameManager Autoload node

using Godot;

public partial class ScoreLabel : Label
{
    public override void _Ready()
    {
        // Connect to GameManager's ScoreChanged signal
        var gameManager = GetNode<GameManager>("/root/GameManager");
    }

    private void OnScoreChanged(int newScore)
    {
        Text = $"Score: {newScore}";
    }
}

1. Verbindt daarna de ScoreChanged signal (van de manager) aan de OnScoreChanged method (van de ScoreLabel)

using Godot;

public partial class ScoreLabel : Label
{
    public override void _Ready()
    {
        // Connect to GameManager's ScoreChanged signal
        var gameManager = GetNode<GameManager>("/root/GameManager");
        gameManager.ScoreChanged += OnScoreChanged;
    }

    private void OnScoreChanged(int newScore)
    {
        Text = $"Score: {newScore}";
    }
}

1. Sla het script op

2. Sla de HUD scene op

Score integration: enemy death

Verbind nu enemy destruction met de score. Wanneer een enemy vernietigd wordt, moet de score omhoog gaan.

Pas het Target.cs-script aan om de GameManager aan te roepen wanneer een enemy doodgaat.

1. Open scripts/Target.cs

2. Voeg een score waarde toe aan elk target

using Godot;

public partial class Target : RigidBody3D
{
   [Export] private int _scoreValue = 10;

   // ... rest van de code
}

1. Pas de OnHit() method aan, zodat de AddScore functie van de GameManager wordt aangeroepen.

   public void OnHit()
   {
      // ... rest van de code

      // Add score via GameManager
      var gameManager = GetNode<GameManager>("/root/GameManager");
      gameManager.AddScore(_scoreValue);
   }

1. Sla het script op

Configurable score values

Nu kun je verschillende score values instellen voor verschillende targets/enemies!

1. Open objects/Enemy.tscn

2. Selecteer de torso node (die heeft de Target.cs script)

3. In de Inspector, zie je nu Script Variables

4. Verander Score Value naar 50 (enemies zijn meer waard dan targets!)

5. Sla Enemy.tscn op

6. Open objects/Target.tscn

7. Selecteer de target RigidBody3D met Target.cs

8. Laat Score Value op 10

9. Run het spel en test - enemies geven 50 punten, targets geven 10!

Voeg de hud toe aan de main scene

1. Open scenes/main.tscn

2. Sleep de HUD.tscn scene naar de hierarchy (als child van Main root)

3. Sla main.tscn op

4. Run de scene met F6

5. Je zou de "Score: 0" label rechtsboven moeten zien

6. Schiet een enemy neer

7. De score zou moeten verhogen naar 50 (als je enemies hebt) of 10 (als je targets hebt)!

Troubleshooting:

• Score label niet zichtbaar? Check of HUD een Control node is en of de Label position correct is (Top Right anchor, X: -200, Y: 20)

• Score update niet? Check of Target.cs de GameManager aanroept in OnHit()

• "Invalid call. Nonexistent function" error? Rebuild het C# project (Build > Build Solution in de editor)

• ScoreChanged signal niet gevonden? Check of GameManager.cs correct is en rebuild

Complete scripts

De volledige scripts van dit hoofdstuk

GameManager.cs (Autoload)

using Godot;

public partial class GameManager : Node
{
    [Signal]
    public delegate void ScoreChangedEventHandler(int newScore);

    private int _score = 0;

    public override void _Ready()
    {
        // Stuur initial score uit zodat UI's de startwaarde krijgen
        EmitSignal(SignalName.ScoreChanged, _score);
    }

    public void AddScore(int points)
    {
        _score += points;
        GD.Print($"Score: {_score}");
        EmitSignal(SignalName.ScoreChanged, _score);
    }
}

ScoreLabel.cs

using Godot;

public partial class ScoreLabel : Label
{
    public override void _Ready()
    {
        // Connect to GameManager's ScoreChanged signal
        var gameManager = GetNode<GameManager>("/root/GameManager");
        gameManager.ScoreChanged += OnScoreChanged;
    }

    private void OnScoreChanged(int newScore)
    {
        Text = $"Score: {newScore}";
    }
}

Target.cs (Updated)

using Godot;

public partial class Target : RigidBody3D
{
    [Export] private int _scoreValue = 10;

    public void OnHit()
    {
        GD.Print("Target destroyed!");

        // Add score via GameManager
        var gameManager = GetNode<GameManager>("/root/GameManager");
        gameManager.AddScore(_scoreValue);

        // Verwijder de hele parent scene (Enemy of Target root Node3D)
        GetParent().QueueFree();
    }
}