Wie PIGIAMA KASAMA 218 MB vom Webspiel Kasama abgeschnitten hat: Das Erwachen

Kasama: The Awakening ist ein episodisches, storygetriebenes, webbasiertes Abenteuerspiel, das von PIGIAMA KASAMA erstellt wurde. Um dieses Spiel für das Web zu erstellen, musste das Team die Leistung auf verschiedenen Geräten optimieren und gleichzeitig eine hohe visuelle Qualität beibehalten. Hier ist, wie sie ihre Vision zum Leben erweckt haben.

Wie liefert ein Studio ein visuell beeindruckendes und emotional fesselndes Erlebnis im Web?

Nach zwei Jahren, in denen sie Spiele für andere Marken entwickelt hatten, war das PIGIAMA KASAMA-Team zuversichtlich, dass ein originelles, erzählerisch getriebenes Spiel im Internet ein Publikum finden würde. Während Kasama: The Awakening begann als VR- und Desktop-Kampfspiel, sie beschlossen, das Spiel in ein episodisches Puzzle-Abenteuer zu adaptieren.

Um Kastania zu erleben, haben wir das Spiel unten eingebettet, damit Sie es in Desktop-Browsern genießen können. Für mobile Geräte überprüfen Sie bitte die App von Spatial.

Als langjährige Unity-Entwickler wollten die Studio-Gründer Matteo Fanchin und Paride Stella einen Plattformentwicklungs- und Startpartner finden, der ähnliche Prioritäten wie Freiheit der Kreation, hohe visuelle Treue, großartige Spielerlebnisse und Multiplattform-Unterstützung teilt.

Wir haben Spatial als die ultimative Plattform für nutzergenerierte Inhalte (UGC) gefunden. Durch die Kombination seiner Prozessvereinfachungskapazitäten und der Zugänglichkeit, die es den Spielern bietet, mit der Flexibilität, die wir beim Erstellen mit Unity haben, konnten wir die audio-, visuelle und erfahrungsmäßige Grenzen für ein Webspiel erweitern“, sagt Fanchin.

Das Spatial-Team spiegelt den Wert wider, den das PIGIAMA KASAMA-Team in die Zusammenarbeit eingebracht hat. Jake Steinerman, Leiter der Entwicklerbeziehungen, sagt: „Wir haben die Plattform so aufgebaut, dass Ersteller wirklich hochwertige Erlebnisse im Web, auf Mobilgeräten und in VR haben können.“ Als wir die frühen Versionen von Kasama sahen: Das Erwachen und andere Arbeiten, die das Team geleistet hat, wussten wir, dass wir dahinter stehen mussten."

Den Status quo herausfordern

Obwohl das PIGIAMA KASAMA-Team Kreativität, Fachwissen und Unterstützung von Unity und Spatial hat, brachte ihre Vision viele Herausforderungen mit sich. Eines der Hauptprobleme war die Optimierung des Spiels für die Leistung auf verschiedenen Geräten, während die hohe visuelle Qualität beibehalten wurde. „Die Einschränkungen von WebGL erforderten von uns, innovativ zu sein, wie wir Grafiken, Spielmechaniken und das gesamte Benutzererlebnis implementierten“, erklärt Stella.

Um ihre visuellen und Leistungsanforderungen zu erfüllen, mussten sie die Build-Größe komprimieren, ohne die Qualität zu beeinträchtigen. Sie wählten die Universal Render Pipeline (URP), Shader Graph, Unitys Animationssystem und die integrierte Animationskompression, um dies zu erreichen.

Die Ergebnisse

• Reduzierte den Texturspeicher des Spiels von 264 MB auf 140 MB
• Reduzieren Sie die Anzahl der Netzscheitelpunkte von 550.000 auf 351.000
• Verringert den Audiopuffer von 86 MB auf 9 MB
• Verkleinerte Sprite-Größe für die Benutzeroberfläche von 45 MB auf 28 MB
• Reduzierte die Anzahl der verwendeten einzigartigen Materialien von 75 auf 57
• Verbesserte Leistung von 4 FPS zu Beginn auf mindestens 30 FPS auf Geräten mit niedriger Leistung
• Sammelte über 80.000 Aufrufe in den ersten sieben Wochen nach dem Start.

Maximierung begrenzter Ressourcen

Ihr Designansatz bestand darin, von Anfang an sehr achtsam mit ihren Ressourcenbeschränkungen umzugehen, aber auch die Flexibilität und Bandbreite zu haben, die visuelle Treue nach eigenem Ermessen zu erhöhen oder zu verringern. Rechenleistung und Speicherbeschränkungen erwiesen sich als ihre größten Herausforderungen, und um die Leistung aufrechtzuerhalten, mussten sie die Auflösung einiger Texturen verringern. „Wir haben die hochwertigste Textur dort platziert, wo sie am sichtbarsten war“, sagt Stella.

