Wie Subcult Joint mehr als 2.000 Sprite Sheets und über 10.000 2D Lichter in Cookie Cutter verwaltet hat

Feb 22, 2024|11:00 Minuten
Cookie Cutter von Subcult Joint – Schlüsselgrafik mit Kirsche

Erfahren Sie mehr über ihre 2D Tools und das letzte Upgrade der Unity Version, das neue Möglichkeiten für diesen bahnbrechenden Prügel eröffnet hat.

Die Herausforderung:

Optimierung hochauflösender Assets und Beleuchtung für die Leistung auf mehreren Plattformen

Projektmitarbeiter:

15

Plattformen:

PC, PlayStation®5, Xbox Series X|S

Standort:

Brighton, U.K.

Wie zeigt ein kleines Team plattformübergreifend handgezeichnete Animationen in seinem besten Licht? Subcult Joint arbeitete sechs Jahre lang an Cookie Cutter, das Tausende von hochauflösenden Assets umfasst, die mit traditionellen Animationstechniken erstellt und in Unity optimiert wurden. Das Studio musste scharfe Grafiken mit flottem Gameplay ausbalancieren und nutzte 2D Lights, um seiner Grafik und seinem erkundungsorientierten Spieldesign Tiefe zu verleihen.

Lesen Sie weiter, um zu erfahren, wie sie diese Vision erreicht haben – und die Überraschungsänderung in letzter Minute, die ihnen geholfen hat, ihre Beleuchtungseinrichtung auf ein ganz neues Niveau zu bringen.

Kirsche entweidet einen Roboterfeind

Cookie-Ausstecher von Subcult Joint

Der Grafiker, Animator, Unity Learn-Lehrer und Gründer von Subcult Joint, Stefano Guglielmana, begann 2018 mit der Arbeit an Cookie Cutter. Er wurde von einem abgelehnten Charakter aus einem früheren Unity Projekt inspiriert: Cherry, ein hart sprechender Android. „Ich war in ihr Design verliebt, also begann ich, Animationen für sie zu erstellen“, sagt er. Stefano hatte eine klare Vision für das angeschlagene Metroidvania-Gameplay von Cookie Cutter, brauchte dafür aber Unterstützung von einem Entwickler. Nachdem er sich die Finanzierung gesichert hatte, engagierte er den Programmierer Francesco Bizzini und eine Reihe von Grafikern und Designern für die Zusammenarbeit an dem Projekt.

Die Ergebnisse:

• Verkaufte 60.000 Exemplare und generierte 1.200.000 USD innerhalb eines Monats nach der Veröffentlichung

• Einfache Verwaltung von über 2.000 Sprite Sheets und über 50 Sprite Atlasse

• Beleuchtet das Spiel mit über 10.000 2D-Beleuchtung

• Erfolgreiches Upgrade auf Unity 2022 LTS mitten im Projekt

Trailer: Cookie-Ausstecher von Subcult Joint

Verpacken des Inhalts

Die handgezeichneten Grafiken von Cookie Cutter sind ein wichtiges Verkaufsargument. Stefano wusste, dass die Erstellung kompliziert sein würde, aber dieser zusätzliche Aufwand würde sich auszahlen. „Guck mal, was uns in Videospiele verliebt“, sagt er. „Bei Subcult Joint bewundern wir die Meister von Studio Ghibli und Disney. So weit sind wir noch nicht, aber mit Cookie Cutter wollten wir unsere Animationsfähigkeiten verbessern und ein wirklich cooles Spiel entwickeln.“

Dieses Projekt ist äußerst ambitioniert für ein kleines Team. Die meisten Grafik-Assets (über 1.000 Hintergründe, Sprites, Animationen und Partikeleffekte) sind visuell komplex und werden mühsam mit traditionellen Animationstechniken erstellt. Zwischen dem Spielercharakter (Cherry) und NPCs (27 Standardgegnertypen und fünf gigantische Bosse) hat jeder Charakter in Cookie Cutter 20-40 Animationen. Jede dieser individuellen Animationen kann zwischen acht und 48 Stunden dauern. Verschiedene Grafiker setzten auf ein paar verschiedene DCCs, aber Stefano schuf die meisten Assets in Adobe Photoshop.

