5 Grundlagen für die Erstellung von Webspielen

Stellen Sie sich vor, Spielern ein schnelles und zugängliches Spielerlebnis ohne Barrieren wie mobile Marktplatz-Downloads oder Kontoanmeldungen anzubieten. Die Möglichkeit, Spieler überall über Browser oder in native Anwendungen über eine Webansicht zu treffen, liegt in Ihren Händen, und die Möglichkeiten mit web-basiertem Gaming sind endlos.

In letzter Zeit haben wir einen Anstieg des Spielerengagements auf Webplattformen, insbesondere mobil, festgestellt, und der Trend zeigt keine Anzeichen einer Verlangsamung. Im Jahr 2023 erzielte der globale Browser-Gaming-Markt einen Umsatz von etwa 15,03 Milliarden USD. Trotz der wachsenden Genres im Konsolen- und Mobile-Gaming wird für 2028 ein Anstieg des Segments auf 22,33 Milliarden USD an jährlichen Einnahmen prognostiziert.

Dieses umfassende E-Book wird sowohl angehenden Kreativen als auch erfahrenen Entwicklern helfen, sich mit fünf Grundlagen für den Aufbau leistungsfähiger Webspiele mit Unity Web auseinanderzusetzen und sie zu verstehen. Es bietet einen Blick hinter die Kulissen, wie beliebte Titel wie Ready, Set, Cook!, Kasama: Das Erwachen, SquadBlast und Projekt Prismatic wurden im Web zum Leben erweckt.

Es umfasst die folgenden Erkenntnisse:

1. Planung und Prototyping priorisieren

2. Erstellen Sie eine dynamische Benutzeroberfläche

3. Erstellen Sie ein zusammenhängendes audiovisuelles Erlebnis

4. Optimieren. Optimieren. Optimieren.

5. Umarmen Sie mehrere Webplattformen

1. Planung und Prototyping priorisieren

Ein wichtiger Vorteil der Webplattform ist die Geschwindigkeit, mit der Sie Ihr Spiel mit Spielern auf der ganzen Welt teilen können. Um jedoch ein großartiges Erlebnis zu gewährleisten, muss Ihr Spiel auf einer soliden Designgrundlage aufgebaut sein.

Eine Vision umreißen

Eine klare Vision zu setzen hilft, ein Team während des Entwicklungsprozesses zu leiten. Stratton Studios wollte die Grenzen dessen erweitern, was in einem browserbasierten Spiel sowohl in Bezug auf Leistung als auch auf visuelle Treue erreicht werden konnte. Ihr Ziel war es, ein erstklassiges Spielerlebnis zu bieten, das mit traditionellen Plattformen in einer Webumgebung konkurrieren konnte.

„Diese Vision war der Anker, der uns während des Prototypings und der Iteration ausgerichtet hielt und uns half, während der gesamten Entwicklung konsistente, zielgerichtete Entscheidungen zu treffen“, sagt Josh Loveridge, der Geschäftsführer von Stratton Studios.

Der erste Schritt bei der Erstellung des Spiels bestand darin, sicherzustellen, dass sie die lebendige Umgebung erreichen konnten, die sie sich vorgestellt hatten, während sie gleichzeitig eine solide Leistung aufrechterhielten, insbesondere angesichts der Einschränkungen der Mittelklasse-Hardware, die sie anvisierten. Dies bot eine starke technische Grundlage für die weitere Entwicklung des Spiels.

„Wir begannen damit, eine Testszene mit einer großen Sichtweite zu erstellen, die es uns ermöglichte zu beurteilen, ob wir das dichte Laubwerk, das abwechslungsreiche Terrain und die komplizierten Details rendern konnten, die für die Ästhetik des Spiels entscheidend waren“, sagt Loveridge. „Durch die Nutzung der neuen WebGPU-Grafik-API haben wir die Szene getestet, um sicherzustellen, dass sie nicht nur so üppig aussah, wie wir es wollten, sondern auch auf verschiedenen Geräten gut funktionierte.“

Testen von Anfang an

Zu Beginn konzentrierte sich das ULTRAHORSE-Team auf die Entwicklung ihrer Hauptspielmechaniken. Sie wollten den Aspekt des Multiplayer-Shooters im Run-and-Gun-Seitenscrollspiel festlegen, um sicherzustellen, dass er Spaß macht und fesselnd ist. Sie begannen mit größeren Bildschirmen, Konsolen und PCs, um das grundlegende Gefühl richtig zu bekommen.

