Wie Rubber Duck Games einen Bosskampf in Evil Wizard entwickelt hat

Rubber Duck Games, einer der geschätzten GDC 2023 Best in Play-Gewinner, verrät, wie sie einen fesselnden Bosskampf entwickelt haben. In diesem Gast-Blog führen euch die Teammitglieder Banki und Sergio Wajswol durch die gesamte Reise, vom Design und Prototyping über die Animation, das Testen und Balancing bis hin zur Fertigstellung der visuellen Effekte und des Tons für Evil Wizard.

Hallo, liebe Leser! Ich bin Banki, Spieldesigner und Produzent bei Rubber Duck Games. Unser humorvolles Action-RPG Böser Zauberer ist jetzt auf Steam und Xbox erschienen, und ich wollte euch einen Blick hinter die Kulissen geben, wie wir einen Bosskampf entwickelt haben.

Evil Wizard ist ein von Metroidvania inspiriertes Spiel, in dem du in die Rolle eines besiegten "Endgegners" schlüpfst, der sich an dem verfluchten Helden rächen will.

Dieser Rachefeldzug führt die Spieler durch bezaubernde Pixel-Art-Umgebungen, die vollgepackt sind mit Horden von Feinden, die sie besiegen müssen, um das zurückzuerobern, was ihnen gehört. Die Hauptfigur war einst ein mächtiger Zauberer, doch ein verlorener Kampf gegen den Helden hat sie ihrer Kräfte beraubt, und sie müssen sie zurückgewinnen, während sie daran arbeiten, das Schloss zu infiltrieren und verheerende Rache zu nehmen.

Der erste Held, den es im Spiel zu besiegen gilt, ist Hailga, die mächtige Eiszauberin. Wir nehmen sie als Beispielchefin für diesen tiefen Tauchgang.

Fangen wir von vorne an. Die Entwicklung eines Endgegners (und aller Feinde) für Evil Wizard war ein wenig knifflig. Obwohl die Spieler gegen die Guten kämpfen, wussten wir, dass sie immer noch bedrohlich genug aussehen sollten, um als Feinde erkannt zu werden.

Für die Endgegner haben wir uns von bekannten Spielehelden inspirieren lassen und nach Referenzen gesucht. Bei Hailga haben wir uns stark von Jaina aus Warcraft inspirieren lassen, da beide viele Ähnlichkeiten aufweisen.

Der erste Schritt bestand darin, eine Tabelle zu erstellen (die wir für jeden Endgegner im Spiel verwendeten), in der wir die Haupteigenschaften, die Mechanik und einige Referenzen des Charakters beschrieben.

Nachdem wir die Mechanik entworfen hatten, konnten wir zum nächsten Schritt übergehen: dem Prototyping.

Es ist an der Zeit, dem Team den Entwurf des neuen Chefs zu präsentieren, also gehen wir in einer Besprechung das Dokument durch und ich erkläre einige meiner Entscheidungen.

In einigen Fällen könnte eine Mechanik zu schwierig zu entwickeln oder eine Animation zu kompliziert zu zeichnen sein, usw. Wir versuchen, die Dinge rechtzeitig zu erledigen, daher sollten wir einige Dinge berücksichtigen, um in der uns zur Verfügung stehenden Zeit den besten Chef zu machen.

Unser leitender Programmierer, Diego Ordóñez, hat zum Thema Prototyping Folgendes zu sagen: "Hailga war unser erster Boss bei Evil Wizard und das erste Mal in meinem Leben, dass ich einen Boss programmiert habe. Ich wusste, dass es sich um eine schwierige Aufgabe handelte, also tat ich zunächst das, was jeder Programmierer tut: Ich teilte die Angriffe in einfache Aufgaben auf und führte sie einzeln aus. Dieser Boss hat Angriffe, die durch die Wiederverwendung von Geschossen einfach zu bewerkstelligen waren."

"Die Angriffe Eiskugel und Eisrakete fühlen sich für die Spieler sehr unterschiedlich an - dem einen kann man einfach ausweichen, während der andere eine Herausforderung im Kampf darstellt", fuhr er fort. "Der Hauptunterschied besteht darin, wie die Angriffskomponente die Eisgeschosse spawnen lässt und wie viele Geschosse auf den Spieler gerichtet sind. Mit einfachen Anpassungen konnten wir ein ganzes System wiederverwenden, um zwei verschiedene Angriffe zu präsentieren. Das hat alles prima funktioniert, bis ich den Schneesturmangriff machen musste."