Das Team nutzte die geringstmögliche Menge an Ressourcen und dieser Ansatz beeinflusste alles. Sie hielten die Polygone niedrig und die Texturgröße klein, um die Anzahl der Materialien so weit wie möglich zu begrenzen. Sie haben auch die UVs optimiert, zweidimensionale Texturkoordinaten, die mit den Scheitelpunktinformationen für eine Geometrie übereinstimmen.

„Da die Kamerabewegungen bekannt und sehr eingeschränkt sind, konnten wir ein aggressives Occlusion Culling auf alle Geometrien vor dem Texturierungsprozess durchführen, sodass jedes Polygon und jeder Pixel maximal genutzt wurde“, sagt Fanchin. „Dieser Prozess verhindert, dass Unity Rendering-Berechnungen für GameObjects durchführt, die vollständig aus dem Blickfeld verborgen sind.“

Animation war ein weiterer Bereich, in dem das Team die Größe reduzierte. Sie verwendeten den Humanoid-Animationstyp aus Unitys Animationssystem zusammen mit dem Mecanim-Animations-Retargeting-System. Zusätzlich half der eingebaute Animationskomprimierungsprozess von Unity ihnen, die Leistung zu optimieren, indem das Gesamtgewicht der Animationen im Projekt verringert wurde. Dies war besonders nützlich, um die Motion-Capture-Animationen für die Gesichtsdarstellung des Charakters zu reduzieren, die dazu neigen, übermäßig detailliert und schwer zu sein.

Ihr Licht finden

Gute Beleuchtung macht den entscheidenden Unterschied und ist in einem Webspiel schwer zu erreichen", sagt Stella, und das Team wollte sicherstellen, dass die Beleuchtungsqualität mit der restlichen Spieltreue übereinstimmt. Beleuchtung war auch entscheidend für die Spielmechanik. Das Team nutzte es, um Spannung zu erzeugen, die Bewegung der Spieler zu lenken und wichtige Bereiche oder Objekte im Spiel hervorzuheben. Dynamische Effekte betonten wichtige Momente und Übergänge in der Geschichte.

„Wir wollten so viel wie möglich gebackenes Licht verwenden." Dies ist eine Möglichkeit, den Eindruck von hochwertiger Beleuchtung auf Plattformen zu vermitteln, die normalerweise nicht dieses Maß an Detailtreue bieten", sagt Fanchin.

Eine der komplexesten Herausforderungen des Teams bestand darin, die Beleuchtung in der Umgebung ohne Szenenladen zu ändern und dynamische Lichtänderungen zu erzeugen, wenn die Lichter eingeschaltet werden. Sie verwendeten einen benutzerdefinierten Shader, der die Lichtkarten in Echtzeit manipulierte, um alles flach zu machen und die Illusion von dynamischem Licht zu erzeugen. Stella erklärt, dass es entscheidend ist, das Spieldesign und das Umweltdesign als einen ganzheitlichen Prozess zu betrachten, anstatt sie zu trennen, um dies zu erreichen. Jedes Element muss dem anderen dienen."

Sie verwendeten Shader Graph, um den benutzerdefinierten Shader zu entwickeln, der besonders nützlich während dessen war, was das Team als „die Albtraumsequenz“ bezeichnet. Es bedeckt die Karte mit schwarzem Schleim, während es gleichzeitig die Beleuchtung neutralisiert und die Umgebung in Schwarz-Weiß darstellt.

„Wenn der Spieler das Licht einschaltet, kehrt der Shader diesen Effekt um und erzeugt die Illusion, dass das Licht aktiviert wird und der schwarze Schleim aus dem beleuchteten Bereich entfernt wird“, sagt Fanchin.

Dieser benutzerdefinierte Shader war auch während eines anderen Kapitels äußerst hilfreich, in dem eine große Anzahl von Kastanien explodiert. Die Handhabung der Kastanien als einzelne Entities war unpraktisch, daher gruppierten sie sie als ein einziges Netz und verwendeten den Shader, um das Schütteln und die Explosionen zu steuern.

Jede Kastanie wird auf dem UV-Raster von links nach rechts abgebildet, entsprechend der Explosionssequenz, wobei die Kastanien oben auf den Haufen zuerst explodieren. Der Shader wählt vordefinierte Gruppen von Kastanien nach Index aus, während ein anderes Skript Partikelsystem-Explosionen an den genauen Stellen platziert, an denen Kastanien kurz vor der Detonation stehen.

„Dieser Ansatz ermöglichte es uns, eine große Menge an Geometrie und komplexen Dynamiken effizient zu verwalten, ohne Leistungsüberlastungen zu verursachen, und stellte die Einhaltung der Web-Performance-Anforderungen sicher“, erklärt Stella.