Von dort aus gingen wir schnell zu den Spieler-Tests über. Selbst mit unserem frühen Beta-Build haben wir es über Dienste wie Antidote und frühe Betas bei Veranstaltungen wie der WASD Expo in London online Spielern präsentiert," sagt CEO und Mitgründer Anatolijs Ropotovs. "Das ermöglichte es uns, unsere Kernmechaniken zu validieren und sofortiges Feedback darüber zu erhalten, was funktionierte und was nicht."

Das PIGIAMA KASAMA Team spiegelt die Idee des schnellen Prototypings und der frühen Testung von Ideen wider. Die Erstellung von Kasama: Die Erwachung begann mit der Definition des Charakters und dem Schreiben eines narrativen Umrisses. Sie wollten, dass die Geschichte, der Protagonist und das Gameplay tief miteinander verbunden sind. Sie begannen damit, eine einfache 3D-Umgebung in Gravity Sketch VR zu erstellen, und bewegten sie dann in Unity, um ihr Hauptpuzzle-Mechanik zu bauen und zu testen.

Dieser praktische Ansatz ermöglichte es ihnen zu sehen, ob der Mechaniker gut funktionierte, bevor sie zu viel Zeit darin investierten. Sobald sie sich in der Mechanik und der Geschichte sicher waren, entschieden sie sich, das Spiel zu einem Puzzle-Abenteuer zu machen, was sich wie die perfekte Ergänzung für das Erlebnis anfühlte, das sie schaffen wollten.

Wir durchlaufen während der Tests mehrere Iterationen, bis das Team sich sicher fühlt, dass die Interaktionen funktionieren. Sobald wir das Kern-Gameplay festgelegt hatten, gingen wir zur Konzeptkunst über und stellten sicher, dass sie mit der Geschichte des Spiels und der allgemeinen Stimmung übereinstimmte," sagt Paride Stella, Mitbegründer von PIGIAMA KASAMA.

Anpassung an Hindernisse

Wie es oft im Spielentwicklungsprozess der Fall ist, passten die Stratton Studios ihre ursprüngliche Vision an, als sie auf technische Einschränkungen stießen und während des Prototypings bessere Ideen entdeckten.

Die Verfeinerung, um das bestmögliche Ergebnis zu gewährleisten, ist Teil des kreativen Prozesses. Zum Beispiel bestand eine wesentliche Änderung, die wir vornehmen mussten, im Leveldesign," erklärt Loveridge. "Ursprünglich hatten wir uns offenere, freiformige Umgebungen vorgestellt, aber im Laufe der Entwicklung wurde klar, dass dieser Ansatz nicht effizient mit dem Hexagon-Fliesen-Oklusions-Culling-System funktionieren würde, das wir implementierten."

Um die Leistung aufrechtzuerhalten, insbesondere in einer webbasierten Umgebung, haben sie den Renderprozess optimiert, indem sie die Topologie auf dem Bildschirm erheblich reduziert haben. Dies führte dazu, dass sie das Leveldesign in hexagonale Kachel-Quadranten umstrukturierten, was ihnen half, die Sichtbarkeit und das Culling besser zu verwalten, und sich dann auf klare Engpässe konzentrierten. Dieses verbesserte Gameplay und stellte sicher, dass das Spiel auf einer Vielzahl von Geräten reibungslos lief. Die Anpassung war entscheidend, um ihre kreative Vision mit den technischen Leistungsanforderungen in Einklang zu bringen.

Während eine gute Planung die Auswirkungen von Herausforderungen, die während der Entwicklung auftreten, verringern kann, ist es wichtig, sich daran zu erinnern, dass dies nicht alle Unebenheiten auf dem Weg vollständig verhindern wird.

2. Erstellen Sie eine dynamische Benutzeroberfläche

Während das Web die zugänglichste Plattform ist, um Gamer überall zu erreichen, sind nicht alle Browser gleich. Variationen in der Bildschirmgröße, Landschafts- vs. Hochformatorientierung und UI-Überlegungen für die App, die Ihr Spiel hostet, sind alles Aspekte, die Sie bei der Gestaltung der Benutzeroberfläche Ihres Spiels im Auge behalten sollten.

Die Spielerfahrung im Fokus behalten

Als das Coatsink Team mit der Entwicklung von Ready, Set, Cook! begann, wurde ihnen schnell klar, dass sie viel berücksichtigen mussten für die Benutzeroberfläche. Frühzeitig waren sie besorgt, dass sowohl Spieler als auch nicht spielende Videoanrufer teilnehmen konnten. Sie mussten die bestehende Zuschauerfunktionalität verfeinern, die die Spieler konstant online hält und anderen Nutzern ein positives Seherlebnis bietet.