Für Hailgas Kampf wollten wir etwas Neues in die Begegnung bringen und dachten, dass Wind interessant sein könnte. Das war ganz anders als alles andere, was wir bei Evil Wizard gemacht hatten, also musste ich bei Null anfangen. Die Grundidee war, Wind aus einer zufälligen Richtung zu erzeugen, um den Spieler auf eine Wand voller Stacheln zu lenken, die Schaden verursachen können. Die beste Möglichkeit, diesen Angriff abzuwehren, besteht darin, sich in Deckung zu begeben, weshalb wir einige Stalaktiten als Windblocker auf dem Schlachtfeld platzieren. Wenn Spieler hinter einem Eisstalaktiten stehen, wird der Wind keine Kraft mehr auf sie ausüben.

Wir begannen mit der Erstellung einer Angriffskomponente, die für die Verwaltung der verschiedenen von uns verwendeten Systeme zuständig ist. Die Systeme verwendeten die Stalaktiten, den Windemitter und die Blizzard-VFX. Ich werde mich auf die ersten beiden konzentrieren, und die VFX werden von Sergio Wajswol später in diesem Blogbeitrag behandelt.

Die Stalaktiten werden mit einem Kreis-Collider erzeugt, um zufällige Punkte innerhalb des Kreises zu erhalten, und dann werden diese Positionen verwendet, um einen Stalaktiten mit einem Versatz auf der Y-Achse zu erzeugen. Mit einer Coroutine lassen wir die Objekte fallen, indem wir die Y-Achse absenken - eine einfache Sache. Nachdem wir die Stalaktiten erzeugt hatten, machten wir uns an die Windsteuerung. Diese Komponente funktioniert wie ein großer Ventilator mit einer rechteckigen Form, die sich um den Rand eines Kreises dreht.

Da wir den Wind aus zufälligen Richtungen wehen lassen mussten, mussten wir den Strahler in die Mitte richten, damit alles innerhalb des Bereichs betroffen war. Die Windsteuerung verfügt über einen Windgeber, der die Drehung, Richtung und Position des Windes speichert. Wenn wir das Bauteil drehen, berechnet der Emitter diese Werte und wendet sie auf den Wind an (der nur eine Richtung und eine Kraft ist). Im Grunde ein Vector3 und ein Float.

Der Wind kann auch, wie bereits erwähnt, durch einen Windblocker blockiert werden. Diese Komponente hat einen BoxCollider2D, der Kollisionen mit dem Spieler überprüft. Wenn der Spieler in die Nähe eines Windblockers kommt, aktiviert der OnTriggerEnter2D den Windblocker, und wenn der Spieler den Collider verlässt, deaktiviert der OnTriggerExit2D den Windblocker. Dies wird durch die cyanfarbene Linie zwischen dem Spieler und dem Emitter in der folgenden Abbildung veranschaulicht. Solange die Linie grün ist, ist der Spieler geschützt.

Schließlich mussten wir dafür sorgen, dass der Spieler die Windkraft aufnimmt und sich in die Richtung des Windes bewegt. Zu diesem Zweck haben wir eine WindReceiver-Komponente. Er prüft, wie stark und aus welcher Richtung der Wind auf den Spieler einwirkt. Diese Informationen werden gesammelt, indem ein Raycast vom Spieler zum Windempfänger durchgeführt wird. Anhand dieser Informationen lässt sich feststellen, ob der Windsender auf den Empfänger trifft, mit welcher Kraft und aus welcher Richtung. Sobald wir alle Informationen haben, wenden wir die Kraft des Windes mit unserer eigenen Bewegungssteuerung an und bewegen den Spieler in die von uns gewünschte Richtung.

Als Diego anfing, die ersten Angriffe zu begehen, begann ich, Hailga ein gewisses Verhalten zu zeigen.

