The Legend of Zelda für Anfänger

Der eine oder die andere kennt das Game «The Legend of Zelda» schon aus der Kindheit. Sei es vom Game Boy Advance, der Wii oder von den Nintendo-Handhelden.

Ich habe mit Hilfe von der JavaScript-Library Kaboom ein personalisiertes Zelda-Game entwickelt. Kaboom.js ermöglicht einem einfach und übersichtlich Games zu entwickeln!

Schau doch mal rein:

Zelda Kaboom.js

Unter Kritik findest du mehr über den Entstehungsprozess heraus:)

(ash)

Idee

Zur Inspiration für Digezz habe ich zunächst gegoogelt und diverse Tutorials auf YouTube angesehen. Es gibt sehr viel spannende Inhalte und Bereiche zum Thema JavaScript in denen man sich vertiefen könnte.
In meinem Fall bin ich auf Kaboom.js gestossen. Dabei handelt es sich um eine JavaScript-Bibliothek, mit der es einfacher und schneller geht Games zu entwickeln.

 

Umsetzung

Für die Umsetzung habe ich die Kaboom Version 0.5.0 verwendet. Gecodet habe ich in Replit. Dabei handelt es sich um eine cloud-basierte Lösung, die das Kreieren, Anwenden, Testen und Debuggen von Codes ermöglicht. Nach der Erstellung eines Replit-Kontos konnte ich loslegen. Als Erstes kann man ein Repl (Akronym für «read-evalu-print loop») mit dem entsprechenden Template erstellen. Es steht einem eine lange Liste von Programmiersprachen und Templates zur Auswahl z.B. mit den Sprachen Python, Node.js, C++, C# und  TypeScript sowie den Templates Discord.js, Bootstrap, p5.js, React und natürlich Kaboom.

Erste Schritte

Im JavaScript-File kann man als erstes eine «Scene» erstellen. Mit dem legt man den Hauptschauplatz fest. Um das Spiel zu starten fügt man im Code start(«game») ein.