„Das Zuschauererlebnis war für uns immer von größter Bedeutung, wenn wir andere Aspekte des Spiels entworfen haben“, erklärt Kamil Bazydlo, ein Junior Designer bei Coatsink. „Es ist kein gängiges Merkmal 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ühzeitig, die Bildschirmorientierung zu betrachten. Da das Spiel ursprünglich für den Desktop erstellt wurde, wurde es im Querformat entwickelt. Als sie auf Mobilgeräte umstiegen, mussten sie sowohl die Landschafts- als auch die Hochformatansicht unterstützen. In Messenger halten die Spieler ihre Bildschirme wie ein Telefon, da sie sich in einem Videoanruf befinden. Wenn das Telefon gedreht wird, dreht sich die Kamera zur Seite, was nicht ideal ist. „Das war eine große Überlegung, als wir die Umgebungen entworfen haben, um das zu unterstützen“, sagt Ross Furmidge, der Programmierungsleiter von Coatsink.

Überwindung von UI-Herausforderungen

Eine der größten Herausforderungen, vor denen das ULTRAHORSE-Team stand, war die Schaffung eines Spielerlebnisses, das sowohl mit Maus und Tastatur, einem Controller als auch mit einem Touchscreen gleichermaßen angenehm ist. Dies war entscheidend für ihre Vision, ein wirklich plattformübergreifendes Spiel zu entwickeln.

Zunächst experimentierten wir mit verschiedenen Spielstilen, aber wir stellten fest, dass viele traditionelle Shooter-Formate eine Eingabemethode gegenüber anderen bevorzugten. Das ist eigentlich, wie wir zum Side-Scrolling-Shooter-Format für SquadBlast gekommen sind," sagt Ropotovs. "Wir haben erkannt, dass eine 2D-Fläche präzises Zielen mit einer Maus, intuitive Bewegungen mit einem Controller und einfache, selbsterklärende Touch-Steuerungen auf mobilen Geräten ermöglicht."

Eine unerwartete Herausforderung trat auf, als das Team von der PC- zur mobilen Webentwicklung überging. Ursprünglich entwickelten sie ein vollständig ausgefeiltes PC-Erlebnis, das mit Hover-Mauselementen in der Benutzeroberfläche ausgestattet war. Dies ermöglichte es ihnen, eine reichhaltige, detaillierte Benutzeroberfläche zu erstellen, die die Vorteile größerer Bildschirme und präziser Maussteuerung nutzte. Sie verwendeten Tooltips, Hover-Zustände und komplexere Menüstrukturen, um Informationen und Optionen an den Spieler zu vermitteln.

Dies führte zu einigen schwierigen Entscheidungen darüber, welche Informationen angezeigt werden sollten und wie sie präsentiert werden sollten. Das Team musste die Benutzeroberfläche selbsterklärender gestalten, da sie sich nicht auf die Hover-Zustände oder komplexen Tooltips verlassen konnten, die gut auf dem PC funktionieren. Jedes Element musste auf einen Blick verständlich sein, was sie zwang, die visuelle Sprache und Ikonografie zu verfeinern.

Anpassung basierend auf dem Bildschirmplatz

Das ULTRAHORSE-Team stieß auch auf Hürden, als es um die Gestaltung von Touch-Eingaben ging. Am PC konnten sie eine präzise Steuerung des Cursors annehmen, aber auf Mobilgeräten mussten sie mit weniger genauen Fingertipps und möglichen Fehlklicks rechnen. Dies führte dazu, dass sie die Berührungsziele größer und den Abstand zwischen den UI-Elementen großzügiger gestalteten, was die Menge an Informationen, die sie gleichzeitig anzeigen konnten, weiter reduzierte.

Sie entdeckten auch die Bedeutung von skalierbaren und flexiblen UI-Komponenten. Angesichts der Vielzahl von Größen und Seitenverhältnissen mobiler Geräte musste ihre Benutzeroberfläche sich reibungslos an verschiedene Bildschirmkonfigurationen und DPI anpassen. Dies führte dazu, dass sie ein robusteres UI-System entwickelten, das sich automatisch an den verfügbaren Bildschirmplatz anpassen konnte. Die Verwendung dieses Vereinfachungsprozesses für das mobile Web hat die Benutzeroberfläche von SquadBlast auf allen Plattformen verbessert.

Spielsteuerungen neu überdenken

Bereit, Set, Kochen! kann auf einer Vielzahl von Geräten mit unterschiedlichen Bildschirmgrößen und -verhältnissen gespielt werden, aber der Ansichtsbereich des Spiels 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 an dem Spiel arbeiten.

