Een beat-em-up game maken met Godot - de wereld

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

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

Downloads

Zorg eerst dat je Godot geinstalleerd hebt: 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. 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
• het monster (minotaurus)
• de 'held'

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.

We maken een nieuw project via de New Project knop.

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.)

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

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

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:

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).

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.

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:

Met de + (plus) knop kunnen we nodes toevoegen aan onze scene.

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.

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.

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.

• 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.

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.

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.

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.

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.

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

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.

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

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

Tot zover deel 1.
In deel 2 gaan we onze speler toevoegen en tot leven brengen met code.