Case studies

Wie Subcult Joint 2.000+ Sprite Sheets und 10.000+ 2D Lights in Cookie Cutter verwaltet hat

Feb 22, 2024|11 Minuten
Keksausstecher von Subcult Joint - Key Art mit Kirsche
Diese Seite wurde maschinell übersetzt. Um die Originalversion zu sehen, damit Sie die Genauigkeit anhand der Quelle prüfen können,

Erfahren Sie mehr über die 2D-Tools und das letzte Upgrade der Unity LTS-Version, das neue Möglichkeiten für dieses bahnbrechende Beat-em-up eröffnete.

Die Herausforderung:
Optimierung von hochauflösenden 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 kann ein kleines Team handgezeichnete Animationen plattformübergreifend ins beste Licht rücken? Subcult Joint hat sechs Jahre lang an Cookie Cutter gearbeitet, das Tausende von hochauflösenden Assets enthält, die mit traditionellen Animationstechniken erstellt und in Unity optimiert wurden. Das Studio musste ein Gleichgewicht zwischen gestochen scharfer Grafik und rasantem Gameplay finden und nutzte 2D Lights ausgiebig, um der Grafik und dem auf Erkundung ausgerichteten Spieldesign mehr Tiefe zu verleihen.

Lesen Sie weiter, um zu erfahren, wie sie diese Vision erreicht haben - und welche überraschende Änderung sie in letzter Minute vorgenommen haben, die ihnen schnellere Asset-Management-Funktionen ermöglichte und ihre Beleuchtungseinrichtung auf die nächste Stufe brachte.

Cherry, die einen Roboterfeind ausweidet
Keksausstecher von Subcult Joint

Künstler, Animator, Unity Learn Ausbilder und Subcult Joint Gründer 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 redseliger Androide. "Ich war verliebt in ihr Design und begann, Animationen für sie zu erstellen", sagt er. Stefano hatte eine klare Vision für das Beat-em-up-Metroidvania-Gameplay von Cookie Cutter, brauchte aber die Unterstützung eines Entwicklers, um es zu realisieren. Nachdem er die Finanzierung gesichert hatte, stellte er den Programmierer Francesco Bizzini und eine Reihe von Künstlern und Designern ein, die an dem Projekt mitarbeiteten.

Die Ergebnisse:

- 60.000 verkaufte Exemplare und 1.200.000 Dollar Umsatz innerhalb eines Monats nach der Markteinführung

- Einfache Verwaltung von über 2.000 Sprite Sheets und über 50 Sprite Atlanten

- Beleuchtet das Spiel mit über 10.000 2D-Lichtern

- Erfolgreiches Upgrade auf Unity 2022 LTS mitten im Projekt

Verpackung des Inhalts

Die handgezeichnete Grafik von Cookie Cutterist ein wichtiges Verkaufsargument. Stefano wusste, dass ihre Herstellung kompliziert sein würde, aber der zusätzliche Aufwand würde sich auszahlen. "Die Augenweide ist das, was uns in Videospiele verliebt macht", sagt er. "Bei Subcult Joint bewundern wir die Meister von Studio Ghibli und Disney. Wir sind nicht auf diesem Niveau, aber mit Cookie Cutter wollten wir unsere Animationsfähigkeiten unter Beweis stellen und ein wirklich cooles Spiel entwickeln."

Dieses Projekt ist für ein kleines Team äußerst ehrgeizig. Der Großteil der künstlerischen Elemente (über 1.000 Hintergründe, Sprites, Animationen und Partikeleffekte) ist visuell komplex und wurde in mühevoller Kleinarbeit mit traditionellen Animationstechniken erstellt. Mit dem Spielercharakter (Cherry) und den NSCs (27 Standardgegnertypen und fünf gigantische Bosse) hat jeder Charakter in Cookie Cutter 20-40 Animationen. Jede dieser einzelnen Animationen kann zwischen acht und 48 Stunden in Anspruch nehmen. Verschiedene Künstler haben sich auf verschiedene DCCs verlassen, aber Stefano hat den Großteil der Assets in Adobe Photoshop erstellt.