„Wir mussten das 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 zu identifizieren, welches das schmalste Seitenverhältnis ist, das angestrebt werden soll.“

Auf Mobilgeräten befinden sich die gerätespezifischen Steuerungen am unteren Bildschirmrand. Da das Spiel mit der Ausrichtung im Querformat 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 soft gelauncht wurde, integrierte das Team Analysen direkt in die Anwendung, was entscheidend war, um 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 die Benutzer schnell absprangen, wenn das Menü etwas geschäftiger war und der Fluss ins Spiel für die Benutzer in der Lobby zu lang war. Sobald sie ins Spiel kamen, spielten die meisten Spieler es in vollem Umfang weiter," sagt Furmidge. "Dies waren für uns instrumentelle Daten, und die Analysen waren ein großer Faktor in vielen unserer Entscheidungen."

3. Erstellen Sie ein zusammenhängendes audiovisuelles Erlebnis

Durch den Einsatz fortschrittlicher Grafiken und dynamischer Audioinhalte können Entwickler das Spielerlebnis verbessern, unabhängig von den erforderlichen Optimierungen für Browser. Während es leichter gesagt als getan ist und häufige Engpässe sorgfältig berücksichtigt werden müssen, ist das Potenzial für hohe visuelle und akustische Wiedergabetreue im Web, während sich die Technologie weiterentwickelt, vielversprechender als je zuvor.

Höhere Ebenen grafischer Komplexität erreichen

Das Team der Stratton Studios wollte ein Spiel mit hoher visueller Treue und einer detaillierten Umgebung erstellen. Dies erforderte mehr grafische Leistung und Flexibilität, als WebGL bieten konnte.

„WebGL, obwohl leistungsfähig, hat bestimmte Leistungsengpässe und Einschränkungen wie das Fehlen von Compute-Shadern und GPU-Skinning, die uns gezwungen hätten, Kompromisse bei unserer künstlerischen Vision einzugehen“, sagt Loveridge.

Sie entschieden sich, zu WebGPU zu wechseln, um viel höhere Ebenen grafischer Komplexität zu erreichen, einschließlich fortschrittlicherer Schattierungen, Lichteffekte und komplexer Texturen über Compute-Shader. Dies ermöglichte es ihnen, dichte, üppige Umgebungen darzustellen und eine konstant hohe Bildrate aufrechtzuerhalten, selbst in einem Browser.

Die verbesserte Leistung von WebGPU, die durch die Möglichkeit, die Grafikkarte der Geräte weiter zu nutzen, vorangetrieben wurde, war entscheidend für die Bereitstellung des reichen, immersiven Erlebnisses, das sie sich vorgestellt hatten, und stellte sicher, dass die Spieler das Spiel mit dem Detailgrad und der Geschmeidigkeit genießen konnten, die normalerweise Desktop- und Konsolenspielen vorbehalten sind.

Leistung verwalten und WebGPU

Während WebGPU die fortschrittlichen Funktionen bot, die das Team von Stratton Studios benötigte, stellte es auch eine einzigartige Reihe von Herausforderungen dar, die sie bewältigen mussten, um ihre künstlerische Vision zu bewahren. Eine der größten Herausforderungen bestand darin, die Leistung über eine Vielzahl von Geräten hinweg zu optimieren. Da WebGPU noch relativ neu ist, erforderte die Gewährleistung einer konsistenten Leistung und Kompatibilität erhebliche Feinabstimmungen, und sie haben einige Sicherheitsmechanismen eingebaut.

Eine weitere Herausforderung war das Management der Komplexität der Shader und Rendering-Techniken, die sie verwendeten. „Während WebGPU ausgefeiltere Rendering-Techniken wie GPU-Skinning und Compute-Shader ermöglicht, gibt es auch mehr Potenzial für Leistungsengpässe, wenn nicht sorgfältig damit umgegangen wird“, sagt Loveridge. "Wir mussten unsere Shader sorgfältig optimieren und sie straffen, um sicherzustellen, dass wir hochwertige Grafiken liefern konnten, ohne dass es zu Frame-Einbrüchen oder anderen Leistungsproblemen wie Spitzen bei der Speicherbereinigung (GC) kam."

Da WebGPU relativ neu ist, führte es manchmal zu unerwartetem Verhalten für das Team, wie zufälligen schwarzen Bildschirmen oder NaN-Pixeln, die Bloom-Bloat verursachten, insbesondere bei weniger gängigen Hardwarekonfigurationen. Um dies zu überwinden, investierten sie zusätzliche Zeit in rigoroses Testen auf verschiedenen Geräten und Browsern, um sicherzustellen, dass das Spiel konsistent funktionierte und wie beabsichtigt aussah, unabhängig von der Plattform.

