3. Isometric Camera

Bouw een isometric camera met WASD movement, zoom en rotation

Overzicht

In dit hoofdstuk leer je:

• Camera3D node toevoegen en configureren als orthographic isometric camera

• IsometricCamera.cs script maken

• WASD movement met rotation-aware directional input

• Mouse wheel zoom (in/out)

• Middle-mouse button rotation rond pivot point

Wat is een isometric camera?

Een isometric camera combineert:

• Orthographic projection: Geen perspectief - objecten blijven dezelfde grootte ongeacht afstand (perfect voor strategy games)

• Isometric angle: 45° rotatie horizontaal + gekanteld kijkpunt (klassieke city builder look)

Camera Setup

Voeg de camera toe aan de scene, configureer deze voor isometric view, en maak het script.

1. Node toevoegen:

   • Open scenes/main.tscn.

   • Voeg een Camera3D child toe aan Main en noem deze Camera.

2. Configuratie (Inspector):

   • Projection: Zet op Orthographic.

   • Size: Zet op 10 (bepaalt zoom level).

   • Transform → Rotation: Zet X op -45, Y op 45, Z op 0.

   • Position: Verplaats de camera wat omhoog met de move tool zodat je de stad ziet.

3. Script maken:

   • Maak een nieuw script scripts/IsometricCamera.cs dat erft van Camera3D.

   • Koppel het script aan de Camera node.

Camerabeweging Implementeren

Implementeer WASD-beweging die rekening houdt met de rotatie van de camera (zodat 'W' altijd 'naar voren' op het scherm is).

Nieuwe Godot-specifieke elementen:

• [Export] - Maakt de variabele zichtbaar in de Inspector

• RotationDegrees - De rotatie in graden (handiger dan radialen)

• Input.GetAxis() - Geeft een waarde tussen -1 en 1 op basis van twee tegengestelde acties

• Mathf.DegToRad() - Converteert graden naar radialen voor trigonometrische berekeningen

1. Open scripts/IsometricCamera.cs

2. voeg 2 export velden toe voor:

   • bewegingssnelheid

   • camera-hoek.

using Godot;

public partial class IsometricCamera : Camera3D
{
    [Export] public float MoveSpeed { get; set; } = 10.0f;
    [Export] public float IsometricAngle { get; set; } = 45.0f;
}

1. Voeg een private field toe voor de horizontale rotatie (yaw). Deze yaw-hoek slaat de horizontale draaiing op en kan later aangepast worden bij rotatie.

public partial class IsometricCamera : Camera3D
{
    [Export] public float MoveSpeed { get; set; } = 10.0f;
    [Export] public float IsometricAngle { get; set; } = 45.0f;

    private float _yaw = 45.0f;
}

1. Voeg de _Ready() method toe om de initiële camera-hoek in te stellen. RotationDegrees stelt de camera-hoek in. X controleert de kijkhoek naar beneden (-45°), Y de horizontale draaiing (45°).

public partial class IsometricCamera : Camera3D
{
    [Export] public float MoveSpeed { get; set; } = 10.0f;
    [Export] public float IsometricAngle { get; set; } = 45.0f;

    private float _yaw = 45.0f;

    public override void _Ready()
    {
        // Zet initiële rotatie: X=kijkhoek, Y=horizontale draaiing
        RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);
    }
}

1. Voeg een lege _Process() method toe:

    public override void _Ready()
    {
        RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);
    }

    public override void _Process(double delta)
    {
    }

1. Bereken de forward en right vectors op basis van de yaw-hoek. Deze vectors geven de richtingen aan waarin de camera moet bewegen op basis van haar huidige rotatie. Zo blijft 'W' altijd 'vooruit' ten opzichte van de camera.

    public override void _Process(double delta)
    {
        // Bereken forward en right vectors op basis van de yaw
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));
    }

1. Maak een bewegingsrichting variabele. Begin met een nul-vector en bouw de bewegingsrichting stap voor stap op.

    public override void _Process(double delta)
    {
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));

        Vector3 moveDir = Vector3.Zero;
    }

