Wie Coatsink die Ladezeit der Website für Ready, Set, Cook! um 25% reduzierte

Fertig, Los, Kochen! ist ein kooperatives Restaurant-Management-Spiel für Messenger, entwickelt von Coatsink, dem Studio hinter Jurassic World Aftermath und Transformers: Schlachtfelder. Hier ist, was sie bei ihrem ersten Ausflug in die mobile Webentwicklung gelernt haben.

Wie bringt ein Studio ein Spiel, das für Messenger Rooms bestimmt ist, vom Desktop auf das Handy?

Bereit, fertig, kochen! wurde ursprünglich als Desktop-Webspiel entwickelt, bei dem Spieler von ihren PCs oder Laptops aus Videoanrufe beitreten. Während Coatsink die Entwicklung auf mobile Geräte umstellte, arbeiteten sie mit Meta und Unity zusammen, die eine bestehende strategische Partnerschaft hatten, um die Laufzeit auf mobilen Geräten zum Laufen zu bringen. Dies ist eines der wichtigsten Updates für Unity Web im kommenden Unity 6-Release, das auch zusätzliche Unterstützung für WebAssembly 2023, frühen Zugang zu WebGPU und die Ergänzung der Emscripten 3.1.38-Toolchain umfasst. Nächstes Jahr werden Spieleentwickler die Möglichkeit haben, das massive Gaming-Ökosystem von Meta mit der Unterstützung der Instant Games-Plattform von Unity zu nutzen.

Testen einer neuen Plattform

Meine Lieblingssache an Ready, Set, Cook! ist die minimale Klick-zu-Spiel-Zeit. Sie sind in einem Videoanruf in Messenger, und mit einem Knopfdruck sind alle in der Lobby und dann direkt im Spiel. Es gibt keine Einrichtung“, sagt Ross Furmidge, Coatsinks Programmierleiter.

Da es das erste Mal war, dass Coatsink ein Webspiel entwickelte, war das Ziel, das Beste aus dem Workflow der Plattform herauszuholen. Sie behandelten es als ein F&E-Projekt, um die Machbarkeit der Plattform und ihre Stärke in der mobilen Webentwicklung zu analysieren.

Das Team baute hauptsächlich auf bestehender Funktionalität auf. Sie nahmen vorgefertigte Bausteine, einschließlich Prefabs, die sich mit HUD, Spielmanagern, Netzwerk, Interaktiven, Lobby und Spielanweisungen befassten, und fügten polierte Funktionen hinzu, um besser zu verdeutlichen, was der Benutzer tun sollte. Sie haben auch neue Funktionen wie das Pausieren, die Zufallsanpassung von Kosmetika, Lobby-Anpassungen und Nachrichten, HUD-Änderungen, flexible Seitenverhältnisunterstützung und Schwierigkeitsanpassungen sowie andere integriert.

„Wir haben das Spiel um den Multiplayer-Aspekt herum entwickelt und ausbalanciert, um Spaß mit Friends in einem Videoanruf zu haben“, erklärt Furmidge. „Als wir uns in das Projekt vertieften, stießen wir auf häufige Herausforderungen für Spiele, die von Desktop auf Mobilgeräte wechseln.“ Wir mussten uns auf die Benutzeroberfläche konzentrieren und insbesondere für das Web mussten wir die Downloadzeiten über mobile Daten berücksichtigen, da nicht garantiert ist, dass ein Spieler mit WLAN verbunden ist."

Die Ergebnisse

• Reduzierte die Ladezeit des Spiels um 25%
• Verringerte die Größe der WebAssembly (Wasm)-Datei um 2,5%.
• Verkürzte die Übertragungs- und Entpackzeiten des Spiels um 10%

Erstellen einer dynamischen Benutzeroberflächenorientierung

Als das Coatsink-Team das Projekt begann, erkannten sie schnell, dass es viel zu beachten gab für die Benutzeroberfläche. Frühzeitig waren sie besorgt, sicherzustellen, dass sowohl Spieler als auch nicht spielende Videoanrufbenutzer teilnehmen konnten. Sie mussten die bestehende Zuschauerfunktionalität verfeinern, die Spieler konsequent online hält und anderen Nutzern ein positives Seherlebnis bietet.

„Das Zuschauererlebnis war für uns immer von größter Bedeutung, als wir andere Aspekte des Spiels entwarfen“, erklärt Kamil Bazydlo, ein Junior-Designer bei Coatsink. „Es ist keine übliche Funktion in allen Spielgenres auf anderen Plattformen, aber da die Spieler in einem Videoanruf sind, war es wichtig, die inklusive Benutzerbeteiligung im gesamten Spiel zu betonen.“