„Um diese Herausforderungen anzugehen, haben wir ein robustes Leistungsüberwachungssystem implementiert, das es uns ermöglichte, Probleme in Echtzeit während der Entwicklung zu erkennen und zu beheben“, sagt Loveridge. WebGPU ermöglichte es uns, unsere künstlerische Vision zu verwirklichen, aber es erforderte sorgfältiges Management und ein Engagement, die Hürden zu überwinden, die mit der Arbeit an der Spitze der Webtechnologie verbunden sind.

Das Licht finden

„Gute Beleuchtung macht den Unterschied und ist in einem Webspiel schwer zu erreichen“, sagt Stella, und das PIGIAMA KASAMA-Team wollte sicherstellen, dass die Lichtqualitä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 Schlüsselmomente 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 diesen Grad an Treue bieten," erklärt Mitbegründer Matteo Fanchin.

Eine der komplexesten Herausforderungen des Teams war der Übergang der Beleuchtung in der Umgebung, ohne die Szene zu laden, und die Schaffung dynamischer Lichtänderungen, 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. „Um dies zu erreichen“, sagt Stella, „ist es entscheidend, das Spieldesign und das Umgebungsdesign als einen Gesamtprozess zu betrachten, anstatt es zu trennen. Jedes Element muss dem anderen dienen.

Sie verwendeten Shader Graph , um den benutzerdefinierten Shader zu entwickeln, der besonders nützlich war während dessen, was das Team "die Albtraumsequenz" nennt. Es bedeckt die Karte mit schwarzem Schleim und neutralisiert gleichzeitig die Beleuchtung, wodurch die Umgebung in Schwarz und Weiß dargestellt wird.

„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.

Aufgrund ihrer begrenzten Ressourcen 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, was ihnen half, die Anzahl der Polygone und des skinned Meshs zu optimieren. „Wir haben den helleren Bereichen viel mehr Details hinzugefügt“, sagt Fanchin.

Die Verwaltung der Audio-Produktionspipeline

In Kasama: Das Erwachen, Audio beeinflusste alles, von dem Tempo des Gameplays bis hin zum Design der Umgebungen und Interaktionen. Es leitet die Spieler auch an, 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 auditives Erlebnis zu schaffen, das die immersive Qualität des Spiels verbesserte.

Das Team führte einen strengen dreistufigen technischen Prozess für die Audioproduktion durch, bevor es ihn umsetzte.

Stufe 1: Audio-Clip-Vereinheitlichung und Mixing/Mastering

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

Stufe 2: Formatumwandlung zu optimierten Komprimierungsstandards

In der zweiten Phase wurden die ursprünglichen hochauflösenden Audiodateien, typischerweise im .AIFF- und .FLAC-Format, in das .OGG-Format konvertiert. Diese Umwandlung wurde mit einer Abtastrate von 48 kHz und einer Bit-Tiefe von 16 Bit durchgeführt, wobei die Branchenstandards eingehalten wurden, um ein Gleichgewicht zwischen Audioqualität und Leistungseffizienz zu gewährleisten. Der Vorbis-Kompressionscodec wurde verwendet, der eine erhebliche Reduzierung der Dateigröße ermöglichte, ohne die wahrgenommene Audioqualität zu beeinträchtigen.

Stufe 3: Unity-Implementierung und Feinabstimmung

Die letzte Phase umfasste die Integration der verarbeiteten Audiodateien in Unity. Dies umfasste die sorgfältige Auswahl geeigneter Ladeverfahren (z. B. Streaming für längere Titel oder Vorladen für kritische Soundeffekte), um die Leistung während des Spiels zu optimieren. Die Vorbis-Kompressionseinstellungen wurden optimiert, um das optimale Gleichgewicht zwischen Audioqualität und Ressourcennutzung zu erreichen.

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

Der rigorose Optimierungsprozess, der in der finalen Phase umgesetzt wurde, führte zu erheblichen Speicher- und Leistungsgewinnen. Durch die Nutzung des OGG-Formats und die Feinabstimmung 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 großen Fußabdruck für MP3-Äquivalente. Diese Ergebnisse haben nicht nur die Gesamtgröße des Spiels minimiert, sondern auch eine effiziente Speichernutzung und eine reibungslose Audioleistung während des Spiels sichergestellt.

4. Optimieren. Optimieren. Optimieren.