Sobald Stefano eine Illustration fertiggestellt hatte, konvertierte er sie mit dem PSD-Importer in eine 8K-Textur, bevor er sie im Editor optimierte, um Probleme mit dem Videospeicherüberlauf zu vermeiden. Die intelligente Verwendung von Texturimporteinstellungen half dabei, die Texturgröße pro Plattform zu reduzieren, und die Anwendung bewährter Verfahren wie der Zweierpotenz führte zu weiteren Optimierungen.

Keksausstecher-Animationen werden im Unity-Editor geöffnet
Ein Blick in den Editor auf die verschiedenen Animationszustände von Cherry. Subcult Joint hat viel Zeit damit verbracht, die Animationsübergänge zu verbessern, um einen reibungslosen Spielablauf zu gewährleisten.

"Nachdem ich meine Arbeit in Photoshop beendet hatte, erstellte ich meine Sprite-Sheets manuell, indem ich die Animationszellen eine nach der anderen in eine neue Datei platzierte, immer in einem Vielfachen von 512 x 512, gemäß der Potenz von zwei in Unity", sagt Stefano. "Von dort aus war es mit dem Sprite Sheet Editor von Unity ein Leichtes, das Blatt zu zerschneiden oder andere Tricks anzuwenden, indem man den Pivot oder das Blattpixel pro Frame bewegt." Diese Arbeitsabläufe stellten sicher, dass die visuelle Darstellung von Cookie Cutterauf allen Plattformen mit minimalen Leistungsproblemen optimiert wurde.

Am Ende des Projekts hatte Subcult Joint mehr als 2.000 Sprite Sheets in mehr als 50 Sprite Atlanten gepackt und sie nach Charakteren geordnet. "Mit Sprite Atlases war es super einfach, das Spiel auf die verschiedenen Zielkonsolen zu exportieren und dabei eine solide Framerate beizubehalten", sagt Stefano. "Wir haben uns darauf konzentriert, 60 FPS zu erreichen, um das Gameplay und die Gesamtleistung so flüssig wie möglich zu halten. Dadurch wurde die Speichernutzung wirklich auf erstaunliche Weise optimiert und die Ladezeiten wurden noch schneller."

Cherry wirft einen Gegner mit ihrem Motorrad um
Keksausstecher von Subcult Joint

Spielverlauf anpassen

Stefano wollte die üblichen Fallstricke vermeiden, die er bei anderen Spielen mit Animationsschwerpunkt gesehen hat. "Spiele mit vielen Animationen können klobig sein. Manchmal will sich der Animator verbiegen, und das geht zu Lasten des Gameplays", erklärt er. "Bei Cookie Cutter haben wir dem Gameplay die gleiche Aufmerksamkeit gewidmet, so dass sich das Spiel genauso flüssig anfühlt wie die Animationen, wenn man den Controller in den Händen hält."

Aus diesem Grund brauchte er eine Möglichkeit, im Editor zu arbeiten und das Gameplay schnell zu ändern, ohne das Projekt zu gefährden. Dies führte zu dem, was Francesco als eine der größten technischen Hürden bei der Programmierung bezeichnet: Aufbau eines flexiblen Systems in Unity, das mit wenig Codeeingriff funktioniert.

"Mein Ziel war es, den Designern eine Möglichkeit zu geben, jeden Aspekt des Spiels direkt im Editor anzupassen", sagt er. Dank der eingebauten Erweiterbarkeit von Unity konnte Francesco seine eigenen Anpassungen hinzufügen, um die Wissenslücke zwischen ihm und den technisch weniger versierten Künstlern im Team zu schließen.

Cherrys Kampffähigkeiten
Keksausstecher von Subcult Joint

Um ein druckvolles Gameplay und brutale Action-Combos zu ermöglichen, implementierte Francesco das visuelle Tool ActionGraph eines Drittanbieters, um in Unity modulare Zustandsautomaten zu erstellen und zu strukturieren. Wenn die Sprites einer Animation geladen werden, ermöglicht ActionGraph das Hinzufügen von Gameplay-Logik zu jedem Frame, so dass die Künstler Einstellungen wie Kollider oder Schadenszahlen spontan ändern können. Stefano kann mit ActionGraph zum Beispiel eine Hitbox zu einem Angriff hinzufügen und sie so einstellen, dass sie in bestimmten Frames aktiv ist, Sprungzähler aktivieren und deaktivieren, die Erzeugung und Ausgabe von Kampfressourcen auslösen und so weiter - ohne einen Programmierer einzubeziehen.

