2. First-Person Camera

Implementeer mouse look en first-person camera beweging

Overzicht

In dit hoofdstuk implementeer je een first-person camera systeem met mouse look. Je leert hoe je mouse input verwerkt, camera rotatie beperkt, en de cursor captured voor FPS gameplay.

Input actions

Ga aan de slag met het bewegen en rondkijken van de speler. Daarvoor moet je eerst bepalen welke toetsen de speler hiervoor zal gebruiken. Zoals in de meeste andere games, gebruik je de WASD-toetsen.

1. Ga in Godot naar Project > Project Settings

2. Klik op het Input Map tabblad bovenaan

3. Bij Add New Action, typ move_forward en druk Enter

4. Klik op het + icoon naast "move_forward"

5. Druk op de W toets, klik OK

6. Herhaal voor de andere acties:

   • move_backward - toets S

   • move_left - toets A

   • move_right - toets D

7. Voeg eventueel ook de pijltjes toetsen toe, door een tweede toets aan elke actie toe te voegen

8. Sluit de Project Settings

Player scene setup

1. Ga in de menu naar Scene > New Scene

2. Kies voor 3D Scene

3. Rechts-klik op de Root node en klik op "Change Type"

4. Zoek naar CharacterBody3D en selecteer

5. Geef de root node de naam Player

6. Voeg een camera en CollisionShape toe aan de Player

   • rechts-klik > Add child: Camera3D

   • rechts-klik > Add child: CollisionShape3D

     • Shape: New CapsuleShape3D

7. Klik in de inspector op de CapsuleShape3D in de Shape property

8. Verander de Height (2) en Radius (0.5)

9. Ga naar de Transform property (onder Node3D) en verander de Y-position naar 1.0

10. Selecteer de Camera3D, en verplaats deze naar Position Y: 1.6 (ooghoogte)

11. Sla de scene op als res://objects/Player.tscn

Scene hierarchy:

Player (CharacterBody3D)
├── Camera3D
└── CollisionShape3D

PlayerController Script (Template)

Godot heeft handige script templates met basis functionaliteit. Gebruik de CharacterBody3D movement template als startpunt.

1. Selecteer de Player node

2. Klik op Attach Script (het 📜 icoontje met een +, bovenaan het Scene Hierarchy venster)

   • Language: C#

   • Template: CharacterBody3D: Basic Movement

   • Class Name: PlayerController

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

3. klik op Create

Het script opent automatisch in VS Code. De template bevat al heel wat code:

• Speed en JumpVelocity constanten voor beweging

• _PhysicsProcess() method die elke physics frame wordt aangeroepen

• Gravity implementatie met GetGravity() en IsOnFloor()

• Jump detectie met Input.IsActionJustPressed()

• Movement met Input.GetVector() voor 4-richtingen input

• MoveAndSlide() voor collision-aware movement

De template geeft al veel functionaliteit, maar pas het aan voor een first-person game.

Template input actions aanpassen

De template gebruikt momenteel Godot's built-in UI input actions zoals ui_left, ui_right, ui_up, en ui_down. Deze zijn handig voor snelle prototypes, maar voor een FPS game wil je je eigen WASD-controls gebruiken die we eerder hebben aangemaakt.

1. Zoek in _PhysicsProcess() naar de regel met Input.GetVector:

Vector2 inputDir = Input.GetVector("ui_left", "ui_right", "ui_up", "ui_down");

1. Vervang deze met onze eigen input actions:

Vector2 inputDir = Input.GetVector("move_left", "move_right", "move_forward", "move_backward");

Variabelen aanpasbaar maken

De template gebruikt const voor Speed en JumpVelocity. Dit zorgt er onder andere voor dat je de code moet aanpassen telkens je de snelheid wilt veranderen. Met [Export] maak je variabelen zichtbaar in de Inspector - dit is veel handiger voor testen en tweaken, maar daarvoor mogen de variabelen niet langer const zijn.