Aufgrund von Größenbeschränkungen beim Bau haben sie auch einige künstlerische Entscheidungen getroffen, um die Leistung zu verbessern. Sie entschieden sich, mit dunklen Bereichen zu arbeiten, um Elemente zu verbergen. Dies half ihnen, die Anzahl der Polygone und das skinnierte Mesh zu optimieren. „Wir haben den helleren Bereichen viel mehr Details hinzugefügt“, sagt Fanchin.

Verwaltung der Audioproduktionspipeline

Das Sounddesign beeinflusste alles, von der Geschwindigkeit des Gameplays bis hin zur Gestaltung der Umgebungen und Interaktionen, und leitet die Spieler, während es ihre emotionale Verbindung zur Geschichte vertieft. Das PIGIAMA KASAMA-Team hat Soundtracks erstellt und produziert, die zur Stimmung und zum Tempo jeder Episode passen. Sie arbeiteten auch mit Synchronsprechern zusammen und engagierten einen Linguisten, um eine Sprache zu erfinden. Ihr Ziel war es, ein Hörerlebnis zu schaffen, das die immersive Qualität des Spiels verbessert.

Wann immer eine Erfahrung oder ein Produkt schlechten Ton hat, hört man es. Wenn der Ton gut ist, ist er unsichtbar“, sagt Stella.

Sie führten einen strengen dreistufigen technischen Prozess für die Audioproduktion durch, bevor sie ihn in das Spiel implementierten.

Stufe 1: Audioclip-Vereinheitlichung und Mischen/Mastern

Die erste Phase erforderte die Vereinheitlichung mehrerer Audioclips, insbesondere für Schleifengeräusche wie Umgebungsgeräusche und den Soundtrack des Spiels. Dieser Prozess erstreckte sich auf bestimmte einmalige Soundeffekte, die geschichtet und zu einzelnen Spuren konsolidiert wurden. Diese Modifikationen wurden während der Misch- und Mastering-Phase integriert, um sicherzustellen, dass die einheitlichen Clips Konsistenz in der Audiodynamik und dem Gesamtgleichgewicht über verschiedene Wiedergabeumgebungen hinweg beibehielten. Diese Phase war entscheidend, um Inkonsistenzen zu minimieren und kohärente auditive Erlebnisse zu gewährleisten, insbesondere für {sequences} in Schleifen, die nahtlos im Spiel übergehen mussten.

Stufe 2: Formatkonvertierung zu optimierten Kompressionsstandards

Im zweiten Schritt wurden die originalen hochauflösenden Audiodateien, typischerweise im AIFF- und FLAC-Format, in das OGG-Format konvertiert. T eine Abtastrate von 48 kHz und eine Bittiefe von 16 Bit, die den Industriestandards entspricht, um ein Gleichgewicht zwischen Audioqualität und Leistungseffizienz zu wahren. Der Vorbis-Komprimierungscodec wurde verwendet, der eine erhebliche Reduzierung der Dateigröße ermöglichte, ohne die wahrnehmbare Audioqualität zu beeinträchtigen.

Stufe 3: Unity-Implementierung und Feinabstimmung

Die letzte Phase umfasste die Integration der bearbeiteten Audiodateien in Unity. Dies umfasste die sorgfältige Auswahl geeigneter Lademethoden (z. B. Streaming für längere Tracks oder Vorladen für kritische Soundeffekte), um die Leistung während des Spiels zu optimieren. Das Team hat die Vorbis-Kompressionseinstellungen optimiert, um ein Gleichgewicht zwischen Audioqualität und Ressourcennutzung zu erreichen.

Zusätzlich wurden sorgfältige Entscheidungen darüber getroffen, ob bestimmte Audiodateien in Mono oder Stereo verarbeitet werden sollten, basierend auf ihrer Rolle im Sounddesign und den gewünschten räumlichen Effekten im Spiel.

Der rigorose Optimierungsprozess, der in der Endphase implementiert wurde, führte zu erheblichen Speicher- und Leistungsgewinnen. Durch die Nutzung des OGG-Formats und die Anpassung der Kompressionseinstellungen wurden die Audioressourcen auf insgesamt etwa 10 MB komprimiert. Dies stellt eine erhebliche Reduzierung im Vergleich zu den geschätzten 500 MB dar, wenn unkomprimierte AIFF-Dateien verwendet worden wären, oder dem 100 MB Speicherbedarf für MP3-Äquivalente. Diese Ergebnisse minimierten nicht nur die Gesamtgröße des Spiels, sondern sorgten auch für eine effiziente Speichernutzung und eine reibungslose Audioleistung während des Spiels.

Bereitstellung auf mehreren Plattformen