Sobald Stefano eine Illustration fertiggestellt hatte, wandelte er sie mit dem PSD Importer in eine 8K-Textur um, bevor er sie im Editor optimierte, um Probleme mit dem Videospeicherüberlauf zu vermeiden. Durch den intelligenten Einsatz von Texturimporteinstellungen konnte die Texturgröße pro Plattform reduziert und durch das Befolgen von Best Practices wie der Macht von zwei konnten weitere Optimierungen erreicht werden.

Cookie Cutter-Animationen im Unity Editor geöffnet

Ein Blick in den Editor auf die verschiedenen Animationszustände von Cherry. Subcult Joint hat viel Zeit damit verbracht, an Animationsübergängen zu arbeiten, um ein reibungsloses Gameplay zu gewährleisten.

„Nachdem ich meine Arbeit in Photoshop beendet hatte, habe ich meine Spritesheets manuell erstellt, indem ich die Animationszellen einzeln in eine neue Datei eingefügt habe, immer in einem Vielfachen von 512 x 512, nach der Zweierregel in Unity“, sagt Stefano. „Von da an machte es der Sprite Sheet Editor von Unity einfach, das Blatt zu schneiden oder andere Tricks auszuführen, indem der Drehpunkt oder das Blattpixel pro Frame bewegt wurde.“ Diese Workflows stellten sicher, dass die Grafiken von Cookie Cutter plattformübergreifend mit minimalen Leistungsproblemen optimiert wurden.

Am Ende des Projekts hatte Subcult Joint mehr als 2.000 Sprite Sheets in über 50 Sprite Atlasse verpackt und nach Charakteren geordnet. „Sprite Atlass hat es super einfach gemacht, das Spiel auf die verschiedenen Zielkonsolen zu exportieren und dabei eine solide Framerate beizubehalten“, sagt Stefano. „Wir konzentrieren uns ganz darauf, 60 FPS zu erzeugen, um das Gameplay und die Gesamtleistung reibungslos wie Butter zu halten. Dadurch wurde die Speichernutzung auf erstaunliche Weise optimiert und die Ladezeiten noch schneller.“

Cherry überfährt einen Feind mit ihrem Motorradangriff

Cookie-Ausstecher von Subcult Joint

Anpassen des Gameplays

Stefano wollte die üblichen Fallstricke vermeiden, in die andere animierte Spiele geraten sind. „Spiele mit vielen Animationen können ungeschickt sein. Manchmal will der Animationsdesigner flexibel sein und das Gameplay wird dadurch bestraft“, erklärt er. „Mit Cookie Cutter waren wir genauso aufmerksam auf das Gameplay, sodass sich das Spiel genauso reibungslos anfühlt wie die Animationen, wenn man den Controller in der Hand hat.“

In diesem Sinne brauchte er eine Möglichkeit, im Editor zu arbeiten und das Gameplay schnell zu optimieren, ohne das Risiko einzugehen, das Projekt zu sprengen. Dies führte zu einer der größten technischen Hürden auf der Programmierseite: Aufbau eines flexiblen Systems in Unity, das mit schlechten Codeeingriffen funktioniert.

„Mein Ziel war es, den Designern eine Möglichkeit zu geben, jeden Aspekt des Spiels direkt aus dem Editor heraus anzupassen“, sagt er. Dank der integrierten Erweiterbarkeit von Unity konnte Francesco seine eigenen Anpassungen hinzufügen, um die Wissenslücke zwischen ihm und weniger technischen Grafikern im Team zu überbrücken.

Cherrys Kampffähigkeiten

Cookie-Ausstecher von Subcult Joint

Um druckvolles Gameplay und brutale Action-Combos zu ermöglichen, implementierte Francesco das visuelle Tool ActionGraph eines Drittanbieters, um Finite-State-Maschinen in Unity modular zu erstellen und zu strukturieren. Wenn die Sprites einer Animation geladen werden, ermöglicht ActionGraph es, jedem Frame eine Gameplay-Logik hinzuzufügen, sodass Grafiker Einstellungen wie Collider oder Schadenszahlen im Handumdrehen anpassen können. Stefano kann beispielsweise ActionGraph verwenden, um einem Angriff eine Hitbox hinzuzufügen und ihn für bestimmte Frames zu aktivieren, Sprungzähler zu aktivieren und zu deaktivieren, Kampfressourcen zu generieren und auszugeben usw. – ohne einen Programmierer einzubeziehen.