1. Zoek bovenaan in je script naar de variabelen Speed en JumpVelocity.

   1. Verwijder het const-keyword (dit heb je niet meer nodig)

   2. Maak ze private (dit is ineens een goeie clean-code practice)

   3. Wijzig hun naam naar _speed en _jumpVelocity. Zorg dat je de naam overal in het script verandert! TIP: door met je cursor op de variabele naam te gaan staan en op F2 te drukken, kan je de naam ineens wijzigen in héél het document.

using Godot;
using System;

public partial class PlayerController : CharacterBody3D
{
    [Export] private float _speed = 5.0f;
    [Export] private float _jumpVelocity = 4.5f;

    // ... rest van de code
}

Camera referentie

Om de camera te kunnen bewegen, heb je een referentie naar de camera nodig. Zo kunnen we met code precies bepalen waar de camera zich bevindt en naar kijkt.

1. Voeg een nieuwe Camera3D variabele toe

public partial class PlayerController : CharacterBody3D
{
    [Export] private Camera3D _camera;

    [Export] private float _speed = 5.0f;
    [Export] private float _jumpVelocity = 4.5f;

    // ... rest van de code
}

1. Ga terug naar de Godot Editor, selecteer de Player, en sleep de camera naar het camera veld in de inspector.

Muis beweging

Zet beweging met de muis om naar camera of speler rotatie. In een FPS game werkt dit in twee assen:

• Horizontaal (links/rechts) - Draai de hele speler (Y-axis rotatie)

• Verticaal (boven/onder) - Draai alleen de camera (X-axis rotatie)

1. Voeg een private float variabele toe waarmee de gevoeligheid van de muis kan worden geregeld.

public partial class PlayerController : CharacterBody3D
{
    [Export] private float _mouseSensitivity = 0.003f;

    [Export] private Camera3D _camera;

    [Export] private float _speed = 5.0f;
    [Export] private float _jumpVelocity = 4.5f;

    // ... rest van de code
}

1. Voeg de _Input() method toe onderaan de klasse.

public partial class PlayerController : CharacterBody3D
{
    // ... rest van de code

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

1. In de _Input()-methode, wil je weten of the @event parameter van het type InputEventMouseMotion is. Met behulp van de is operator kan je het type van het event nakijken. We kunnen het daarmee ook meteen casten naar een nieuwe variable mouseMotion als dat zo is.

public partial class PlayerController : CharacterBody3D
{
    // ... rest van de code

    public override void _Input(InputEvent @event)
    {
        // Check of dit een mouse motion event is
        if (@event is InputEventMouseMotion mouseMotion)
        {
            // Mouse look code komt hier
        }
    }
}

1. Als @event inderdaad een muisbeweging is, zet je die om naar een horizontale rotatie met RotateY().

public partial class PlayerController : CharacterBody3D
{
    // ... rest van de code

    public override void _Input(InputEvent @event)
    {
        if (@event is InputEventMouseMotion mouseMotion)
        {
            // Horizontal rotation: roteer de HELE speler (Y-axis)
            this.RotateY(-mouseMotion.Relative.X * _mouseSensitivity);
        }
    }
}

1. Op diezelfde manier kan je die muisbeweging ook omzetten naar een verticale rotatie met RotateX(). Voor omhoog/omlaag kijken draaien we alleen de camera.

public partial class PlayerController : CharacterBody3D
{
    // ... rest van de code