Für die KI von Evil Wizard haben wir ein sehr hilfreiches Tool namens Behavior Designer verwendet. Ich kann es nicht genug empfehlen. Es ist perfekt für Spieldesigner, die nicht programmieren, so dass der Programmierer an den Mechanismen arbeiten kann und der Designer diese in den Verhaltensbaum des Charakters einfügt, so dass er ohne Programmierung so funktioniert, wie er es braucht. Die Grundlagen können Sie hier lernen.

Hier ist der Verhaltensbaum von Hailga:

Es ist ein großer Baum, aber keine Panik - es ist einfacher als es aussieht.

Im Grunde haben wir einige Aufgaben am Anfang des Baumes genutzt, um den Kampf vorzubereiten. Zum Beispiel, um den Boss in seine erste Phase zu versetzen, die Intro-Animation abzuspielen und einige Variablen zurückzusetzen.

Da diese Aufgaben nur zu Beginn des Kampfes ausgeführt werden, fügten wir einen Repeater hinzu, der das tatsächliche Verhalten des Endgegners übernimmt, wie im nächsten Bild zu sehen ist.

Die Priorität des Verhaltens des Chefs ist immer die Gesundheit. Damit kontrollieren wir, ob der Boss in eine andere Phase wechseln oder sogar sterben soll. Wir fragen also zunächst, ob der Boss mehr als 75 % Gesundheit hat. Wenn ja, führen wir die Aufgaben der ersten Phase aus, d. h. Eisstacheln, Eisraketen und die Beschwörung von Schneeschleim (Bossgegner). Wenn die Lebenspunkte des Endgegners unter 75 % fallen, wechselt der Baum zum folgenden Selektor am unteren Rand des Bildes und führt die der zweiten Phase entsprechenden Aufgaben aus, und so weiter, bis der Endgegner seine letzte Phase erreicht und die Spielfigur bei 0 Lebenspunkten stirbt.

Bevor ich zum nächsten Schritt übergehe, möchte ich die Funktion des externen Verhaltensbaums erwähnen, mit der man große Verhaltensbäume wie diesen hier gut organisieren kann.

Sie haben diese bereits auf dem vorherigen Bild gesehen - die Icons mit den drei Kästchen sind externe Verhaltensbäume.

Stellen Sie sich externe Verhaltensbäume wie eine Methode in Ihrem Code vor: Sie rufen die Methode an mehreren Stellen in der gesamten Spiellogik auf und an jeder Stelle wird derselbe Code ausgeführt, aber Sie haben diesen Code nur an einer Stelle. Wenn Sie etwas in dieser Logik ändern müssen, ändern Sie den Code dieser Methode, und dieser ändert sich an jeder Stelle, an der die Methode aufgerufen wird. Hier funktioniert es genauso. Sie haben einen externen Verhaltensbaum, der das Verhalten zur Durchführung einer bestimmten Aktion enthält, z. B. "Schneeschleime beschwören".

Wenn ich in unseren externen Verhaltensbaum eintrete, finde ich dies:

Es ist wie ein Mini-Verhaltensbaum, der prüft, ob ein Boss nicht zu oft denselben Angriff wiederholt und ob nicht schon zu viele Diener auf dem Schlachtfeld sind, und der dann die Diener herbeiruft, Hailgas Sprachausgabe abspielt oder den Boss auf Leerlauf stellt.

Wenn ich die Anzahl der Diener, die gleichzeitig auf dem Schlachtfeld sein können, ändern möchte, muss ich dies nur in der Aufgabe "Check Enemy Amount of Type" innerhalb dieses externen Verhaltensbaums ändern, und dies funktioniert für jeden Teil des Baums, der zur Beschwörung von Dienern verwendet wird.

Bei der Erschaffung von Hailga ging unser leitender Künstler, Ruben Gómez, von der Prämisse aus, auf bestehende Charaktere zu verweisen, in der Hoffnung, dass die Spieler sie wiedererkennen würden.

In diesem Fall haben wir Jaina aus Warcraft (wie erwähnt) und Elsa aus Frozen als Charakterreferenzen verwendet.

Das hat Ruben zu sagen:

"Unter dieser Prämisse habe ich mit dem Design von Hailga begonnen", sagt Ruben. "Wir haben einige Merkmale der Kleidung und der Frisuren jeder Referenz genommen, Elemente, die in einem sehr kleinen gepixelten Sprite leicht zu erkennen sein könnten, und den Rest mit Fantasie gefüllt (keine KI, nur menschliche Fantasie, die gleiche, die ich als Kind benutzt habe)."