Francesco programmierte auch einige seiner eigenen Editor-Anpassungen, damit mehr Mitglieder des Subcult-Joint-Teams an dem Projekt mitarbeiten konnten. UpWire basiert auf dem xNode-Visualisierungssystem und ermöglicht es Künstlern, sowohl menschliche als auch KI-Eingaben einfach zu verwalten, Kollider zu bearbeiten, visuelle Effekte zu bestimmten Animationsknoten hinzuzufügen und vieles mehr.

Upwire für die Verwaltung von Eingaben, Kollidern und VFX
Cookie Cutter's Graph Combo System - von hier aus kann Subcult Joint Hitboxen und Parameter anpassen, um Angriffe zu erstellen, die sich aneinanderreihen, visuelle Effekte wie Kamerawackeln hinzufügen und die Reaktion der Gegner auf Angriffe anpassen.

"Ich habe es so gebaut, dass es ein echter Kampfeditor ist", erklärt er. "Es behandelt alle Spielvariablen, so dass bestimmte Bewegungen nur ausgeführt werden können, wenn der Spieler die entsprechende Fähigkeit, Waffe oder Aufrüstung freigeschaltet hat und sich in der richtigen Position befindet - zum Beispiel Luftangriffe gegenüber Bodenangriffen." UpWire übernimmt auch Einstellungen wie physikalische Kraft, Positionsverschiebung und Körperdrehung, so dass Künstler leichter mit Kampfmechaniken experimentieren können.

Boss Sprite Sheet von Cookie Cutter
Die Graph Combo für einen Bosskampf. Hier kann Subcult Joint Faktoren wie die Stärke, die Richtung und die Abstoßungswerte der Angriffshitboxen anpassen oder bestimmen, wie der Boss auf Angriffe von Cherrys verschiedenen Waffentypen reagiert.

Timeline EZ Events, ein weiteres von Francesco entwickeltes Tool, ermöglicht es Designern, Nachrichten zu senden und Funktionen direkt im Editor aufzurufen, und zwar mit fast unbegrenzten Parametern, einschließlich Szenenobjekten, und einem GameObject mehrere Funktionen hinzuzufügen. So kann das Team beispielsweise einen Hebel erstellen, der eine Tür öffnet, wenn er gezogen wird, und gleichzeitig eine Markierung für "verschlossene Tür" auf der Karte und der Minimap verstecken.

Timeline EZ-Ereignisse
Subcult Joint hat Timeline EZ Events verwendet, um die Zwischensequenzen von Cookie Cutter zu erstellen. Mit diesem Tool können sie filmische Momente schaffen, indem sie Charakteranimationen, Kamerabewegungen, Audio- und visuelle Effekte aufeinander abstimmen.

Um den Designern bei der Arbeit an der Minimap von Cookie Cutterzu helfen - ein entscheidender Punkt, der in jedem auf Erkundung ausgerichteten Spiel richtig gemacht werden muss - hat Francesco EzMiniMapPro entwickelt. "Diese wird für die Erstellung von Karten für Spielbereiche verwendet und bietet einige nützliche Anpassungen und Optimierungen für die Bilderzeugung", sagt Francesco. "Zur Laufzeit unterstützt es animierte Overlay-Markierungen und automatische Erkundungsmasken auf der Grundlage dessen, was die Kamera sieht. Die Maske kann über SaveGame geschrieben und wiederhergestellt werden."

Diese Anpassungen zu erstellen und zu implementieren, hat viel Arbeit gekostet, aber es hat dem gesamten Team kreative Freiheiten verschafft und jedem bei Subcult Joint einen Platz am Tisch für das Design, die Mechanik und die Spielbalance von Cookie Cuttergegeben.

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

Die Gestaltung der Welt