Francesco programmierte auch eine Reihe von eigenen Editor-Anpassungen, damit mehr von Subcult Joints künstlerorientiertem Team zu dem Projekt beitragen konnten. UpWire basiert auf dem xNode-Visualisierungssystem und ermöglicht es Grafikern, sowohl menschliche als auch KI-Eingaben einfach zu verwalten, Collider zu bearbeiten, visuelle Effekte zu bestimmten Animationsknoten hinzuzufügen und vieles mehr.

Upwire für die Verwaltung von Eingaben, Collidern und VFX

Cookie Cutters Graph-Combo-System – Subcult Joint kann von hier aus Hitboxen und Parameter anpassen, um Angriffe zu erstellen, die sich verketten, visuelle Effekte wie Kamera-Rütteleffekte hinzufügen und anpassen, wie Feinde auf Angriffe reagieren.

„Ich habe ihn für einen echten Kampfeditor entwickelt“, erklärt er. „Es verarbeitet alle Spielvariablen, daher können bestimmte Bewegungen nur ausgeführt werden, wenn der Spieler diese Fähigkeit, Waffe oder das Upgrade freigeschaltet hat und sich in der richtigen Position befindet – zum Beispiel Luftangriffe gegen Bodenangriffe.“ UpWire verarbeitet auch Einstellungen wie Physikkraft, Positionsübersetzung und Körperrotation, sodass Grafiker einfacher mit Kampfmechaniken experimentieren können.

Boss Sprite Sheet von Cookie Cutter

Die Graph-Combo für einen Boss-Kampf. Hier kann Subcult Joint Faktoren wie die Stärke, Richtung und Abstoßungswerte der Angriffstrefferboxen anpassen oder anpassen, wie der Boss auf Angriffe der verschiedenen Waffentypen von Cherry reagiert.

Timeline EZ Events, ein weiteres benutzerdefiniertes Tool von Francesco, ermöglicht es Designern, Nachrichten direkt im Editor zu senden und Funktionen aufzurufen, ohne die Parameter einzuschränken, einschließlich Szenenobjekte, und einem GameObject mehrere Funktionen hinzuzufügen. Beispielsweise kann das Team einen Hebel erstellen, der eine Tür entriegelt, wenn sie gezogen wird, und gleichzeitig eine Markierung für „verriegelte Tür“ auf der Karte und Minimap verstecken.

Timeline EZ-Veranstaltungen

Subcult Joint nutzte Timeline EZ Events, um Cutscenes von Cookie Cutter zu erstellen. Dieses Tool ermöglicht es ihnen, filmische Momente zu schaffen, indem sie Charakteranimationen, Kamerabewegungen, Audio- und visuelle Effekte sequenzieren.

Um Designern bei der Arbeit an der Minimap von Cookie Cutter zu helfen – ein wichtiger Punkt, um in jedem erkundungsorientierten Spiel richtig zu funktionieren – hat Francesco EzMiniMapPro entwickelt. „Das wird für die Erstellung von Karten für Spielbereiche verwendet und bietet einige nützliche Anpassungen und Optimierungen für die Bildgenerierung“, sagt Francesco. „In Laufzeitumgebung unterstützt es animierte Overlay-Marker und automatische Erkundungsmasken, die auf dem basieren, was die Kamera sieht. Die Maske kann über SaveGame geschrieben und wiederhergestellt werden.“

Die Erstellung und Implementierung dieser Anpassungen kostete Arbeit, aber sie ermöglichte dem Team kreative Freiheit, so dass alle bei Subcult Joint einen Platz am Tisch für das Design, die Mechaniken und die Balance im Gameplay von Cookie Cutter erhielten.

EzMinimapPro

Mit EzMiniMapPro konnte Subcult Joint die gesamte Karte, die sie im Editor erstellt hatten, erfassen und das Bild in Photoshop exportieren. Dann konnte Stefano die generierte Karte bemalen, um sie dem visuellen Stil des Spiels anzupassen, bevor er sie zurück in Unity importierte.

Die Welt gestalten