Ohne Sprites funktioniert Nichts. Wir brauchen Elemente und Charaktere, um dem Spiel Leben einzuhauchen. Ich habe mich an Beispielen von älteren Legend of Zelda-Games in Retro-Style orientiert und dementsprechend gestaltet. Danach habe ich auf imgur.com alle Elemente hochgeladen. Dadurch kann man im Code mit loadSprite(«https://i.imgur.com/beispiel.png») die Sprites laden.

Levelgestaltung

In Kaboom.js ist es relativ einfach Levels zu kreieren. Mit einem Array aus Strings kann man die jeweiligen Level nach seinem Geschmack designen. Dazu legt man Platzhalter für die jeweiligen Sprites fest, um diese in den Maps (bzw. Strings) einzusetzen. Zum Beispiel linke Wand = «a», obere Wand = «b», rechte Wand = «c» und untere Wand = «d».

Punktestand und Levelanzeige

Die Anzahl Punkte und die Levelanzeige kann man mit den Codes add([text(«Score » + «0»), pos(350, 450), layer(«ui»), { value: score, }]) und add(text[«Level » + parseInt(level + 1), pos(350, 475]) visualisieren.
Mit pos(x, y) können die Koordinaten bestimmt werden.

Steuerung Link

Die Steuerung vom Helden Link erfolgt durch die Pfeiltasten und durch die AWSD mit Hilfe des Komponenten keyDown(). Wichtig dabei zu beachten ist, dass jeder Richtung die passenden Vektoren zugeordnet werden.

Tagging ist dein Freund

Mit Hilfe von Tags bist du in der Lage Objekte anzusprechen und ihnen so eine Funktion bzw. ein Verhalten zu zuweisen. Ich war immer wieder verblüfft, wie hilfreich das war und wie einfach so Aktionen im Spiel durchgeführt werden können. Zum Beispiel kann mit der «next-level»-Tag Türen und Treppen zugewiesen werden und so den Übergang in den nächsten Raum ermöglichen. Oder man kann einen «wall»-Tag für die bewegenden NPC’s auslösen, damit sie bei Kollision mit der Wand die Richtung wechseln.

Gegner

Damit die NPC nicht nur an einem Fleck stehen bleiben, können wir ihnen eine Geschwindigkeit verleihen. Dafür verwenden wir im Beispiel von Skeletor action(’skeletor›, (s) => { s.move(0, s.dir * SKELETOR_SPEED) }). Skeletor bewegt sich jetzt in horizontaler Richtung. Damit der Schwierigkeitsgrad erhöht wird, kann man zusätzlich die Richtungsänderung des Gegners mit rand(x) zufällig einstellen.

Als nächstes kann man mit einem «dangerous»-Tag die Gegner ansprechen und so die Konsequenzen bei Kontakt für Link festlegen. Zum Beispiel erscheint dann der «Game Over»-Bildschirm.

Links Angriff

Das Ziel des Spieler ist es, so viele Punkte wie möglich zu sammeln. Punkte erhält er, indem er die Gegner Skeletor oder Warrior besiegt. Dafür verwenden wir unser Sprite «kaboom». Zuerst spawnen (erscheinen lassen) wir es mit, wenn die Leertaste gedrückt wird keyPress(«space», () => { spawnKaboom(player.pos.add(player.dir.scale(48)))}). Dann erstellen wir die Kill-Funktion von der Kaboom-Attacke und Skeletor mit collides(«kaboom», «skeletor», (k, s) => { wait(1, () { destroy(k) }) destroy(s)})

Musik

Ich habe auf YouTube und im Internet allgemein nach Audio gesucht. Zum einen habe ich einen passenden Retro-Soundtrack von den Zelda-Spielen gefunden und zum anderen habe ich auf www.zapsplat.com gute Soundeffekte gefunden.

 

Challenges

Da ich nicht mit der aktuellsten Version gearbeitet habe, gab es Funktionen und Befehle, die es nicht mehr gibt oder sich geändert haben. Ich habe mich jedoch für diese Version entschieden, weil es sehr gut erklärte Dokumentationen dazu gibt. Anfangs hatte ich Probleme damit die richtige Version einzustellen. Es hat mir automatisch die neuste Version übernommen. Später habe ich herausgefunden, dass ich mit dem Script-Tag <script src=»https://kaboomjs.com/lib/0.5.0/kaboom.js»></script> im HTML-Template ganz einfach die Version wechseln kann. Erst nachdem dieses Problem gelöst wurde, konnte ich so richtig loslegen.

Ein Problem, dass ich bis dato noch nicht lösen konnte, ist das Verhalten der NPC (Non-player character). Es kommt vor, dass sich diese durch die Wände hindurch «buggen». Dabei habe ich die Funktion collides(‹object›, ‹wall›, (o) => { s.dir = -s.dir }), welche dies verhindern sollte (was auch grösstenteils funktioniert).

Desweiteren funktioniert die Hintergrundmusik auch noch nicht so, wie ich es wollte. Und zwar spielt es die Hintergrundmusik jedes Mal von neuem, wenn man einen neuen Raum betritt. Das heisst beim fünften Raum hört man die Musik fünf mal im Hintergrund.. es könnte sein, dass dies in der neueren Kaboom-Version behoben wurde.

 

Fazit

Ich bin immer wieder an meine Grenzen gestossen und musste viel googeln, um weiter zu kommen. Jedoch habe ich sehr viel Spass in der Gestaltung und im Entstehungsprozesses des Spiels gefunden. Es ist sehr faszinierend, was alles mit Kaboom.js möglich ist und ich mag an dieses Template, dass es einem die Chance gibt, sich frei auszutoben.

Ich überlege mir für die Zukunft ein weiteres Spiel zu realisieren, da mir die Entwicklung des Zelda-Games trotz der Hürden eine Freude war und ich mit dem Ergebnis zufrieden bin.