Die riesige Welt von Cookie Cutter, die Megastruktur, umfasst neun Bereiche, die es zu erkunden gilt. Sobald die Konzeptgrafik für einen Bereich fertiggestellt war, hat der Leveldesigner von Subcult Joint, Gabriel Raymond Roy, jeden Bereich in Graustufen gezeichnet, um ein Labyrinth zu schaffen, das die Spieler erkunden können.

"Ein guter Leveldesigner versteht es, primäre und sekundäre Pfade zu schaffen, die unterhaltsam zu erkunden und auch zurückzuverfolgen sind", sagt Stefano. "Jede Sackgasse sollte eine Art von Belohnung für den Spieler bereithalten, und in jedem offenen Gebiet sollte es Feindbegegnungen geben, damit die Spieler Materialien farmen können."

Sobald ein Bereich grau umrandet war, versahen Stefano und die Designer die Szene mit Umgebungsdetails und ordneten die handgezeichneten Sprites in Schichten über vier Punkte auf der Z-Achse an. Cookie Cutter verwendet eine perspektivische Kameraansicht ohne kodierte Parallaxe, so dass der Spieler, wenn er sich bewegt, "fehlplatzierte" Elemente in der Perspektive sehen kann. Cherry steht auf dem "Standard"-Punkt neben interaktiven GameObjects wie Gegnern, Gegenständen und Plattformen, während nicht-interaktive Vordergrund-, Hintergrund- und "weit entfernte" Elemente der Szenenansicht simulierte Tiefe verleihen.

Beleuchtung der Megastruktur

"Wir haben versucht, jedem Bereich eine eigene Persönlichkeit zu geben, aber angesichts des Cyberpunk-Settings und unserer Vorliebe für Kleiderbügel und Metallfabriken bin ich mir nicht sicher, wie erfolgreich wir dabei waren", scherzt Stefano.

Um jeder Zone eine eigene visuelle Note zu verleihen, hat Subcult Joint in URP viel Gebrauch von Spot- und Freeform 2D-Lichtern gemacht. Die Welt von Cookie Cutterwird von mehr als 10.000 von ihnen erhellt. "Jedes Licht im Spiel beleuchtet unsere Sprites in Echtzeit, wodurch ein Gefühl der Dichte und des Zusammenhalts zwischen Charakteren, Animationen und den Umgebungen entsteht", sagt Stefano. "An dunklen Orten sind die Figuren schattiert, und in den Außenbereichen werden sie in Licht getaucht, wenn sie den gesättigten, kontaminierten Oberlichtern ausgesetzt sind. Ich liebe diese Details so sehr!"

Die ausgedehnte Welt von Cookie Cutter, die Megastruktur
Keksausstecher von Subcult Joint

Subcult Joint nutzte die 2D-Lichter von Unity sofort und ohne spezielles Management und wendete sie auf denselben Z-Achsen-Ebenen an wie die Umgebungs-Sprites. "Die standardmäßigen 2D-Lichter sind fantastisch, um den Spielbereich zu beleuchten, und es ist großartig, dass man entscheiden kann, welche Ebenen sie beeinflussen können", erklärt Stefano. "Wir wollten, dass die Standardebene für den Spieler immer klar ist, damit er weiß, wo er gehen kann und wo nicht. Dann fügten wir Lichter für den Hintergrund, den Vordergrund und die entfernten Ebenen hinzu.

Die auffällige 2D-Beleuchtung von Cookie Cutterspielt eine wichtige Rolle im Gesamtdesign des Spiels. Als Metroidvania ist es ein auf Erkundung ausgerichteter Titel. Die Beleuchtung wird verwendet, um dem Spieler Hinweise auf die Umgebung zu geben. "Die Beleuchtung erzählt eine Geschichte - sie zeigt dem Spieler, wohin er gehen soll, sie lenkt ihn auf den Hauptpfad oder verbirgt optionale Nebenpfade", erklärt Stefano.

Flackernde Lichter sollen die Aufmerksamkeit des Spielers auf sich ziehen. Stefano erzählt, wie er diesen Effekt erzielt hat: "Das Schöne an den 2D-Lichtern ist, dass man sie animieren kann", sagt er. "Flackernde Lichter zu erzeugen ist super einfach: Du wählst das Licht aus, gehst zum Animationsfenster, erstellst eine weitere Animation und spielst mit der Intensität - 0, 9, 0, 9 - und kopierst diese Animation auf andere Lichter, wenn du denselben Effekt an anderer Stelle erzeugen willst."