Die riesige Welt von Cookie Cutter, die Megastruktur, bietet neun Bereiche, die es zu erkunden gilt. Sobald die Konzeptzeichnung eines Bereichs fertiggestellt war, graute der Leveldesigner von Subcult Joint, Gabriel Raymond Roy, jeden Bereich ein, um ein Labyrinth zu erstellen, das die Spieler entdecken konnten.

„Ein guter Leveldesigner weiß, wie man primäre und sekundäre Pfade erstellt, die unterhaltsam zu erkunden und auch nachzuvollziehen sind“, sagt Stefano. „Jede Sackgasse sollte eine Art Belohnung für den Spieler haben, und jeder offene Bereich sollte Feindbegegnungen haben, damit die Spieler Materialien bewirtschaften können.“

Nachdem ein Bereich mit einem Grauen Kasten versehen war, kleideten Stefano und die Designer die Szene mit Umgebungsdetails ein und ordneten die handgezeichneten Sprites in Schichten über vier Punkte auf der Z-Achse an. Cookie Cutter verwendet eine perspektivische Kameraansicht ohne codierte Parallaxe, sodass der Spieler bei einer Bewegung „versetzte“ Elemente perspektivisch sehen kann. Cherry steht auf dem „Standardpunkt“ neben interagierbaren GameObjects wie Feinden, Gegenständen und Plattformen, während nicht-interaktive Vordergrund-, Hintergrund- und „Fern“-Elemente der Szenenansicht simulierte Tiefe verleihen.

Cookie Cutters perspektivische Kameraansicht

Beleuchtung der Megastruktur

„Wir haben versucht, jedem Bereich eine einzigartige Persönlichkeit zu verleihen, aber mit dem Cyberpunk-Setting und unserer Liebe zu Bügeln und Metallfabriken weiß ich nicht, wie erfolgreich wir waren“, scherzt Stefano.

Um jeder Zone eine eigene visuelle Würze zu verleihen, nutzte Subcult Joint in großem Umfang Spot- und Freeform 2D Lights in URP. Die Welt von Cookie Cutter wird von mehr als 10.000 von ihnen beleuchtet. „Jedes Licht im Spiel beleuchtet unsere Sprites in Echtzeit und erzeugt so ein Gefühl der Dichte und des Zusammenhalts zwischen Charakteren, Animationen und Umgebungen“, sagt Stefano. „An dunklen Orten werden Charaktere schattiert und in Licht getaucht, wenn sie in Außenbereichen den gesättigten, kontaminierten Oberlichtern ausgesetzt sind. Ich liebe diese Details so sehr!“

Cookie Cutters weite Welt, die Megastruktur

Cookie-Ausstecher von Subcult Joint

Subcult Joint nutzte die 2D-Beleuchtung von Unity ohne besonderes Management und verwendete sie auf denselben Z-Achsen-Ebenen wie die Umgebungs-Sprites. „Standardmäßige 2D-Beleuchtung beleuchtet Ihren Gameplay-Bereich hervorragend und es ist großartig, entscheiden zu können, welche Ebenen sie beeinflussen können“, erklärt Stefano. „Wir wollten, dass die Standardebene für die Spieler immer klar ist, damit sie verstehen, wohin sie gehen können und wohin nicht. Dann haben wir den Hintergrund, den Vordergrund und die entfernten Ebenen beleuchtet.“

Die auffällige 2D Beleuchtung von Cookie Cutter spielt eine wichtige Rolle im gesamten Spieldesign. Als Metroidvania ist es ein erkundungsorientierter Titel. Die Beleuchtung dient dazu, dem Spieler Umgebungshinweise zu geben. „Beleuchtung erzählt eine Geschichte – sie zeigt dem Spieler, wohin er gehen soll, fährt ihn in den Hauptpfad oder versteckt optionale Nebenpfade“, erklärt Stefano.

Flackernde Lichter werden verwendet, um die Blicke des Spielers auf sich zu ziehen. Stefano erzählt, wie er diesen Effekt geschaffen hat: „Das Schöne an der 2D-Beleuchtung ist, dass man sie animieren kann“, sagt er. „Das Erstellen flackernder Lichter ist supereinfach: Man wählt das Licht aus, geht zum Animationsfenster, erstellt eine weitere Animation und spielt mit der Intensität – 0, 9, 0, 9 – und kopiert diese Animation auf andere Lichter, wenn man den gleichen Effekt anderswo erzeugen möchte.“