Sie begannen auch früh, die Bildschirmorientierung zu betrachten. Da das Spiel ursprünglich für den Desktop entwickelt wurde, wurde es im Querformat erstellt. Als sie auf Mobilgeräte umstellten, mussten sie sowohl Quer- als auch Hochformat unterstützen. In Messenger halten die Spieler ihre Bildschirme wie ein Telefon, da sie sich in einem Videoanruf befinden. Wenn das Telefon gedreht wird, geht die Kamera seitwärts, was nicht ideal ist. „Dies war eine große Überlegung, als wir die Umgebungen entworfen haben, um dies zu unterstützen“, sagt Furmidge.

Überdenken der Spielsteuerung

Bereit, fertig, kochen! kann auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen und Seitenverhältnissen gespielt werden, aber der Spielbildschirm erstreckt sich nicht über den gesamten Bildschirm, da er Platz für Elemente wie Metas Video-Feed und Plattformsteuerungen reserviert. Diese sind nicht Teil der Spielanwendung selbst, daher erscheinen sie nicht im Unity-Editor, wenn Entwickler am Spiel arbeiten.

„Das mussten wir berücksichtigen, als wir UI-Elemente auf dem Bildschirm platzierten“, sagt Bazydlo. „Wir haben den groben Bereich ermittelt, wie viel Bildschirmfläche von diesen Plattformelementen eingenommen wird, und mit unserem QA-Team zusammengearbeitet, um das schmalste Seitenverhältnis zu identifizieren, auf das wir abzielen sollten.“

Auf Mobilgeräten befinden sich die gerätespezifischen Steuerungen am unteren Bildschirmrand. Da das Spiel mit Blick auf die Landschaftsorientierung entwickelt wurde, nutzte das Team den unteren Teil des Bildschirms, um einige HUD-Elemente anzuzeigen, anstatt für kritische Gameplay-Eingaben.

Als der Titel in den USA sanft eingeführt wurde, integrierte das Team Analytics direkt in die Anwendung, was entscheidend dafür war, zu erkennen, wann Spieler das Spiel verließen. Früh bemerkten sie, dass die Benutzer absprangen, bevor das Spiel überhaupt geladen wurde.

„Wir haben gesehen, dass, wenn das Menü etwas voller war und sein Übergang ins Spiel für die Benutzer in der Lobby zu lang war, sie schnell absprangen.“ Sobald sie ins Spiel eingestiegen waren, spielte die Mehrheit der Spieler es in seiner Gesamtheit weiter“, sagt Furmidge. „Dies waren für uns entscheidende Daten, und die Analytics waren ein großer Faktor bei vielen unserer Entscheidungen.“

Optimieren der Ladezeit

Coatsinks Analytics zeigten, dass Benutzer abspringen würden, bevor sie das Hauptmenü oder das Gameplay erreichten, wenn die Dateigrößen des Spiels zu groß wären und das Laden zu lange dauern würde.

Coatsink-Entwickler Andrei M. konzentrierte sich darauf, die Dateigröße zu reduzieren, indem er Optionen in den Unity Build Settings verwendete. Zum Beispiel stellte er die Code-Optimierungseinstellung auf Festplattengröße mit LTO ein, verwendete das Brotli-Komprimierungsformat, stellte die IL2CPP-Codegenerierung auf schnellere (kleinere) Builds ein, stellte die verwaltete Stripping-Stufe auf hoch und mehr. Mit diesen Optimierungen für das Web konnte das Team die Ladezeit erheblich verkürzen.

Sie verwendeten dann Unitys WebAssembly (Wasm)-Tool, das ungenutzte Teile der Unity-Engine entfernt und eine optimierte .wasm-Datei ausgibt. Durch die Reduzierung der Dateigröße gab es weniger zu komprimieren, zu übertragen und zur Laufzeit auf dem Gerät zu entpacken. „Auf diese Weise gelangt der Benutzer direkt ins Spiel, sobald er das Herunterladen der Informationen abgeschlossen hat“, erklärt Furmidge.

Diese Spieloptimierungspraktiken führten zu einer Verringerung um 4 MB, was einer Gesamtreduktion von 2,5 % der Wasm-Datei entspricht. Das führte zu einer Einsparung von 10 % sowohl bei den Transfer- als auch bei den Auspackzeiten. Während 4 MB klein klingen mögen, hatte es im großen Ganzen eine große Auswirkung für ein Spiel, das auf mobilen Browsern läuft.

Dateigröße reduzieren

Um die Dateigröße zu verkleinern, verwendete das Coatsink-Team AssetBundles, eine Archivdatei, die plattformspezifische Nicht-Code-Assets enthält. Sie hosteten sie auf einem externen Server und luden sie dann herunter, als der Build lief, um den Benutzern zu helfen, so schnell wie möglich in die Lobby des Spiels zu gelangen.