Bei der Animation mussten wir die Bewegungen schnell ausführen, ohne dass der Übergang zwischen den Einzelbildern fließend war. Daher versuchten wir, mit schnelleren Iterationen für die Aktionen der einzelnen Figuren Zeit zu gewinnen. Wir gehen immer von der endgültigen Version aus und beschneiden, arrangieren, skalieren und drehen jeden Teil der Figur für jedes Bild der Animation unter Verwendung der nächstliegenden Interpolation mit der Absicht, einige Elemente wiederzuverwenden und Antialiasing zu vermeiden.

Danach haben wir einen Schnelltest der Bewegungen durchgeführt und auf dieselbe Weise angepasst.

Als der Entwurf für die Animation fertig war, verfeinerten wir jedes Element, füllten Leerstellen und fügten Details hinzu.

Die endgültige Version der einzelnen Bilder sehen Sie auf dem nächsten Bild.

Während die Animationen in Arbeit waren, habe ich den Bosskampf getestet und ausgeglichen. Dafür haben wir eine Szene mit dem Namen "Combat Zone" erstellt, die wir zum Testen von Bossen, Gegnern, Zaubern und mehr verwendet haben. Im Grunde ist es ein kleiner Bereich, der alle Tools und Funktionen enthält, die wir zum Testen brauchen, ohne das eigentliche Spiel zu berühren.

So sah der frühe Hailga-Boss aus, als wir die Figur in der Combat Zone-Szene getestet haben:

Als wir schließlich mit ihrem Verhalten, ihrer Funktionalität und ihrem Schwierigkeitsgrad zufrieden waren, integrierten wir Hailga an ihrem Platz im eigentlichen Spiel.

Als wir das Verhalten und die Animationen für Hailga fertiggestellt hatten, begannen wir, die Animationen des Bosses mit Hilfe von AnimatorImporterzu integrieren, ein großartiges Tool für die Integration von in Aseprite erstellten Pixel-Animationen. Damit haben Sie in wenigen Schritten alles erledigt.

Jetzt ist es an der Zeit, dem Boss ein wenig Würze zu verleihen, und da kam unser VFX-Künstler Teky ins Spiel. Nimm es weg, Teky:

Hey! Sergio Wajswol (auch bekannt als. Teky) hier, Programmierer und VFX-Künstler für Evil Wizard.

Hailgas VFX war eine echte Herausforderung, nicht nur, weil es der erste Boss des Teams war, sondern auch, weil es eine meiner ersten Aufgaben im Spiel war. Es gibt mehrere VFX-Sequenzen, die während des Bosskampfes eingesetzt werden - mindestens eine pro Angriff -, aber ich werde meine Aufmerksamkeit auf einige wenige konzentrieren.

Einer der Höhepunkte des Kampfes ist der letzte Phasenübergang, in dem Hailga wütend wird und einen Eisstrahl auf den bösen Zauberer schleudert, der das Schlachtfeld gefrieren lässt.

Ich glaube, dass dies ein wirklich schöner Effekt ist, um die Teile, die die Magie möglich gemacht haben, auseinanderzunehmen und zu zeigen. Zu diesem Zweck haben wir den Übergang in zwei VFX-Teile unterteilt: Eisstrahl und Bodenfrost.

Für das erste Stück begann meine Arbeit, sobald Diego die Programmierung des Angriffs abgeschlossen hatte. Normalerweise erhielt ich einen hübschen Platzhalter (in diesem Fall ein längliches Rechteck) - und er wünschte mir viel Glück. Von da an stürzte ich mich in die Arbeit mit den Werkzeugen, von denen ich wusste, dass ich sie bereits in meinem Werkzeugkasten hatte. Aber da es sich um den Beginn der Entwicklung handelte, war ich knapp bei Kasse. In der Vergangenheit hatte ich die Line Renderer-Komponente von Unity verwendet, um eine Linie zwischen zwei beliebigen Punkten per Skript zu rendern.