2D Animationen, Sprite Sheets, Beleuchtung und SFX in Cookie Cutter

Bonusvorteile mit einem Last-Minute-Versionsupgrade freischalten

Gegen Ende der Entwicklung von Cookie Cutter wurden Probleme mit dem Videospeicherüberlauf zu einem Hindernis für den PlayStation 5-Build. Subcult Joint erkannte, dass sie ihre Unity Version aktualisieren mussten, um das Problem zu beheben.

Dies so kurz vor der Veröffentlichung zu tun, war nicht ideal, aber das riesige Publikum von PlayStation nicht zu erreichen – also krempelten sie die Ärmel hoch und machten sich an die Arbeit, das Projekt auf Unity 2022 LTS zu verschieben, die damals aktuellste Veröffentlichung. Dadurch hatten sie Zugriff auf neue Profilerstellungs- und Debugging-Tools wie den aktualisierten Memory Profiler.

„Die neue Snapshot-Vergleichsfunktion im Memory-Profiler hat uns geholfen, die anhaltenden Probleme mit dem Videospeicherüberlauf zu identifizieren und zu beheben“, sagt Francesco. „2022 LTS ist auch schneller für den Import von Texturen, und das Upgrade hat unser Spiel letztendlich viel stabiler gemacht.“

Cherry regeneriert HP mit ihren Void-Kräften

Cookie-Ausstecher von Subcult Joint

Wie sich herausstellte, konnten sie durch den Umstieg auf die neueste Unity Version dem Cookie Cutter eine letzte Schicht visuellen Glanz verleihen, die sonst nicht möglich gewesen wäre, da sie nun Zugang zum produktionsreifen 2D Lights System hatten. Das bedeutete, dass die tausenden zuvor experimentellen 2D-Beleuchtungen des Spiels auf der Grundlage der neuen Parameter individuell überprüft und repariert werden mussten – ein Prozess, der glücklicherweise mit neuen Funktionen schneller möglich war.

Mit den aktualisierten Sprite Atlas von 2022 LTS konnte Subcult Joint Hunderte von handgezeichneten Animationen einfacher und effizienter auf verschiedene Zielplattformen bringen. Und die Vollversion der 2D Lights des URP trug dazu bei, den Umgebungen noch mehr Tiefe und Stimmung zu verleihen.

„Mit dem neuen 2D Light Explorer haben wir jedes Licht ausgewählt und manuell angepasst“, erklärt Stefano. „Wir hatten hauptsächlich Spot- und Freiform-Beleuchtung verwendet, und 2022 LTS hatte eine aktualisierte Abklingfunktion für Freiform-Beleuchtung, die viel besser aussah als die alte. Es war eine Menge Arbeit, aber wir konnten die umliegenden Probleme beheben und das Spiel noch weiter verbessern.“

Das Debütspiel Cookie Cutter von Subcult Joint ist ein Beispiel für die Magie, die auftritt, wenn Grafiker und Programmierer im Lockstep arbeiten können. Dieses kleine Team entwickelte ein visuell anspruchsvolles und erfolgreiches Metroidvania-Spiel, das sich im ersten Monat mehr als 60.000 Mal verkaufte und an seiner ursprünglichen Vision festhalten konnte, ohne Kompromisse bei Grafik oder Gameplay einzugehen.

Das Upgrade auf die neueste Unity Version half Subcult Joint nicht nur, die noch verbleibenden technischen Herausforderungen vor der Veröffentlichung zu lösen, sondern ermöglichte es ihnen, die Plattformreichweite von Cookie Cutter zu maximieren und das Spiel voll auszuschöpfen.

Cherry aus Cookie Cutter fährt ihr Motorrad

Cookie-Ausstecher von Subcult Joint

Erweiterte Möglichkeiten mit Unity 6

Bei Unity 6 geht es voll und ganz darum, Ihnen eine schnelle und einfache Spieleentwicklung zu ermöglichen, unabhängig davon, wo Ihre Spieler sind. Laden Sie die neueste Unity Version im Unity Hub herunter.