1. Voeg input voor vooruit/achteruit beweging toe. Input.GetAxis() geeft -1 (achteruit), 0 (niets), of 1 (vooruit). Vermenigvuldig met de forward vector voor beweging in de juiste richting.

    public override void _Process(double delta)
    {
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));

        Vector3 moveDir = Vector3.Zero;
        moveDir += Input.GetAxis("camera_back", "camera_forward") * forward;
    }

1. Voeg input voor links/rechts beweging toe:

    public override void _Process(double delta)
    {
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));

        Vector3 moveDir = Vector3.Zero;
        moveDir += Input.GetAxis("camera_back", "camera_forward") * forward;
        moveDir += Input.GetAxis("camera_left", "camera_right") * right;
    }

1. Pas de camera positie aan op basis van de bewegingsrichting. Normalized() zorgt ervoor dat diagonale beweging niet sneller is. Vermenigvuldig met delta voor frame-rate independent beweging.

    public override void _Process(double delta)
    {
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));

        Vector3 moveDir = Vector3.Zero;
        moveDir += Input.GetAxis("camera_back", "camera_forward") * forward;
        moveDir += Input.GetAxis("camera_left", "camera_right") * right;

        if (moveDir.Length() > 0)
        {
            Position += moveDir.Normalized() * MoveSpeed * (float)delta;
        }
    }

1. Test met F5. Je kunt nu met WASD over de map vliegen!

Zoom en Rotatie Toevoegen

Voeg zoom (muiswiel) en rotatie (rechter muisknop) toe aan de camera.

Nieuwe Godot-specifieke elementen:

• _Input() - Ontvangt alle input events (toetsenbord, muis, etc.)

• InputEvent - Base class voor alle input events

• InputEventMouseButton - Specifiek event voor muisknoppen

• InputEventMouseMotion - Event voor muisbeweging

• Size - Bepaalt de grootte van de orthographic camera (zoom level)

• Mathf.Clamp() - Beperkt een waarde tussen een minimum en maximum

1. Voeg vier nieuwe exports toe bovenaan de class voor zoom en rotatie instellingen. Deze vier nieuwe exports bepalen hoe snel de camera zoomt en roteert, en de minimum/maximum zoom levels.

public partial class IsometricCamera : Camera3D
{
    [Export] public float MoveSpeed { get; set; } = 10.0f;
    [Export] public float IsometricAngle { get; set; } = 45.0f;

    // nieuwe variabelen:
    [Export] public float RotationSpeed { get; set; } = 0.3f;
    [Export] public float ZoomSpeed { get; set; } = 5.0f;
    [Export] public float MinSize { get; set; } = 5.0f;
    [Export] public float MaxSize { get; set; } = 50.0f;

1. Voeg private fields toe voor rotatie tracking. Deze variabelen slaan op of de camera aan het roteren is, de laatste muispositie, en het punt waar de camera omheen draait.

    private float _yaw = 45.0f;

    // nieuwe variabelen:
    private bool _isRotating = false;
    private Vector2 _lastMousePos;
    private Vector3 _pivotPoint;

1. Voeg een lege _Input() method toe:

    public override void _Process(double delta)
    {
        // ... bewegingscode ...
    }

    public override void _Input(InputEvent @event)
    {
    }

1. Voeg zoom in/out logica toe. Voor orthographic cameras betekent een kleinere Size meer ingezoomd. Mathf.Clamp() voorkomt te ver in- of uitzoomen.

    public override void _Input(InputEvent @event)
    {
        // Zoom in met muiswiel omhoog
        if (@event.IsActionPressed("zoom_in"))
            Size = Mathf.Clamp(Size - ZoomSpeed, MinSize, MaxSize);
    }

1. Voeg zoom out logica toe:

    public override void _Input(InputEvent @event)
    {
        // Zoom in met muiswiel omhoog
        if (@event.IsActionPressed("zoom_in"))
            Size = Mathf.Clamp(Size - ZoomSpeed, MinSize, MaxSize);
        // Zoom uit met muiswiel omlaag
        if (@event.IsActionPressed("zoom_out"))
            Size = Mathf.Clamp(Size + ZoomSpeed, MinSize, MaxSize);
    }

1. Voeg rotatie start logica toe. Het is keyword cast het event naar InputEventMouseButton. Bewaar de muispositie en het pivot point (dit wordt later berekend in een helper method).

    public override void _Input(InputEvent @event)
    {
        if (@event.IsActionPressed("zoom_in"))
            Size = Mathf.Clamp(Size - ZoomSpeed, MinSize, MaxSize);
        if (@event.IsActionPressed("zoom_out"))
            Size = Mathf.Clamp(Size + ZoomSpeed, MinSize, MaxSize);

        // Start rotatie met middelste muisknop
        if (@event.IsActionPressed("rotate") && @event is InputEventMouseButton mb)
        {
            _isRotating = true;
            _lastMousePos = mb.Position;
            _pivotPoint = GetGroundPointAtScreenCenter();
        }
    }

1. Voeg rotatie stop logica toe:

        if (@event.IsActionPressed("rotate") && @event is InputEventMouseButton mb)
        {
            _isRotating = true;
            _lastMousePos = mb.Position;
            _pivotPoint = GetGroundPointAtScreenCenter();
        }
        if (@event.IsActionReleased("rotate"))
        {
            _isRotating = false;
        }
    }

1. Voeg rotatie beweging toe. Check of de muis beweegt terwijl de camera roteert. Het && zorgt ervoor dat alleen geroteerd wordt als de middelste muisknop ingedrukt is.

        if (@event.IsActionReleased("rotate"))
        {
            _isRotating = false;
        }

        // Roteer tijdens muisbeweging
        if (@event is InputEventMouseMotion motion && _isRotating)
        {
        }
    }

1. Bereken hoeveel graden de camera moet roteren. deltaX is het verschil in pixels. Vermenigvuldig met RotationSpeed voor een controleerbare rotatie. Update _lastMousePos voor de volgende frame.

        if (@event is InputEventMouseMotion motion && _isRotating)
        {
            float deltaX = motion.Position.X - _lastMousePos.X;
            _lastMousePos = motion.Position;
            float angleChange = deltaX * RotationSpeed;
        }

1. Pas de yaw aan en update de camera rotatie:

        if (@event is InputEventMouseMotion motion && _isRotating)
        {
            float deltaX = motion.Position.X - _lastMousePos.X;
            _lastMousePos = motion.Position;
            float angleChange = deltaX * RotationSpeed;

            _yaw += angleChange;
            RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);
        }

1. Laat de camera rond het pivot point roteren (orbit). Bereken de afstand van de camera tot het pivot point (offset), roteer deze afstand, en plaats de camera op de nieuwe positie. Dit zorgt voor een orbit-effect.

        if (@event is InputEventMouseMotion motion && _isRotating)
        {
            float deltaX = motion.Position.X - _lastMousePos.X;
            _lastMousePos = motion.Position;
            float angleChange = deltaX * RotationSpeed;

            _yaw += angleChange;
            RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);

            // Bereken nieuwe camera positie rond pivot point
            Vector3 offset = Position - _pivotPoint;
            Transform3D rotation = Transform3D.Identity.RotatedLocal(Vector3.Up, Mathf.DegToRad(angleChange));
            Position = _pivotPoint + (rotation.Basis * offset);
        }

1. Voeg de helper method toe om het grondpunt te vinden waar de camera omheen draait. Plaats dit na de _Input() method. Deze method berekent waar het midden van het scherm het grondvlak (Y=0) raakt. Dit wordt het pivot point voor rotatie.

    }

    private Vector3 GetGroundPointAtScreenCenter()
    {
        Vector2 screenCenter = GetViewport().GetVisibleRect().Size / 2;
        Vector3 rayOrigin = ProjectRayOrigin(screenCenter);
        Vector3 rayDir = ProjectRayNormal(screenCenter);

        // Ray-Plane intersection met Y=0
        float t = -rayOrigin.Y / rayDir.Y;
        return rayOrigin + rayDir * t;
    }
}

