Een beat-em-up game maken met Godot - botsingen
Tags: beginners, godot, tutorial, gamedev
Published: 2023-04-30 11:09:56

[Terug naar deel 2](https://dev.to/bgie/een-beat-em-up-game-maken-met-godot-4-deel-2-4af9)

In deel 3 van deze reeks zorgen we dat onze speler binnen onze wereld blijft, met het 'collision' systeem van Godot. Dit systeem is ook nodig voor bijvoorbeeld combat en interactie met objecten.

Godot heeft zoals vele game engines een fysica systeem, waarmee we botsingen (collisions) van objecten kunnen simuleren. 
De afmetingen van een object staan los van de graphics (tekeningen) op het scherm. Objecten die kunnen botsen zijn meestal opgebouwd uit eenvoudige vormen, zoals rechthoeken, cirkels of lijnen.

Willen we dat onze speler 'binnen' de wereld blijft, dan moeten we 2 zaken toevoegen:
- de grenzen van de wereld, waar we ook collision objects voor gaan gebruiken,
- en een collision object voor de speler zelf.

We starten met onze speler. Zorg dat de `2D` view open staat, en de 'player' scene actief is. Links moet de `node` die 'CollisionShape2D' heet, geselecteerd zijn.
Dan kiezen we rechts bij shape, een `CapsuleShape2D`.

![Set player collision shape screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zowy4mmi52oh4j38z29.png)

De grootte en richting van de `CapsuleShape2D` kan je met de muis aanpassen, via de kleine handvaten, maar in ons geval doen we het met het toetsenbord en typen we dadelijk de juiste waardes voor `radius` = 50, `height` = 300 en `rotation` = 90:

![Set capsuleshape parameters](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/te7ao09tm9a47yha0yo2.png)

Om later geen problemen te hebben met sprites die niet op de juiste manier voor of achter mekaar liggen, zorgen we dat de `CapsuleShape2D` op `position` `x` = 0 px en `y` = 0 px blijft staan.

We gaan de `AnimatedSprite2D` verplaatsen, zodat de voeten van het personage in de `CapsuleShape2D` staan. Selecteer de `AnimatedSprite2D` en verander zijn positie naar `x` = 10 px en `y` = -300 px.

![Move animated sprite feet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j15tdl9wf40oet2rcxpe.png)

Doordat we enkel de voeten gebruiken voor botsingen, kan ons personage voor en achter andere personages lopen. Dit ziet er beter uit. Als we het hele lichaam gebruiken voor botsingen, kan dit niet. De collision shapes kunnen niet overlappen, ze botsen. De sprites kunnen dat wel. Hier zie je het verschil:

![Large vs small collision shapes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/frmevzoemlod9mj2palc.png)

Nu gaan we verder met de wereld. Zorg dat de `2D` view open staat, en de 'game' scene actief is. Links moet je `node` die we 'Arena' hebben genoemd, geselecteerd zijn. Deze node is een `StaticBody2D`, wat wil zeggen dat het een object is dat meedoet aan botsingen, maar dat statisch blijft (niet beweegt). Klik op de `+` (plus) knop om een child node toe te voegen.

![Add child to arena node screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/priutwzj7p557diaeol8.png)

In de `Create New Node` dialoog voegen we een `CollisionShape2D` toe.

![Create CollisionShape2D screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suq3qp5ddszie1ftb7w2.png)

Voor de boven- en ondergrens van de wereld gebruiken we een simpele lijn. Alles aan 1 kant van de lijn telt als botsing, de andere kant is wandelbaar.

Selecteer de nieuwe `CollisionShape2D` en maak voor de `Shape` een nieuwe `WorldBoundaryShape2D`.

![New WorldBoundaryShape2D screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9bubo7aaqltmiaxn0f3v.png)

We stellen in welke kant van de lijn wandelbaar is door bij `Normal` onze `y` = 1 te maken. (Naar beneden). De lijn zelf zetten we vanboven aan de rand van de bomen door `position` `y` = -300 te maken:

![First world boundary screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/361u7af34hxp29e0e8qu.png)

Dit kunnen we nu best eens testen. Start het project met de `Run Project` knop of `F5`.

![Run up animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tp4q3bd23xai2gt9vd8h.gif)

De ondergrens van de wereld maken we op dezelfde manier. Selecteer opnieuw de `Arena` node en voeg een nieuwe `CollisionShape2D` toe. Deze geven we ook een `WorldBoundaryShape2D` als vorm.
De `normal` (richting) staat standaard op `x` = 0 en `y` = -1. Dit is goed, dit is naar boven. We veranderen wel de `position` naar `y` = 1080.

![World lower boundary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9k4vqd4g7werb8g6kqm2.png)

De linker- en rechtergrens zetten we iets buiten beeld. Dan kunnen straks de vijanden net buiten beeld spawnen.
Maak nog twee maal onder de `Arena` node een `CollisionShape2D`, met telkens een `WorldBoundaryShape2D`

De linkergrens heeft `normal` `x` = 1 en `y` = 0. De `position` `x` = -2300 px.
De rechtergrens heeft `normal` `x` = -1 en `y` = 0. De `position` `x` = 2300 px.

Als dit klaar is kan je opnieuw testen met `Run Project` of `F5`.

![Running around screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tj8qu6onpa52b1zahcng.gif)

In het [volgende deel (deel 4)](https://dev.to/bgie/een-beat-em-up-game-maken-met-godot-4-deel-4-25c7) gaan we een vijand toevoegen.