6. Road Placement & Base Placer

Maak een UI systeem om tussen verschillende building types te wisselen met arrow buttons

Overzicht

In dit hoofdstuk leer je:

• UI-scene maken met HBoxContainer layout

• BuildingSelector-script met texture extraction

• Preview textures van MeshLibrary ophalen

• Arrow buttons voor cycling tussen buildings

• Input handling centraliseren in UI

UI-architectuur

Tot nu toe was het alleen mogelijk om building ID 0 te plaatsen via linkermuisklik. Je moest de code aanpassen om een ander building type te selecteren. Niet erg gebruiksvriendelijk!

In dit hoofdstuk maak je een visuele gebouw-selector met:

• Preview textures van alle 5 gebouwen

• Arrow buttons om te cyclen tussen building types

• Gecentraliseerde input handling

De UI haalt preview textures direct van de MeshLibrary - geen extra assets nodig!

UI Scene opzetten

Bouw de visuele interface voor de building selector.

1. Scene aanmaken:

   • Maak een nieuwe User Interface scene

   • Hernoem de root node naar UI

   • Sla op als scenes/UI.tscn

   • Zet Mouse > Filter op Ignore

2. Container toevoegen:

   • Voeg een HBoxContainer child node toe aan UI

   • In de Inspector, klik Layout → Anchors Preset → Top Left

   • Zet Position: X: 20, Y: 20

   • Zet Theme Overrides > Constants > Separation: 10

3. Left Arrow Button:

   • Voeg een TextureButton child toe aan HBoxContainer

   • Hernoem naar LeftButton

   • Texture Normal: sprites/arrow_decorative_w.png

   • Custom Min Size: 32, 32

   • Zet Layout > Container Sizing > Vertical op Shrink Vertical

4. Preview Texture:

   • Voeg een TextureRect child toe aan HBoxContainer

   • Hernoem naar PreviewTexture

   • Texture: sprites/icon_outline_square.png (placeholder)

   • Custom Min Size: 64, 64

   • Expand Mode: Ignore Size

   • Stretch Mode: Keep Aspect Centered

5. Right Arrow Button:

   • Voeg een TextureButton child toe aan HBoxContainer

   • Hernoem naar RightButton

   • Texture Normal: sprites/arrow_decorative_e.png

   • Custom Min Size: 32, 32

   • Zet Layout > Container Sizing > Vertical op Shrink Vertical

6. Sla de scene op!

BuildingSelector script implementeren

Maak het script en implementeer de building selectie logica.

Nieuwe Godot-specifieke elementen:

• Control - Base class voor alle UI elementen

• TextureRect - UI node om een texture te tonen

• TextureButton - Klikbare button met texture

• MeshLibrary.GetItemPreview() - Haalt preview texture op van een MeshLibrary item

1. Maak een nieuw script:

   • Klik rechtermuisknop op scripts/ folder

   • Create New → Script...

   • Language: C#, Inherits: Control, Class Name: BuildingSelector

   • Path: scripts/BuildingSelector.cs

   • Klik Create

2. Definieer de class en voeg UI exports toe:

using Godot;

public partial class BuildingSelector : Control
{
    // UI References
    [Export] public TextureRect PreviewTexture { get; set; }
    [Export] public TextureButton LeftButton { get; set; }
    [Export] public TextureButton RightButton { get; set; }
}

1. Voeg system exports toe. Deze geven toegang tot BuildingPlacer en GridMap.

public partial class BuildingSelector : Control
{
    // UI References
    [Export] public TextureRect PreviewTexture { get; set; }
    [Export] public TextureButton LeftButton { get; set; }
    [Export] public TextureButton RightButton { get; set; }

    // System References
    [Export] public BuildingPlacer BuildingPlacer { get; set; }
    [Export] public GridMap GridMap { get; set; }
}

1. Voeg private fields toe voor state. De array slaat 5 building preview textures op.

    [Export] public GridMap GridMap { get; set; }

    // State
    private Texture2D[] _buildingTextures = new Texture2D[5]; // 5 building types
    private int _currentBuildingIndex = 0;
}

1. Sla het script op!

Texture extraction implementeren

Haal de preview textures op uit de MeshLibrary.

1. Voeg een lege ExtractBuildingTextures() method toe:

    private int _currentBuildingIndex = 0;

    private void ExtractBuildingTextures()
    {
    }
}

1. Haal de MeshLibrary op. Dit is de bron van alle preview textures.

    private void ExtractBuildingTextures()
    {
        var meshLibrary = GridMap.MeshLibrary;
    }

1. Haal alle 5 building previews op. Elk building type heeft ID 0-4 in de MeshLibrary.

    private void ExtractBuildingTextures()
    {
        var meshLibrary = GridMap.MeshLibrary;

        _buildingTextures[0] = meshLibrary.GetItemPreview(0);
        _buildingTextures[1] = meshLibrary.GetItemPreview(1);
        _buildingTextures[2] = meshLibrary.GetItemPreview(2);
        _buildingTextures[3] = meshLibrary.GetItemPreview(3);
        _buildingTextures[4] = meshLibrary.GetItemPreview(4);
    }

