DEV Community

Cover image for Een beat-em-up game maken met Godot - botsingen
Bgie
Bgie

Posted on • Updated on

Een beat-em-up game maken met Godot - botsingen

Terug naar deel 2

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

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

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

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

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

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

Create CollisionShape2D screenshot

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

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

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

Run up animation

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

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

In het volgende deel (deel 4) gaan we een vijand toevoegen.

Top comments (0)