Een beat-em-up game maken met Godot - de wereld
Tags: godot, tutorial, beginners, gamedev
Published: 2023-04-07 18:38:34

In deze tutorial maken we een eenvoudige beat-em-up game met Godot 4.

NOTE: if anyone cares for an English version, msg me.

![Full game animation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/27sasdt2grxd2pmiwog6.gif)

## Downloads
Zorg eerst dat je Godot geinstalleerd hebt: [https://godotengine.org/](https://godotengine.org/)
Deze tutorial is gemaakt met versie `4.0.1`. Je hebt minstens Godot 4 nodig, een 3.x versie is te verschillend! 
Met een hogere versie moet het (normaal) wel lukken.

Verder heb je de game assets nodig. Deze zijn gratis te downloaden via [craftpix](https://craftpix.net/). Volg je deze tutorial via CoderDojo, dan kan je een USB stick vragen aan de coach. 

Download de volgende assets (blauwe 'free download' knop), en pak de zipfiles uit:

- [de achtergrond](https://craftpix.net/freebies/free-forest-battle-backgrounds/)
- [het monster (minotaurus)](https://craftpix.net/freebies/free-minotaur-tiny-style-2d-sprites/)
- [de 'held'](https://craftpix.net/freebies/free-fallen-angel-chibi-2d-game-sprites/)

De game assets bevatten meerdere varianten voor de achtergrond of karakters, die kan je ook gebruiken voor deze tutorial, dan ziet jouw game er niet hetzelfde uit.

## Nieuw project maken
Als we Godot openen krijgen we eerst de `Project Manager`.
In deze tutorial staat de taal van Godot op Engels. Dat is makkelijker wanneer je hulp zoekt op het internet. Maar je kan de user interface in het Nederlands zetten. De programmeertaal blijft wel op Engels gebaseerd.

![Language setting screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axwa1r1q7je917haqosn.png)

We maken een nieuw project via de `New Project` knop.

![New project button screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egnyr0odqf024snpkm5g.png)

In de dialoog geven we ons project een naam bij `Project Name` en klikken we op `Create Folder` om de nieuwe map te maken voor ons project.
(Indien nodig kan je eerst bij `Project Path` kiezen waar je nieuwe map terecht komt.)

![Create project dialog screenshot - create folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ceibj2b0onmi1jwu63zb.png)

Na het maken van de nieuwe map kiezen we `Create & Edit`.

![Create project dialog screenshot - create and edit](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d3k7wrp2gij1znr8snnb.png)

Het hoofdvenster van Godot opent. De belangrijkste onderdelen op het scherm zijn:

![Godot main window screenshot - parts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/976x9y96cy98jtr55ic2.png)

1. De hoofdnavigatie: we gaan enkel 2D view en script gebruiken in deze tutorial.
2. De `scene tree`: een boom met alle onderdelen in de huidige scene. Dit wordt later duidelijk.
3. Het `file system`: waar alle bestanden te zien zijn die ook op je harde schrijf staan, zoals de afbeeldingen, scripts en scenes in je project.
4. De `inspector` waar je de `properties` (eigenschappen) te zien krijgt van het geselecteerde object in je scene.
5. De knoppen vanonder tonen verschillende extra panelen om allerlei editors te openen, afhankelijk welk object in de scene geselecteerd is.

Het middenstuk van het scherm toont de game scene zelf (als `2D` gekozen is) of toont het script waar je aan werkt (als `Script` gekozen is)

Omdat we een leeg project hebben, is er niet veel te zien, maar wanneer als je een bestaande game open hebt, ziet dit scherm er zo uit:

![Godot main window screenshot - finished game](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8qeyk2vbcrht7pqtms8r.png)

## Game assets kopiëren
We gaan eerst onze graphics kopiëren. 
Door rechts te klikken op `res://` in het `FileSystem` paneel openen we een menu. Daar kunnen we `Open in File Manager` kiezen om een verkenner venster te krijgen. Dit hangt af van je besturingssysteem (Windows, Mac, Linux).

![Open in file manager context menu screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x828py4uzrsqjzuwyh8j.png)

Kopieer de juiste submappen vanuit je downloads:
- Downloads/craftpix-net-270096-free-forest-battle-backgrounds/PNG/game_background_1
- Downloads/craftpix-991117-free-fallen-angel-chibi-2d-game-sprites/Fallen_Angels_2/PNG/PNG Sequences
- Downloads/craftpix-net-484869-free-minotaur-tiny-style-2d-sprites/PNG/Minotaur_01/PNG Sequences

... naar je Godot project map die we net openden. Ik heb zelf mapjes gemaakt met duidelijke namen om alles makkelijk terug te vinden.

![Asset tree structure screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ktjwuzixaxo44g6gbuqy.png)


## Een scene maken met nodes
We starten met een eenvoudige achtergrond en een vaste camera, die niet beweegt.

Onze `scene` heeft een `root node` nodig, het beginpunt van alles. Omdat onze game 2D is, kiezen we voor een `2D Scene`:

![Root node screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fu7fd7sl28en7hh64k3a.png)

Met de `+` (plus) knop kunnen we nodes toevoegen aan onze scene. 
![Add node screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j1qv4jg987rq0zl13b0s.png)

Nu krijgen we de `Create New Node` dialoog waar we moeten aangeven welke soort node we willen toevoegen. Via het zoekvak boven kiezen we voor een `Sprite2D`, dit is de soort node voor een gewone, 2D tekening zonder animaties.

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

Onze nieuwe node komt bij in de `scene tree`. 

We maken nog een aantal nodes bij: een `StaticBody2D`, nog een `Sprite2D`, en een `Camera2D`. 
Let erop dat alle nieuwe nodes op hetzelfde niveau zitten. Je kan een node 'onder' een andere node hangen. We willen al onze nodes onder de root node. De volgorde van de nodes is ook belangrijk.

![Scene tree with new nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vg9z0veansqxjpbujxst.png)

Voor de duidelijkheid gaan we onze nodes een goede naam geven. Dit doe je door een node aan te klikken, even te wachten, en opnieuw te klikken. Je kan ook rechts klikken en `Rename` kiezen of `F2` gebruiken.

![Scene tree with renamed nodes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uryyabi3zf8l38diw1r3.png)

- de root node wordt 'Game'
- de eerste sprite wordt 'Background'
- de static body wordt 'Arena'
- de tweede sprite wordt 'Foreground'
- de camera noemen we gewoon 'Camera'

Dit is een goed moment om op te slaan. Dit kan met `Ctrl+S` of in de hoofdmenu `Scene` - `Save Scene`.
Omdat dit de eerste keer is, krijgen we een dialoog. De naam 'Game' van onze root node is een goede naam voor de scene. Klik gewoon `Save`.

![Save scene dialog screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jbucgcipzev899xbb1tn.png)

## Achtergrond en camera
De achtergrond afbeelding instellen is nu makkelijk: klik links om de 'Background' node te selecteren, en klik dan in het `Inspector` paneel op het kleine pijltje naar beneden bij `Texture: <empty>`. In het menu kies je helemaal beneden voor `Load`.

![Load sprite texture screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/irytqt0bqz0j6w7rh08s.png)

Je krijgt een dialoog waar we bladeren tot we `game_background_1.png` hebben gevonden. Bij mij is het pad `res://assets/background/game_background_1.png` omdat ik een submap `assets` heb gemaakt.

![Load background image dialog screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6490eepj2u6vhbqg8l1s.png)

Voor de 'Foreground' sprite doen we hetzelfde, maar we gebruiken een andere afbeelding: enkel de voorste laag van ons bos, waar er vanonder een strookje gras staat met een dikke steen: `res://assets/background/front_decor.png`.

Door met 2 sprites te werken kunnen later onze karakters achter het voorste gras lopen, wat er realistischer uitziet.

Je kan controleren of de twee sprites correct zijn door ze tijdelijk onzichtbaar te maken. Als de 'Background' sprite onzichtbaar is, moet je enkel de strook gras op de voorgrond zien.

![Background hidden screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g7ugey8vs9vpquxhtyj.png)

Laatste stap in het instellen van de camera: voor dit eenvoudige spel staat de camera gewoon stil. Maar onze achtergrond afbeelding is erg groot, we gaan de camera wat uitzoomen.

Selecteer de 'Camera' node en stel rechts de `Zoom` in op `0.5`. Beide waarden zijn verbonden, dus je moet dit maar 1 keer doen.

![Set Camera zoom screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/grx0q6i6qigexzuir6pu.png)

We hebben nu het minimum gedaan om onze 'game' te kunnen testen. Klik op de `Run Project` knop of druk `F5`.

![Run project button screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jphk9zqmwywof9n360nx.png)

Omdat dit de eerste keer is dat we onze game uitvoeren, vraagt Godot welke scene de opstart-scene moet worden. We hebben maar 1 scene ('Game') en dat is de huidige. Dus kies gewoon `Select Current`.

![First run select main scene dialog screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ypagk5ah5dzlehrhgkiz.png)

Na een laad-scherm start onze game. Standaard is het venster 1152x648 pixels groot. 

![First game run screenshot small window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75qyh2s3c6mk1kkg7mr6.png)

Je kan het venster maximaliseren, en dan zou je de hele afbeelding van het bos moeten zien, als je computermonitor op HD 1920x1080 staat.

![First game run screenshot maximized window](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4arlqsobmctvmnu9hz3.png)

Tot zover deel 1. 
In [deel 2](https://dev.to/bgie/een-beat-em-up-game-maken-met-godot-4-deel-2-4af9) gaan we onze speler toevoegen en tot leven brengen met code.