Durch die Zusammenarbeit mit Spatial bei einer plattformübergreifenden Web-Veröffentlichung hat das PIGIAMA KASAMA-Team URP, die bevorzugte Pipeline der Plattform, übernommen. Als Designerin mit 15 Jahren Erfahrung in CGI hat Stella viele Werkzeuge für verschiedene Zwecke verwendet und war von den Fähigkeiten von URP beeindruckt.

URP funktioniert großartig. Ich habe schnell gelernt, wie man es benutzt, um unser Ziel mit Kasama zu erreichen: Das Erwachen. Ich denke, es hat so ziemlich alles erreicht, was ich mir vorgestellt hatte, also bin ich sehr zufrieden", sagt er.

Die Flexibilität und Effizienz der Render-Pipeline waren für das Team besonders wichtig, als es auf Webplattformen eingesetzt wurde, da die plattformübergreifende Kompatibilität und Anpassungsfähigkeit ihnen half, problemlos zu skalieren.

Die Leistung kann für jede Plattform optimiert werden, selbst auf Geräten mit niedrigerer Leistung, und Entwickler können ihre eigenen Shader verwenden. Es ist darauf ausgelegt, in der Zukunft gut abzuschneiden“, erklärt Steinerman. „Aus der Perspektive der Spatial-Plattform erwarten wir, dass URP dort ebenfalls unterstützt wird, wenn wir beginnen, zukünftige Versionen von Unity zu unterstützen.“

Die Server von Spatial erstellten individuelle Builds und optimierten jede Plattform. Sie halfen dem PIGIAMA KASAMA-Team bei ihrem WebGL-Build und ihren separaten Builds für Android und native iOS. Sie hatten unterschiedliche Zielqualitäten für bestimmte Plattformen.

Die Schärfentiefe läuft ziemlich gut auf WebGL, aber wir haben festgestellt, dass sie auf einigen mobilen Geräten weniger leistungsfähig ist. Andererseits ist Audio auf Android und iOS viel leistungsfähiger“, sagt Fanchin. „Wir hätten Filter und EQ, ein Audiotool, das Entwicklern ermöglicht, die Lautstärke bestimmter Frequenzen innerhalb einer Audioquelle anzupassen, besser auf Android nutzen können, aber das hätte auf WebGL nicht funktioniert.“

Sie haben bestimmte Elemente so abgestimmt, dass sie mit jeder Plattform kompatibel sind, während andere speziell für die Plattform angepasst wurden. Für WebGL haben wir eine höher aufgelöste Textur verwendet, da der Bildschirm typischerweise größer ist, und niedrig aufgelöste Texturen auf kleineren mobilen Bildschirmen integriert. Alles in allem war die plattformübergreifende Veröffentlichung ziemlich nahtlos", schließt Stella.

Einbeziehung von Spielern in die Reise

Nachdem sie sich entschieden hatten, ein Webspiel zu entwickeln, musste das PIGIAMA KASAMA-Team einen Weg finden, qualitativ hochwertige Inhalte in überschaubaren Portionen zu entwickeln. Sie wählten ein episodisches Veröffentlichungssystem, das es ihnen ermöglichte, nach jeder Episode Spielerfeedback zu sammeln, das sie in zukünftige Folgen einfließen lassen konnten. Es half ihnen auch, sehr schnell zu testen und zu iterieren.

„Wir haben eine flexible Roadmap erstellt, die es uns ermöglicht, den Entwicklungsprozess basierend auf dem Feedback der Spieler und neuer Technologie anzupassen“, erklärt Stella. Jede Episode wird mit Blick auf die Zukunft geplant, um sicherzustellen, dass sich die Erzählung und die Spielmechanik im Laufe der Zeit natürlich entwickeln können.

Die Wahl dieses Veröffentlichungsplans brachte auch mehrere Herausforderungen mit sich. Das Team muss die Konsistenz über die Episoden hinweg sicherstellen, sowohl in Bezug auf die Qualität als auch auf das Erzählen. Die Verwaltung der Spielererwartungen ist ebenfalls ein potenzielles Hindernis, da episodische Veröffentlichungen ein empfindliches Gleichgewicht erfordern, um genügend Inhalte zu liefern, um die Spieler zufriedenzustellen, während sie für die nächste Folge engagiert bleiben.

Alles in allem hat das Team viel gelernt und freut sich darauf, dieses Wissen in die zweite Episode einzubringen. „Wir sind stolz darauf, weiterhin die Qualität der Erfahrung zu präsentieren, die ein Entwickler für WebGL schaffen kann“, sagt Fanchin. „Als kleines Studio sind wir gespannt darauf, was wir mit technologischen Fortschritten wie Unity 6 und WebGPU erreichen können.“

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 Unity 6 im Unity Hub herunter.