Um einen Rückgang der Spielerzahlen zu vermeiden, möchten Sie sicherstellen, dass sie so schnell wie möglich in Ihr Spiel einsteigen können und währenddessen eine großartige Erfahrung haben. Die Erwartungen sind hoch und die Zeit ist entscheidend, daher ist es wichtig, zu optimieren, zu testen und noch mehr zu optimieren, um sicherzustellen, dass die Benutzer engagiert bleiben.

Die Dateigröße reduzieren

Um die Dateigröße zu verringern, verwendete das Coatsink-Team AssetBundles, eine Archivdatei, die plattformspezifische Nicht-Code-Ressourcen 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 verwendeten auch das Addressable Asset System, um Assets nach Bedarf zu laden. Dies half ihnen, Pakete in die für verschiedene Teile des Spiels erforderlichen Gruppen aufzuteilen und trug erheblich zur Reduzierung der Ladezeit um 25 % bei.

„Auf diese Weise haben wir die Mindestanzahl an Vermögenswerten für Lobbys, um Spielern zu helfen, frühzeitig einzusteigen, die Mindestanzahl für jede Stufe und einige gemeinsame Pakete mit gemeinsamen Vermögenswerten für verschiedene Stufen“, erklärt Entwickler Andrei M. Das Ziel ist es, so wenige Dateien wie möglich herunterzuladen, da HTTP/2 nicht überall verfügbar ist, und wir wollen so wenige nicht erforderliche Ressourcen wie möglich darin haben.

Das Team hat einen Workflow erstellt, der ihnen half zu erkennen, ob ein Benutzer mobil oder am Desktop war, als er das Spiel startete. In einer Webvorlage konnten sie während eines Ladevorgangs feststellen, ob das Gerät mobil war, und falls ja, würden sie die Daten- und Asset-Verzeichnisse ändern, um Assets zu verwenden, die für die Plattform optimiert sind.

Wir haben unser eigenes Double-Build-System erstellt, das zwei Versionen produzierte, die nicht völlig unterschiedlich waren. Es verweist 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 demselben Code basieren," sagt Andrei M.

Stratton Studios konnten während des Entwicklungsprozesses erhebliche Reduzierungen sowohl der Dateigrößen als auch der Ladezeiten erzielen. Ursprünglich betrug das Payload ihres Spiels etwa 400 MB, was viel zu groß für ein webbasiertes Erlebnis war.

„Durch eine Reihe von Optimierungen, einschließlich der Komprimierung von Assets, der Code-Aufteilung und der Nutzung von Unitys Addressable Asset System, haben wir die anfängliche Payload-Größe erfolgreich auf 29 MB reduziert“, erklärt Loveridge.

Diese drastische Reduzierung verkürzte nicht nur die Ladezeiten erheblich, sondern machte auch Project Prismatic für ein breiteres Publikum viel zugänglicher, was schnellere anfängliche Ladezeiten und ein insgesamt reibungsloseres Spielerlebnis gewährleistete.

Das ULTRAHORSE-Team reduzierte die ursprüngliche Download-Bundle-Größe von 200 MB auf 133 MB zum Start. Sie teilen es dann zwischen 21 MB für obligatorische Pakete und 112 MB für bedarfsorientierte Pakete auf. „Die CPU-Ladezeit ist mehr als dreimal schneller als zu Beginn“, sagt Ropotovs. Profiling, Optimierung und das Deaktivieren unnötiger Bundles waren ein großer Teil davon.

Optimierung der Ladezeiten

Stratton Studios konzentrierte sich darauf, die Payload-Größe zu reduzieren, die Bereitstellung von Assets zu verbessern und die Gesamteffizienz zu steigern, um die Ladezeiten zu optimieren. Das Team verwendete die integrierte Asset-Kompression von Unity, um die Größe von Texturen, Audio und anderen Assets sowie die allgemeine Texturatlasierung zu minimieren.

Sie haben Lazy Loading für nicht wesentliche Assets implementiert, was es dem Spiel ermöglichte, kritische Komponenten zuerst zu laden und dann nach Bedarf zusätzlich Inhalte im Hintergrund über das Addressables-Framework progressiv zu laden.

Sie verwendeten das Addressable Asset System, um Assets effizient nach Bedarf zu verwalten und zu laden. Dies ermöglichte es ihnen, Ressourcen dynamisch zu laden, während die Spieler im Spiel vorankamen, und sicherzustellen, dass nur die notwendigen Daten zu einem bestimmten Zeitpunkt geladen wurden.