Nicht ganz, wie Sie oben sehen können. Etwas, das ich in der VFX-Branche schnell verstanden habe, ist, dass (entgegen der klassischen Philosophie) "das Ganze die Summe der Teile ist ". Damit meine ich, dass mehrere Systeme erforderlich sein können, um einen gewünschten Effekt zu erzielen, nicht nur ein Shader oder ein Partikel.

Als Nächstes wollte ich, dass der Effekt mehr wie ein Balken aussieht (und weniger massiv ist), also habe ich mit Shader Graph gespielt, um dies zu erreichen. Ich werde versuchen, dies kurz zu erklären.

Um das zu erreichen, was ich wollte, brauchte der Shader drei Hauptteile. Zunächst habe ich eine zuvor gezeichnete Textur verwendet, die lediglich einen horizontalen Spiegelungsgradienten darstellte (Sie können sie im nächsten Bild als MainTex sehen). Mit dem Knoten "Pow" konnte ich die Breite des Strahls leicht steuern (die Textur multipliziert sich selbst und, da es sich um einen Farbverlauf handelt, schrumpft der Strahl).

Dann habe ich einfaches Rauschen mit dem Knoten Kacheln und Versatz für zwei Zwecke animiert:

Auflösen des Strahls in bestimmten Teilen (immer durch eine öffentliche Variable gesteuert)

So ändern Sie das UV des Strahls, so dass er verzerrt aussieht

Anschließend habe ich den resultierenden Strahl mit einer HDR-Farbe multipliziert, um das Glühen zu kontrollieren. Schließlich habe ich die Kanten des Strahls mit dem Stufenknoten multipliziert, um eine andere Farbe zu erhalten, wobei die Mitte des Strahls hervorsticht.

Als ich fertig war, hatte ich so etwas wie das hier, um mit verschiedenen Farben und Variablen zu spielen.

In diesem Moment hatte ich das Gefühl, etwas zu erreichen, aber ich merkte, dass mir etwas fehlte: Der Strahl wurde aus dem Nichts geworfen.

Also habe ich mit Hilfe von Partikeln eine Eiskugel hergestellt, die als Wurfpunkt für den Strahl dienen konnte:

Schließlich brauchten wir Teilchen entlang des Strahls, um ihn in den Rest des Gebiets zu integrieren.

Der zweite Teil ist kürzer, aber schwieriger. Um den Haupteffekt zu vervollständigen, mussten wir in der Lage sein, zwischen zwei Texturen - einem nicht gefrorenen und einem gefrorenen Boden - zu lerpen, allerdings in einem radialen Winkel, der der Flugbahn und der Geschwindigkeit des Strahls folgt.

Um die Geschwindigkeit anzupassen, haben wir ein reguläres Skript verwendet, um die Geschwindigkeit des Balkens über eine Variable von 0 bis 1 zu steuern, d. h. wie stark der Boden entsprechend der aktuellen Drehung des Balkens eingefroren werden soll. Um die Texturen zu lerpen, brauchten wir einen kurzen Shader. Schauen Sie sich an, wie wir den Shader in zwei Teile geteilt haben, um einen radialen Farbverlauf und tatsächliches Lerping zu erhalten.

Nachfolgend sehen Sie die Formel zur Berechnung des radialen Gradienten, die die UV-Position berücksichtigt und genau von 0 bis 1 geht. Dadurch wird die Bewegung des Strahls mit dem eingefrorenen Wert synchronisiert.

So sieht es vor Ort aus:

Um die Szene zu vervollständigen, fügten wir alles zusammen und erzielten einen coolen Effekt, der sowohl als Übergang zur Endphase als auch als einer der Angriffe des Bosses dient.

Nachdem alles fertig war, gab Haakon Davidsen, der Komponist des Spiels, dem Ganzen den letzten Schliff - atemberaubende Musik, die die Spieler die "Hitze" der Schlacht spüren lässt. Sie können es hier hören. Und natürlich hat eine Synchronsprecherin - Breanna MacDowall - Hailga eine tolle Stimme verliehen.

Wir hoffen, dass Ihnen dieser Blog gefallen hat!

Erleben Sie Hailgas Bosskampf selbst, wenn Sie Evil Wizard auf Steam oder Xbox ausprobieren - und bleiben Sie dran, wenn das Spiel auf noch mehr Plattformen erscheint. Lesen Sie hier weitere Made with Unity Geschichten direkt von den Entwicklern.