4. GridMap Raycasting

Maak een raycasting system om muis positie naar grid cells te converteren

Overzicht

In dit hoofdstuk leer je:

• GridMapRaycaster utility class maken

• Mouse position converteren naar 3D ray

• Ray-ground plane intersection berekenen

• World position naar grid cell converteren

• GetCellUnderMouse() helper method implementeren

Wat is raycasting?

Raycasting projecteert een onzichtbare straal (ray) vanuit de camera door de muis cursor naar de 3D wereld. Door te berekenen waar deze ray objecten raakt, kan je bepalen waar de speler klikt.

Gebruik in city builders:

• Bepaal welke grid cell onder de cursor is

• Valideer of een positie geldig is voor placement

• Highlight cellen waar de muis over zweeft

Dit is de basis voor alle click-to-place building mechanics!

GridMapRaycaster Setup

Zet de node en het script op voor raycasting functionaliteit.

1. Node aanmaken:

   • Open scenes/main.tscn

   • Selecteer de Main root node

   • Voeg een Node3D child node toe en noem deze GridMapRaycaster

2. Voeg een script toe aan de nieuwe GridMapRaycaster Node:

   • Class Name: GridMapRaycaster

   • Inherits: Node3D

   • Klik Create

3. Exports toevoegen: Open het script en voeg referenties toe naar de Camera en GridMap:

using Godot;

public partial class GridMapRaycaster : Node3D
{
    [Export] public Camera3D Camera { get; set; }
    [Export] public GridMap GridMap { get; set; }
}

Ray-Plane Intersection

Bereken het punt waar de ray van de camera kruist met de grond (Y = 0). Dit is de muisklikpositie.

Nieuwe wiskundige concepten:

• Ray-Plane intersection - Bereken waar een lijnstuk een plat vlak snijdt

• Nullable types - Vector3? kan null zijn wanneer er geen intersectie is

1. Voeg een lege RayHitsGround helper method toe aan je script:

public partial class GridMapRaycaster : Node3D
{
    [Export] public Camera3D Camera { get; set; }
    [Export] public GridMap GridMap { get; set; }

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
    }
}

1. Definieer het grondvlak en bereken de afstand t. De grond ligt op Y=0. Los de vergelijking op: 0 = origin.Y + direction.Y * t.

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
        float groundY = 0.0f;
        float t = (groundY - origin.Y) / direction.Y;
    }

1. Check of de ray naar beneden wijst. Als t negatief is, wijst de ray omhoog en raakt deze de grond nooit. Return null in dat geval.

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
        float groundY = 0.0f;
        float t = (groundY - origin.Y) / direction.Y;

        if (t < 0)
            return null;
    }

1. Bereken het exacte raakpunt. Gebruik de parametrische vergelijking P = origin + direction * t.

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
        float groundY = 0.0f;
        float t = (groundY - origin.Y) / direction.Y;

        if (t < 0)
            return null;

        return origin + direction * t;
    }

Muis coordinaten omzetten naar Grid coordinaten

Converteer de muispositie naar een grid coördinaat in vier stappen: muis → ray → world → grid.

Nieuwe Godot-specifieke elementen:

• GetViewport().GetMousePosition() - Geeft de huidige 2D muispositie op het scherm

• ProjectRayOrigin() - Berekent het startpunt van de ray vanuit de camera

• ProjectRayNormal() - Geeft de genormaliseerde richting van de ray

• GridMap.LocalToMap() - Converteert een local 3D positie naar grid coördinaten

• GridMap.ToLocal() - Converteert world space naar GridMap local space

1. Voeg een lege GetCellUnderMouse method toe:

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
        float groundY = 0.0f;
        float t = (groundY - origin.Y) / direction.Y;

        if (t < 0)
            return null;

        return origin + direction * t;
    }

    public Vector3I? GetCellUnderMouse()
    {
    }
}

1. Haal de 2D muispositie op het scherm op:

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();
    }

1. Maak een 3D ray vanuit de camera door de muispositie. ProjectRayOrigin() geeft het startpunt, ProjectRayNormal() de richting.

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();

        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);
    }

1. Check waar de ray de grond raakt met de helper method. Return null als de ray niet de grond raakt.

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();

        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);

        Vector3? hitPos = RayHitsGround(rayOrigin, rayDirection);
        if (hitPos == null)
            return null;
    }