Das Cloud Content Delivery (CCD) Framework von Unity half dem Team, Assets von geografisch näheren Servern bereitzustellen. Dies reduzierte die Latenz und beschleunigte die Downloadzeiten für Spieler überall, da die Assets im Hintergrund geladen werden.

Sie stellten sicher, dass die Assets nach dem ersten Laden lokal auf dem Gerät des Spielers gespeichert wurden, was viel schnellere Ladezeiten bei nachfolgenden Ladevorgängen ermöglichte. Das Team hat den Code auch in kleinere, handhabbare Teile aufgeteilt, um nur den wesentlichen Code für das anfängliche Gameplay im Voraus zu laden und zusätzliche Funktionen und Module asynchron zu laden.

Test- und Debugging-Tools

Um die Leistungsbeschränkungen zu beheben, die sie bei der Verwendung von WebGPU festgestellt haben, verwendete das Stratton Studios-Team den Frame Debugger, um die ressourcenintensivsten Elemente zu identifizieren, wie hochauflösende Texturen, komplexe Shader und umfangreiche Zeichendistanzen. Von dort aus implementierten sie eine Reihe von Optimierungen, die darauf abzielten, die Last zu reduzieren, ohne die visuelle Qualität erheblich zu opfern.

„Wir haben Texturatlanten verwendet, um die Anzahl der Texturladungen zu minimieren, die Polygonanzahl in weniger kritischen Bereichen zu reduzieren und Matte-Paintings für weit entfernte Topologien einzusetzen, um die Renderkosten zu senken“, sagt Loveridge. Wir haben auch Techniken zur Detailstufe (LOD) angewendet, um das Rendering von entfernten Objekten effizienter zu verwalten.

Die größte Herausforderung bestand darin, ein Gleichgewicht zwischen Leistung und visueller Qualität zu finden. „Indem wir uns darauf konzentrierten, die anspruchsvollsten Aspekte des Spiels zu optimieren und die verfügbaren Werkzeuge in Unity intelligent zu nutzen, konnten wir ein visuell reichhaltiges Erlebnis bieten, das auf einer Vielzahl von Geräten gut funktionierte“, sagt Loveridge. Dieser Ansatz ermöglichte es uns, unsere künstlerischen Ziele zu erreichen und gleichzeitig sicherzustellen, dass das Spiel für alle Spieler, unabhängig von ihrer Hardware, zugänglich und angenehm blieb.

Um Projekt Prismatic zu debuggen, war das Team auch auf den Unity Profiler angewiesen, um ihre Leistungskennzahlen zu verfolgen, einschließlich CPU- und GPU-Nutzung, Speicherzuweisung und Bildraten. Es half ihnen, Engpässe in der Leistung zu identifizieren und die Leistung des Spiels zu optimieren, insbesondere in ressourcenintensiven Bereichen.

Schließlich hat Unity Cloud Diagnostics ihnen geholfen, Absturzberichte und Ausnahmen von Benutzern im Feld zu sammeln. Es gab ihnen wertvolle Einblicke in Probleme, die möglicherweise während der Entwicklung nicht erkannt wurden.

5. Umarmen Sie mehrere Webplattformen

Ein Tipp, den wir immer wieder von Studioexperten hören, ist: "Treffen Sie die Spieler dort, wo sie sind." Die Entwicklung für das Web gibt Ihnen die Möglichkeit, den Spielern ein einfaches, schnelles und zugängliches Spielerlebnis zu bieten. Mit mehr Hardware-Optionen, schnelleren Verbindungsgeschwindigkeiten und leistungsstarken Geräten in den Händen von mehr Spielern als je zuvor ist es wichtig, alle Ihre Optionen für die Bereitstellung auf verschiedenen Webplattformen zu berücksichtigen.

Feinabstimmung über Plattformen

Im Rahmen der Partnerschaft mit Spatial für eine multiplattformübergreifende Webveröffentlichung hat das PIGIAMA KASAMA-Team die Universal Render Pipeline (URP) angenommen, die bevorzugte Pipeline der Plattform. Die Flexibilität und Effizienz der Render-Pipeline waren für das Team besonders wichtig, als sie auf Webplattformen bereitstellten, da die plattformübergreifende Kompatibilität und Anpassungsfähigkeit ihnen halfen, 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. Aus der Perspektive der Spatial-Plattform erwarten wir, dass URP auch in zukünftigen Versionen von Unity unterstützt wird, während wir beginnen, diese zu unterstützen", erklärt Jakes Steinerman, Leiter der Entwicklerbeziehungen bei Spatial.