1. Test met F5. Probeer de zoom (muiswiel) en rotatie (middelste muisknop + slepen)!

Test je stad met de camera controls

Nu je een werkende camera hebt, kan je je city uit Chapter 2 verkennen!

1. Druk F5 om het spel te runnen

2. Gebruik alle camera controls:

   • WASD - Beweeg de camera over je city

   • Mouse Wheel - Zoom in/out

   • Middle Mouse + drag - Roteer rond een punt

3. Bekijk je handgebouwde GridMap city vanuit verschillende hoeken!

Je hebt nu een professionele isometric camera zoals in echte city builder games!

Volledig script

Klik hier voor het volledige IsometricCamera.cs script

using Godot;

public partial class IsometricCamera : Camera3D
{
    [Export] public float MoveSpeed { get; set; } = 10.0f;
    [Export] public float IsometricAngle { get; set; } = 45.0f;
    [Export] public float RotationSpeed { get; set; } = 0.3f;
    [Export] public float ZoomSpeed { get; set; } = 5.0f;
    [Export] public float MinSize { get; set; } = 5.0f;
    [Export] public float MaxSize { get; set; } = 50.0f;

    private float _yaw = 45.0f;
    private bool _isRotating = false;
    private Vector2 _lastMousePos;
    private Vector3 _pivotPoint;

    public override void _Ready()
    {
        RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);
    }

    public override void _Process(double delta)
    {
        float yawRad = Mathf.DegToRad(_yaw);
        Vector3 forward = new Vector3(-Mathf.Sin(yawRad), 0, -Mathf.Cos(yawRad));
        Vector3 right = new Vector3(Mathf.Cos(yawRad), 0, -Mathf.Sin(yawRad));

        Vector3 moveDir = Vector3.Zero;
        moveDir += Input.GetAxis("camera_back", "camera_forward") * forward;
        moveDir += Input.GetAxis("camera_left", "camera_right") * right;

        if (moveDir.Length() > 0)
        {
            Position += moveDir.Normalized() * MoveSpeed * (float)delta;
        }
    }

    public override void _Input(InputEvent @event)
    {
        if (@event.IsActionPressed("zoom_in"))
        {
            Size = Mathf.Clamp(Size - ZoomSpeed, MinSize, MaxSize);
        }
        if (@event.IsActionPressed("zoom_out"))
        {
            Size = Mathf.Clamp(Size + ZoomSpeed, MinSize, MaxSize);
        }

        if (@event.IsActionPressed("rotate") && @event is InputEventMouseButton mb)
        {
            _isRotating = true;
            _lastMousePos = mb.Position;
            _pivotPoint = GetGroundPointAtScreenCenter();
        }
        if (@event.IsActionReleased("rotate"))
        {
            _isRotating = false;
        }

        if (@event is InputEventMouseMotion motion && _isRotating)
        {
            float deltaX = motion.Position.X - _lastMousePos.X;
            _lastMousePos = motion.Position;
            float angleChange = deltaX * RotationSpeed;

            _yaw += angleChange;
            RotationDegrees = new Vector3(-IsometricAngle, _yaw, 0.0f);

            Vector3 offset = Position - _pivotPoint;
            Transform3D rotation = Transform3D.Identity.RotatedLocal(Vector3.Up, Mathf.DegToRad(angleChange));
            Vector3 rotatedOffset = rotation.Basis * offset;
            Position = _pivotPoint + rotatedOffset;
        }
    }

    private Vector3 GetGroundPointAtScreenCenter()
    {
        Vector2 screenCenter = GetViewport().GetVisibleRect().Size / 2;
        Vector3 rayOrigin = ProjectRayOrigin(screenCenter);
        Vector3 rayDir = ProjectRayNormal(screenCenter);
        float t = -rayOrigin.Y / rayDir.Y;
        return rayOrigin + rayDir * t;
    }
}