Sie nutzten auch das Addressable Asset System, um Assets bei Bedarf zu laden. Dies half ihnen, Pakete in die für verschiedene Teile des Spiels erforderlichen Gruppen aufzuteilen und trug erheblich zur 25%igen Reduzierung der Ladezeit bei.

„Auf diese Weise haben wir die minimale Menge an Assets für Lobbys, um Spielern den frühen Einstieg zu erleichtern, die minimale Menge für jedes Level und einige gemeinsame Pakete mit gemeinsamen Assets für verschiedene Level“, erklärt Andrei M. „Das Ziel ist es, so wenige Dateien wie möglich herunterzuladen, da HTTP/2 nicht überall verfügbar ist, und wir möchten so wenige nicht erforderliche Assets wie möglich enthalten.“

Das Team erstellte einen Workflow, der ihnen half zu erkennen, ob ein Benutzer beim Starten des Spiels auf einem Mobilgerät oder einem Desktop war. In einer Webvorlage konnten sie während eines Ladevorgangs feststellen, ob das Gerät mobil war, und, falls ja, die Daten- und Asset-Verzeichnisse ändern, um für die Plattform optimierte Assets zu verwenden.

„Wir haben unser eigenes doppeltes Build-System erstellt, das zwei Versionen produzierte, die nicht völlig unterschiedlich waren.“ Es bezieht sich auf verschiedene Atlanten und ändert sowohl die Art der Kompression als auch die Größe. Es sind zwei verschiedene Ansichten von Vermögenswerten, die auf derselben Codebasis basieren", sagt Andrei M.

Einzigartige Test- und Debugging-Herausforderungen bewältigen

Als es darum ging, das Spiel zu testen und zu debuggen, stieß das Team auf einige Schwierigkeiten aufgrund der einzigartigen Situation, das Spiel innerhalb der Messenger-App anstelle eines herkömmlichen Webbrowsers auszuführen. Während sie Builds hatten, die sie in Browsern mit Dummy-Playern ausführen konnten, mussten sie dennoch tiefer eintauchen, um die Fehler zu finden, die nur in Messenger auftraten.

„Für diese Fehler haben wir ein System entwickelt, das die Protokolle in Entwicklungs-Builds auf unsere AWS-Server hochlädt, die wir dann lesen konnten“, erklärt Furmidge.

Das Team nutzte auch Webbrowser-Entwicklungstools, um Fehler in der Konsole zu erkennen und API-Aufrufe zu verfolgen. Als Programmierer war dies entscheidend für Furmidge.

„In der Browser-Konsole können Sie die Befehle eingeben und versuchen, sie manuell auszuführen“, sagt er. „Da wir eine externe JavaScript-Bibliothek hatten, die wir gebaut haben, um zwischen JavaScript und Unity zu gehen, ein nativer Plug-in, konnten wir darauf zugreifen, wenn nötig.“ Dies wurde verwendet, um das Meta-JavaScript-SDK zu umwickeln, um mit ihrem Node-Multiplayer-Server kommunizieren zu können, ein Feature, das Unity in zukünftigen Versionen als Paket veröffentlichen möchte.

Um die Entwicklung zu beschleunigen, erstellte Andrei M. auch seinen eigenen lokalen Wrapper, um die benötigten Meta-API-Aufrufe nachzuahmen. Er erklärt: „Ich konzentrierte mich auf API-Aufrufe, die sich mit der lokalen Serverkonfiguration, programmierbaren Antworten und Latenz befassten.“

Zu einer natürlichen Erweiterung der Plattform werden

Das Coatsink-Team wollte, dass das Ready, Set, Cook! -Erlebnis für Messenger-Nutzer nahtlos ist. Von der Möglichkeit, dass Spieler schnell Spielsitzungen beitreten können, bis hin zu kurzen Ladezeiten war ihr ultimatives Ziel, als organische Erweiterung der Plattform zu fungieren.

Ein Teil davon ist die Bereitstellung eines intuitiven Gameplays, bei dem die Spieler ohne Unterbrechung vorankommen, auf verschiedenen Geräten spielen und ihre Friends von der Seitenlinie aus anfeuern können. Um dies zu erreichen, hat das Team scrollbare Tipps zu Spieleigenschaften während des Ladens, praktische Anleitungen in Form von Animationen und interaktive Elemente integriert. Diese Funktionen helfen Spielern, den Spaß mit Friends zu finden, während sie das Chaos in der Küche bewältigen.

„Wir wollten auf natürliche Weise die Menschen ansprechen, die bereits Messenger nutzen, und ihre Videoanruferlebnisse erweitern“, sagt Nick Taylor, ein leitender Produzent bei Coatsink. „Die Zusammenarbeit mit Meta und Unity war wirklich kollaborativ und gab uns die Gelegenheit, dies in Hülle und Fülle zu tun.“

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.