    public override void _Input(InputEvent @event)
    {
        if (@event is InputEventMouseMotion mouseMotion)
        {
            // Horizontal rotation: roteer de HELE speler (Y-axis)
            this.RotateY(-mouseMotion.Relative.X * _mouseSensitivity);

            // Vertical rotation: roteer alleen de CAMERA (X-axis)
            _camera.RotateX(-mouseMotion.Relative.Y * _mouseSensitivity);
        }
    }
}

1. Ook belangrijk: In een FPS beperk je best de verticale rotatie, anders kan je blijven draaien en ondersteboven kijken. Met behulp van de Mathf.Clamp() functie kunnen we vastleggen dat die waarde niet groter of kleiner mag zijn dan een bepaalde waarde.

if (@event is InputEventMouseMotion mouseMotion)
{
    // Horizontal rotation: roteer de HELE speler (Y-axis)
    this.RotateY(-mouseMotion.Relative.X * _mouseSensitivity);

    // Vertical rotation: roteer alleen de CAMERA (X-axis)
    _camera.RotateX(-mouseMotion.Relative.Y * _mouseSensitivity);
    
    // Voorkom dat de camera omdraait (clamp tussen -86° en +86°, of -1.5 en 1.5 radialen)
    Vector3 cameraRotation = _camera.Rotation;
    cameraRotation.X = Mathf.Clamp(cameraRotation.X, -1.5f, 1.5f);
    _camera.Rotation = cameraRotation;
}

1. Voeg de _Ready() method toe om de muis te capturen met Input.MouseMode.

public partial class PlayerController : CharacterBody3D
{
    // ... variabelen declaratie

    public override void _Ready()
    {
        Input.MouseMode = Input.MouseModeEnum.Captured;
    }

    // ... rest van de code
}

De camera toewijzen aan de camera variabele

1. In de Godot Editor, selecteer de Player root node

2. Sleep de Camera3D in het Scene Hierarchy venster naar de Camera property in de inspector

Voeg player toe aan level

1. Open scenes/main.tscn

2. Instantieer de Player scene (sleep Player.tscn naar de scene)

3. Positioneer de speler op een platform (let op de Y positie)

4. Run de scene (F6)

5. Test de camera beweging

   • Arrow keys om te bewegen

   • Muis om rond te kijken

Complete playercontroller script

Het volledige Player.cs script

using Godot;
using System;

public partial class PlayerController : CharacterBody3D
{
    [Export] private float _mouseSensitivity = 0.003f;

    [Export] private Camera3D _camera;

    [Export] private float _speed = 5.0f;
    [Export] private float _jumpVelocity = 4.5f;

    public override void _Ready()
    {
        Input.MouseMode = Input.MouseModeEnum.Captured;
    }

    public override void _PhysicsProcess(double delta)
    {
        Vector3 velocity = Velocity;

        // Add the gravity.
        if (!IsOnFloor())
        {
            velocity += GetGravity() * (float)delta;
        }

        // Handle Jump.
        if (Input.IsActionJustPressed("ui_accept") && IsOnFloor())
        {
            velocity.Y = _jumpVelocity;
        }

        // Get the input direction and handle the movement/deceleration.
        Vector2 inputDir = Input.GetVector("move_left", "move_right", "move_forward", "move_backward");
        Vector3 direction = (Transform.Basis * new Vector3(inputDir.X, 0, inputDir.Y)).Normalized();
        if (direction != Vector3.Zero)
        {
            velocity.X = direction.X * _speed;
            velocity.Z = direction.Z * _speed;
        }
        else
        {
            velocity.X = Mathf.MoveToward(Velocity.X, 0, _speed);
            velocity.Z = Mathf.MoveToward(Velocity.Z, 0, _speed);
        }

        Velocity = velocity;
        MoveAndSlide();
    }

    public override void _Input(InputEvent @event)
    {
        if (@event is InputEventMouseMotion mouseMotion)
        {
            // Horizontal rotation: roteer de HELE speler (Y-axis)
            RotateY(-mouseMotion.Relative.X * _mouseSensitivity);

            // Vertical rotation: roteer alleen de CAMERA (X-axis)
            _camera.RotateX(-mouseMotion.Relative.Y * _mouseSensitivity);

            // Voorkom dat de camera omdraait (clamp tussen -86° en +86°, of -1.5 en 1.5 radialen)
            Vector3 cameraRotation = _camera.Rotation;
            cameraRotation.X = Mathf.Clamp(cameraRotation.X, -1.5f, 1.5f);
            _camera.Rotation = cameraRotation;
        }
    }
}