Die Server von Spatial haben individuelle Builds für jede Plattform erstellt. Sie hatten unterschiedliche Zielqualitäten für bestimmte Plattformen. „Die Tiefenschärfe funktioniert ziemlich gut auf WebGL, aber wir haben festgestellt, dass sie auf einigen mobilen Geräten weniger leistungsfähig ist“, sagt Fanchin. Andererseits ist Audio auf Android und iOS viel leistungsfähiger. Wir hätten Filter und EQ, ein Audio-Tool, das Entwicklern ermöglicht, die Lautstärke bestimmter Frequenzen innerhalb einer Audioquelle anzupassen, besser auf Android verwenden können, aber das hätte nicht auf WebGL 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 Textur mit höherer Auflösung verwendet, da der Bildschirm typischerweise größer ist, und haben Texturen mit niedrigerer Auflösung auf kleineren mobilen Bildschirmen integriert“, sagt Stella. Insgesamt war die Multiplattform-Veröffentlichung ziemlich nahtlos.

Rendering mit Leichtigkeit

Stratton Studios nutzte auch URP, um ein Gleichgewicht zwischen Leistung und Erweiterbarkeit zu finden. Ein Hauptmerkmal war die Fähigkeit von URP, benutzerdefinierte Render-Pipeline-Pässe einfach zu erstellen. Diese Flexibilität ermöglichte es dem Team, den Renderprozess fein abzustimmen, um ihren spezifischen Bedürfnissen gerecht zu werden, bestimmte visuelle Effekte zu optimieren und benutzerdefinierte Shader zu implementieren, die das Gesamtbild und -gefühl des Spiels verbesserten, ohne die Leistung zu beeinträchtigen.

Ich habe die Modularität von URP besonders geschätzt, die es uns ermöglichte, bestimmte Funktionen basierend auf den Fähigkeiten der Zielplattform zu aktivieren oder zu deaktivieren. Das erleichterte die Optimierung des Spiels für verschiedene Geräte, während ein konsistentes visuelles Erlebnis aufrechterhalten wurde," sagt Loveridge.

Von einer Multiplattform-Veröffentlichung profitieren

Es gibt zahlreiche Vorteile, ein Spiel auf mehreren Plattformen zu veröffentlichen, auch wenn dies Unterschiede im Arbeitsablauf mit sich bringen kann, die bei der Planung berücksichtigt werden müssen.

Indem wir SquadBlast auf dem Web und anderen Plattformen verfügbar haben, können wir ein viel breiteres Publikum erreichen. Spieler können problemlos in ein Spiel einsteigen, ohne etwas herunterladen oder installieren zu müssen, was die Einstiegshürde erheblich senkt," sagt Ropotovs.

Die Distribution ist auch ein wichtiger Faktor für das ULTRAHORSE-Team, und eine Webversion eröffnet eine ganz neue Welt von Kanälen, auf die das Team sonst keinen Zugriff gehabt hätte.

Sie haben SquadBlast zunächst auf ihrem eigenen Webportal unter SquadBlast.com gestartet. Dies gab ihnen einen großartigen Testbereich, um schnell zu iterieren, sofortiges Feedback von Spielern zu erhalten und schnelle Verbesserungen vorzunehmen. Von dort aus erweiterten sie sich auf größere Webspielportale wie CrazyGames, was für das Team bahnbrechend war.

Diese Seiten haben eine massive Reichweite – wir sprechen von zig Millionen monatlich aktiven Nutzern. Indem wir SquadBlast auf diese Portale setzen, konnten wir unser Spiel einem riesigen Publikum präsentieren, das wir möglicherweise nie über andere Vertriebskanäle erreicht hätten," erklärt Ropotovs.

Das Team sieht auch Chancen mit anderen Plattformen, die Webspiele einbetten, wie Messaging-Apps und soziale Medien. Wie Ropotovs sagt: „Die potenzielle Reichweite hier ist überwältigend, und die erheblich verbesserten Optimierungen für mobile Webtechnologie mit Unity 6 werden eine ganz neue Generation von Plattformen freischalten, um Spiele zu integrieren.“

Fazit

In diesem E-Book haben wir fünf Grundlagen für den Aufbau erfolgreicher Webspiele behandelt. Wir haben unsere Experten nach ihrem besten Tipp für die Webentwicklung gefragt.

Wenn Sie in Erwägung ziehen, ein Webspiel zu entwickeln, Ihr Spiel von einer anderen Plattform ins Web zu portieren oder ausschließlich nach neuen Informationen suchen, hoffen wir, dass die Erkenntnisse der Experten wertvoll und inspirierend waren.

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