Preview textures:

• GetItemPreview() genereert automatisch een texture van het 3D model

• Geen handmatige screenshots nodig!

• Elk building type wordt visueel weergegeven in de UI

1. Sla het script op!

Building selectie logica

Implementeer cycling tussen building types met arrow buttons.

1. Voeg een lege ChangeBuilding() method toe:

    }

    private void ChangeBuilding(int direction)
    {
    }
}

1. Update de building index. Tel direction bij de huidige index (1 voor rechts, -1 voor links).

    private void ChangeBuilding(int direction)
    {
        _currentBuildingIndex += direction;
    }

1. Voeg wraparound toe met modulo. Dit zorgt ervoor dat je van building 4 naar 0 gaat (en vice versa).

    private void ChangeBuilding(int direction)
    {
        _currentBuildingIndex += direction;
        // Modulo voor infinite looping (wraparound)
        _currentBuildingIndex = (_currentBuildingIndex + _buildingTextures.Length) % _buildingTextures.Length;
    }

Modulo wraparound:

• + _buildingTextures.Length voorkomt negatieve getallen

• % _buildingTextures.Length beperkt de waarde tot 0-4

• Voorbeeld: index 5 wordt 0, index -1 wordt 4

1. Update het geselecteerde building ID in BuildingPlacer:

    private void ChangeBuilding(int direction)
    {
        _currentBuildingIndex += direction;
        _currentBuildingIndex = (_currentBuildingIndex + _buildingTextures.Length) % _buildingTextures.Length;

        BuildingPlacer.SelectedBuildingId = _currentBuildingIndex;
    }

1. Update de preview texture in de UI:

    private void ChangeBuilding(int direction)
    {
        _currentBuildingIndex += direction;
        _currentBuildingIndex = (_currentBuildingIndex + _buildingTextures.Length) % _buildingTextures.Length;

        BuildingPlacer.SelectedBuildingId = _currentBuildingIndex;
        PreviewTexture.Texture = _buildingTextures[_currentBuildingIndex];
    }

1. Sla het script op!

Initialisatie en input handling

Koppel button signals en centraliseer input handling.

Nieuwe Godot-specifieke elementen:

• _UnhandledInput() - Ontvangt input events die niet door UI zijn afgehandeld

1. Voeg een lege _Ready() method toe:

    private int _currentBuildingIndex = 0;

    public override void _Ready()
    {
    }

    private void ExtractBuildingTextures()

1. Roep ExtractBuildingTextures() aan om alle textures te laden:

    public override void _Ready()
    {
        ExtractBuildingTextures();
    }

1. Koppel button signals met lambda expressies. Wanneer een button wordt geklikt, roep ChangeBuilding() aan.

    public override void _Ready()
    {
        ExtractBuildingTextures();

        // Lambda expressies voor knop signalen
        LeftButton.Pressed += () => ChangeBuilding(-1);
        RightButton.Pressed += () => ChangeBuilding(1);
    }

Lambda expressies:

• () => ChangeBuilding(-1) is een inline function

• Roept ChangeBuilding aan met parameter -1 (links) of 1 (rechts)

• Kortere syntax dan aparte methods maken

1. Initialiseer de UI met het eerste building (index 0):

    public override void _Ready()
    {
        ExtractBuildingTextures();

        LeftButton.Pressed += () => ChangeBuilding(-1);
        RightButton.Pressed += () => ChangeBuilding(1);

        ChangeBuilding(0); // Initialize met eerste building
    }

1. Sla het script op!

1. Voeg een lege _UnhandledInput() method toe onderaan de class:

    }

    public override void _UnhandledInput(InputEvent @event)
    {
    }
}

Waarom _UnhandledInput()?

• Ontvangt input die niet door UI elements is afgehandeld

• Button clicks worden door de UI afgehandeld

• Mouse clicks in de game world komen hier aan

1. Voeg build input handling toe. Check of de "build" action is gedrukt.

    public override void _UnhandledInput(InputEvent @event)
    {
        if (@event.IsActionPressed("build"))
        {
        }
    }

1. Check of er gebouwd kan worden voordat je bouwt:

    public override void _UnhandledInput(InputEvent @event)
    {
        if (@event.IsActionPressed("build"))
        {
            if (BuildingPlacer.CanBuild())
            {
            }
        }
    }

1. Roep de Build() method aan:

    public override void _UnhandledInput(InputEvent @event)
    {
        if (@event.IsActionPressed("build"))
        {
            if (BuildingPlacer.CanBuild())
            {
                BuildingPlacer.Build();
            }
        }
    }

Input flow:

• User klikt linkermuisknop in game world (niet op UI)

• "build" action wordt triggered

• CanBuild() checkt of placement geldig is

• Build() plaatst het geselecteerde building

1. Sla het script op!

BuildingPlacer input verwijderen

Verwijder de oude input handling uit BuildingPlacer.

Open scripts/BuildingPlacer.cs en verwijder de _Input() method:

VERWIJDER DEZE METHOD:

public override void _Input(InputEvent @event)
{
    if (@event.IsActionPressed("build"))
    {
        if (CanBuild())
        {
            Build();
        }
    }
}

Waarom verwijderen?

• BuildingSelector handelt nu alle input af

• Geen duplicate input handling meer!

• Centraal punt voor alle UI-gerelateerde input

Sla het script op!

UI koppelen en testen

Integreer de UI in de main scene en test het systeem.

1. Open scenes/UI.tscn

2. Selecteer de UI root node

3. In de Inspector, koppel het BuildingSelector.cs script

4. Configureer de UI exports:

   • PreviewTexture: Sleep de PreviewTexture node

   • LeftButton: Sleep de LeftButton node

   • RightButton: Sleep de RightButton node

5. Sla de scene op!

1. Open scenes/main.tscn

2. Klik rechtermuisknop op de Main root node

3. Selecteer Instantiate Child Scene...

4. Kies scenes/UI.tscn

5. Selecteer de UI node in de scene tree

6. Configureer de system exports in de Inspector:

   • BuildingPlacer: Sleep de BuildingPlacer node

   • GridMap: Sleep de GridMap node

7. Sla de scene op!

Druk F5 om het spel te runnen.

Test building selectie:

1. Klik op de rechter arrow → preview verandert naar building 1

2. Klik meerdere keren rechts → cycle door alle 5 buildings

3. Bij building 4, klik rechts → wrapt naar building 0

4. Klik links → cycle terug

Test building placement:

1. Selecteer een building met de arrows

2. Klik linkermuisknop op grass naast een road → building verschijnt

3. Selecteer een ander building

4. Plaats het → nieuw building type verschijnt

Wat moet werken:

• Arrow buttons cyclen door alle 5 buildings

• Preview texture update bij elke selectie

• Linkermuisklik plaatst het geselecteerde building

• Buildings draaien correct naar de road

Werkt alles? Sluit het spel (F8)

Veelgemaakte fouten

• Preview textures zijn null: Controleer of de GridMap export correct is ingesteld en een MeshLibrary heeft.

• Buttons reageren niet: Controleer of de button signals zijn gekoppeld in _Ready().

• Input werkt niet: Zorg dat je _UnhandledInput() gebruikt, niet _Input(). UI elements consumeren input in _Input().

• Buildings worden niet geplaatst: Controleer of de BuildingPlacer export correct is ingesteld in de UI node.

• Wraparound werkt niet: Check of je + _buildingTextures.Length gebruikt in de modulo berekening (voorkomt negatieve getallen).

Volledig script

Klik hier voor het volledige BuildingSelector.cs script

using Godot;

public partial class BuildingSelector : Control
{
    // UI References
    [Export] public TextureRect PreviewTexture { get; set; }
    [Export] public TextureButton LeftButton { get; set; }
    [Export] public TextureButton RightButton { get; set; }

    // System References
    [Export] public BuildingPlacer BuildingPlacer { get; set; }
    [Export] public GridMap GridMap { get; set; }

    // State
    private Texture2D[] _buildingTextures = new Texture2D[5];
    private int _currentBuildingIndex = 0;

    public override void _Ready()
    {
        ExtractBuildingTextures();

        LeftButton.Pressed += () => ChangeBuilding(-1);
        RightButton.Pressed += () => ChangeBuilding(1);

        ChangeBuilding(0);
    }

    public override void _UnhandledInput(InputEvent @event)
    {
        if (@event.IsActionPressed("build"))
        {
            if (BuildingPlacer.CanBuild())
            {
                BuildingPlacer.Build();
            }
        }
    }

    private void ExtractBuildingTextures()
    {
        var meshLibrary = GridMap.MeshLibrary;

        _buildingTextures[0] = meshLibrary.GetItemPreview(0);
        _buildingTextures[1] = meshLibrary.GetItemPreview(1);
        _buildingTextures[2] = meshLibrary.GetItemPreview(2);
        _buildingTextures[3] = meshLibrary.GetItemPreview(3);
        _buildingTextures[4] = meshLibrary.GetItemPreview(4);
    }

    private void ChangeBuilding(int direction)
    {
        _currentBuildingIndex += direction;
        _currentBuildingIndex = (_currentBuildingIndex + _buildingTextures.Length) % _buildingTextures.Length;

        BuildingPlacer.SelectedBuildingId = _currentBuildingIndex;
        PreviewTexture.Texture = _buildingTextures[_currentBuildingIndex];
    }
}