1. Converteer de world position naar een grid coördinaat. ToLocal() converteert naar GridMap space, LocalToMap() naar grid indices.

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();

        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);

        Vector3? hitPos = RayHitsGround(rayOrigin, rayDirection);
        if (hitPos == null)
            return null;

        Vector3I cell = GridMap.LocalToMap(GridMap.ToLocal(hitPos.Value));
    }

1. Forceer Y naar 0 en return het grid coördinaat. Gebouwen plaatsen alleen op de begane grond, niet op verschillende hoogtes.

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();

        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);

        Vector3? hitPos = RayHitsGround(rayOrigin, rayDirection);
        if (hitPos == null)
            return null;

        Vector3I cell = GridMap.LocalToMap(GridMap.ToLocal(hitPos.Value));
        return new Vector3I(cell.X, 0, cell.Z);
    }

1. Voeg een lege GetTileUnderMouse helper method toe:

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();

        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);

        Vector3? hitPos = RayHitsGround(rayOrigin, rayDirection);
        if (hitPos == null)
            return null;

        Vector3I cell = GridMap.LocalToMap(GridMap.ToLocal(hitPos.Value));
        return new Vector3I(cell.X, 0, cell.Z);
    }

    public int GetTileUnderMouse()
    {
    }
}

1. Gebruik GetCellUnderMouse() om de cell te verkrijgen. Return -1 als er geen cell onder de muis is.

    public int GetTileUnderMouse()
    {
        Vector3I? cell = GetCellUnderMouse();
        if (cell == null)
            return -1;
    }

1. Return de tile ID op die positie. GetCellItem() geeft de MeshLibrary index, of -1 als de cell leeg is.

    public int GetTileUnderMouse()
    {
        Vector3I? cell = GetCellUnderMouse();
        if (cell == null)
            return -1;

        return GridMap.GetCellItem(cell.Value);
    }

Configuratie en Testen

Koppel alles aan elkaar in de editor en test of het werkt.

1. Script koppelen:

   • Selecteer de GridMapRaycaster node in main.tscn

   • Sleep scripts/GridMapRaycaster.cs naar het Script veld

2. Exports instellen:

   • Sleep de Camera node naar de Camera property

   • Sleep de GridMap node naar de GridMap property

3. Testen (Tijdelijk): Voeg deze tijdelijke code toe aan je script om te testen:

public override void _Input(InputEvent @event)
{
    if (@event is InputEventMouseMotion)
    {
        Vector3I? cell = GetCellUnderMouse();
        if (cell != null)
        {
            GD.Print($"Cell: {cell.Value} - Tile: {GetTileUnderMouse()}");
        }
    }
}

• Druk F5 en beweeg je muis over het grid.

• Zie je coördinaten in de Output tab? Dan werkt het!

• Vergeet niet de _Input method weer te verwijderen na het testen.

Volledig script

Klik hier voor het volledige GridMapRaycaster.cs script

using Godot;

public partial class GridMapRaycaster : Node3D
{
    [Export] public Camera3D Camera { get; set; }
    [Export] public GridMap GridMap { get; set; }

    public Vector3I? GetCellUnderMouse()
    {
        Vector2 mousePos = GetViewport().GetMousePosition();
        Vector3 rayOrigin = Camera.ProjectRayOrigin(mousePos);
        Vector3 rayDirection = Camera.ProjectRayNormal(mousePos);

        Vector3? hitPos = RayHitsGround(rayOrigin, rayDirection);
        if (hitPos == null)
            return null;

        Vector3I cell = GridMap.LocalToMap(GridMap.ToLocal(hitPos.Value));
        return new Vector3I(cell.X, 0, cell.Z);
    }

    public int GetTileUnderMouse()
    {
        Vector3I? cell = GetCellUnderMouse();
        if (cell == null)
            return -1;

        return GridMap.GetCellItem(cell.Value);
    }

    private Vector3? RayHitsGround(Vector3 origin, Vector3 direction)
    {
        float groundY = 0.0f;
        float t = (groundY - origin.Y) / direction.Y;

        if (t < 0)
            return null;

        return origin + direction * t;
    }
}