Freischaltung von Bonusvorteilen durch ein Versions-Upgrade in letzter Minute

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

Dies so kurz vor der Markteinführung zu tun, war zwar nicht ideal, aber das große PlayStation-Publikum nicht zu erreichen, war keine Option - also krempelte man die Ärmel hoch und machte sich an die Arbeit, um das Projekt auf 2022 LTS zu verschieben. Mit dieser Version des Langzeit-Supports erhielten sie Zugang zu neuen Profiling- und Debugging-Tools wie dem aktualisierten Memory Profiler.

"Die neue Snapshot-Vergleichsfunktion im Memory Profiler hat uns geholfen, die anhaltenden Probleme mit dem Überlauf des Videospeichers zu identifizieren und zu beheben", sagt Francesco. "2022 LTS ist auch schneller beim Importieren von Texturen, und das Upgrade hat unser Spiel am Ende viel stabiler gemacht."

Cherry regeneriert ihre HP mithilfe ihrer Void-Kräfte
Keksausstecher von Subcult Joint

Wie sich herausstellte, ermöglichte der Umstieg auf die neueste Unity-Version, Cookie Cutter einen letzten visuellen Schliff zu geben, der sonst nicht möglich gewesen wäre, da sie nun Zugriff auf das produktionsreife 2D-Lichtsystem hatten. Das bedeutete, dass Tausende von zuvor experimentellen 2D-Lichtern des Spiels einzeln überprüft und anhand der neuen Parameter korrigiert werden mussten - ein Prozess, der glücklicherweise durch neue Funktionen beschleunigt wurde.

Mit den aktualisierten Sprite Atlases von 2022 LTS konnte Subcult Joint Hunderte von handgezeichneten Animationen einfacher und effizienter auf verschiedene Zielplattformen übertragen. Und die Vollversion der 2D-Lichter des URPhat den Umgebungen noch mehr Tiefe und Stimmung verliehen.

"Wir haben den neuen 2D Light Explorer verwendet, um jedes Licht auszuwählen und die Einstellungen manuell vorzunehmen", erklärt Stefano. "Wir haben hauptsächlich Spot- und Freeform-Lichter verwendet, und 2022 LTS hatte tatsächlich eine aktualisierte Falloff-Funktion für Freeform-Lichter, die viel besser aussah als die alte. Es war eine Menge Arbeit, aber wir konnten kleinere Probleme beheben und das Spiel noch weiter verbessern.

Das Debüt-Spiel Cookie Cutter von Subcult Joint ist ein Beispiel für die Magie, die entsteht, wenn Künstler und Programmierer im Gleichschritt arbeiten können. Dieses kleine Team schuf ein visuell anspruchsvolles und erfolgreiches Metroidvania-Spiel, das sich im ersten Monat mehr als 60.000 Mal verkaufte, und sie waren in der Lage, an ihrer ursprünglichen Vision festzuhalten, ohne Kompromisse bei Grafik oder Gameplay einzugehen.

Das Upgrade auf 2022 LTS half Subcult Joint nicht nur dabei, die anhaltenden technischen Herausforderungen zu lösen, sondern ermöglichte es ihnen auch, die Reichweite von Cookie Cutterzu maximieren und das Spiel zu seinem vollen Potenzial zu bringen.

Cherry von Cookie Cutter fährt auf ihrem Motorrad
Keksausstecher von Subcult Joint

Schüren Sie Ihren Ehrgeiz mit Unity 2022 LTS

Unity 2022 LTS wurde durch jahrelanges Feedback und Benutzertests entwickelt und bietet stabile neue Funktionen und Verbesserungen, damit Sie mit der neuesten Technologie arbeiten können. Optimieren Sie Ihr Spiel für die neuesten Plattformen und liefern Sie hochwertige Grafiken, die auf allen Geräten funktionieren.

Erkunden Sie die Fallstudie

Füllen Sie dieses Formular aus, um Zugang zu den neuesten Autorengeschichten zu erhalten.