DEV Community

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

Posted on • Edited on

Een beat-em-up game maken met Godot - een vijand

Terug naar deel 3

We gaan een vijand toevoegen. De basis onderdelen zijn:

  • de animatie frames
  • een collision shape
  • en een enemy script

Hiervoor maken we eerst een nieuwe scene. In het paneel linksonder, klik je met de rechtermuisknop op res://. Vervolgens kies je new en dan scene.

Add new scene

In de Create New Scene dialoog klikken we op de Pick Root Node Type knop.
Create new scene pick root node button

Dan kunnen we in de Recent lijst opnieuw CharacterBody2D kiezen. Deze gebruikten we eerder ook voor de speler. Bevestig met de pick knop.
Pick CharacterBody2D

Terug in de eerste dialog, typen we nu een naam voor onze vijand: 'Minotaur'. We bevestigen met ok en onze nieuwe scene wordt gemaakt.

Create minotaur scene

Net zoals bij onze speler voegen we 2 child nodes toe aan onze minotaurus: AnimatedSprite2D en CollisionShape2D.

Add minotaur child nodes

Een shape instellen voor de collision shape is net hetzelfde als bij de speler. De vorm is ook een gedraaide CapsuleShape 2D maar wat groter: radius = 50, height = 350 en rotation = 90.

Minotaur collision shape

Onze AnimatedSprite2D heeft SpriteFrames nodig, die voegen we toe:

Create spriteframes

Klikken we nu nogmaal op deze nieuwe SpriteFrames dan opent het paneel waar we de animaties kunnen samenstellen.

SpriteFrames panel

De minotaurus animaties zijn dezelfde als die van de speler: attack, die, hurt, idle en walk. Deze voegen we toe met de Add Animation knop, en we geven ze de juiste naam. De default animatie mag weg.

Create animations

Voor elke animatie moeten we nu de juiste beelden toevoegen met de Add frames from file knop. De afbeeldingen staan in submappen van de map 'minotaur' onder onze 'assets'.
Alle animaties spelen aan 30 fps. Enkel de idle en walk animatie hebben looping AAN staan, bij de rest staat dit UIT.

Add frames to animations

Onze AnimatedSprite2D staat nog te laag ten opzichte van onze CollisionShape2D, de voeten van het monster moeten in de blauwe ovaal staan. We passen voor onze AnimatedSprite2D de position aan naar y = -200.

Set AnimatedSprite2D position

Onze vijand tot leven brengen doen we met een script. Zorg dat de root node 'Minotaur' geselecteerd is en klik op de Attach Script knop.

Attach script button

In de volgende dialoog gaan we een andere naam kiezen voor ons script: we noemen het script 'res://Enemy.gd' omdat we hetzelfde script willen gebruiken voor meerdere soorten vijanden. Bevestig door op Create te klikken.

Attach enemy script dialog

Het script voor de vijand gaan we geleidelijk opbouwen. We starten met het minimum: de vijand staat gewoon stil.
Verwijder alle voorbeeldcode en gebruik dit:

extends CharacterBody2D

@onready var sprite: AnimatedSprite2D = $AnimatedSprite2D

func _physics_process(_delta):
    sprite.play("idle")
Enter fullscreen mode Exit fullscreen mode

Om te kunnen testen gaan we onze vijand in de wereld plaatsen. Sla eerst de huidige scene op met Ctrl+S of kies in het hoofdmenu linksboven Scene - Save.

Dan keren we terug naar de 2D view en selecteren we onze 'game' scene. We slepen onze 'Minotaur.tscn' vanuit het FileSystem naar de 'Arena' node in onze scene. Daarna kan je de speler en de vijand verslepen in de wereld zelf, zodat ze niet vlak bij mekaar staan.

Add minotaur to game

Het valt misschien dadelijk op dat ons monstertje niet heel indrukwekkend is... We gaan hem eerst wat groter maken!
Dit is zo gebeurd: we openen terug de 'minotaur' scene, selecteren de AnimatedSprite2D en zetten de scale op 1.5
Nu staan onze voeten niet meer op de juiste plaats, daarom passen we position terug aan zodat y = -300

Make monster larger

Nu dit gebeurd is, kunnen we testen! Start de game met de Run Project knop of F5.

Als we naar onze vijand toelopen, merken we dat er nog een probleem is. Het overlappen van de graphics klopt nog niet, onze minotaurus staat altijd vanboven, ook al loopt de speler 'voor' hem.

Bad sorting

Als game engine heeft Godot hier natuurlijk een oplossing voor. Onze 'Arena' node heeft bij zijn properties een optie Y Sort Enabled die we eenvoudig aan kunnen zetten.
Staat dit AAN, dan gaat Godot bij het tekenen van de child nodes van 'Arena' kijken naar de hoogte (y positie) en de nodes sorteren zodat de hoogste nodes 'vanonder' komen te liggen.

Enable Y sort

Dit zit er al beter uit:

Run circles clip

In het volgende deel schrijven we een basis AI voor onze vijand: deel 5

Top comments (0)