FiveM Loading Screen mit Musik für einen RedM-Roleplay-Server
Der Betreiber eines Roleplay-Servers für RedM hat mich beauftragt, einen neuen Ladebildschirm zu bauen. Entstanden ist ein FiveM Loading Screen, der genauso unter RedM läuft: Statt eines Standbilds mit Ladebalken sieht der Spieler eine von vier animierten 2D-Figuren. Sie atmen, blinzeln und schauen sich um, bei einer weht der Mantel im Wind. Alle 25 Sekunden blendet der Ladebildschirm zur nächsten Figur über, und dieselbe Figur kommt nie zweimal hintereinander.
Dazu läuft Musik. Unten im Bild liegt eine Schallplatte, deren Label sich dreht, daneben eine Playlist mit eigenen Titeln des Servers. Die Musik läuft über alle Szenenwechsel hinweg durch, weil der Player außerhalb der Szene liegt und nie neu erzeugt wird.
Technisch ist das eine einzelne HTML-Seite mit Bildern und einer JSON-Datei je Figur, ohne Build-Schritt und ohne Abhängigkeiten. Sie läuft im Chromium 103, das RedM und FiveM für ihre Spielseiten verwenden, und ebenso in jedem aktuellen Browser. Der Name des Servers bleibt hier auf Wunsch des Kunden ungenannt.
Der Ladebildschirm sollte den Spieler in die Stimmung des Servers holen, bevor das Spiel überhaupt geladen ist. Bewegte Figuren aus dem Artwork des Servers, eigene Musik, und das Ganze so gebaut, dass der Betreiber neue Figuren ergänzen kann, ohne am HTML oder an einer Funktion etwas zu ändern.
Dazu kam eine harte Randbedingung: Der Ladebildschirm teilt sich die Rechenzeit mit dem ladenden Spiel. Was auch immer ich baue, darf die Musik nicht ins Stocken bringen, auch nicht auf schwachen Rechnern.
Die üblichen Werkzeuge für 2D-Figurenanimation passten nicht zum Ziel. Spine und Live2D zeichnen in ein Canvas, das sich nicht mit dem Rest der Seite gestalten oder überblenden lässt; Spine kostet außerdem Geld, und die Laufzeitlizenz ist an eine Editor-Lizenz gebunden. Godot exportiert fürs Web ein WASM-Paket von einigen Dutzend Megabyte, zu viel für eine Seite, die sofort da sein muss. Gebraucht habe ich Ebenen im DOM mit CSS-Transformationen, in einem Chromium von 2022, ausgeliefert als Ordner zum Kopieren.
Das zweite Problem war der Speicher. Jede Ebene einer Figur kommt als volle Leinwand an, auch wenn nur eine Rauchwolke in der Ecke steht, und der Browser packt jedes Bild in voller Größe in rohe Pixel aus. Bei der Demo-Figur Pedro waren das 60 Bilder mal 1792 × 1000 Pixel mal 4 Byte, rund 410 MB für eine einzige Figur. Auf schwachen Rechnern wirft der Browser dann Bilder weg und packt sie kurz darauf neu aus, und genau in diesen Momenten stockt die Musik.
Die Animation läuft über idle-web-animation, eine kleine Engine, die ich dafür geschrieben und als Open Source veröffentlicht habe. Eine Figur ist darin ein Stapel von Bildebenen plus eine JSON-Datei, die Drehpunkte und Bewegungen beschreibt; die Engine rechnet daraus für jeden Zeitpunkt denselben Zustand, ohne Zufall und ohne Build-Schritt. Der Ladebildschirm nutzt sie unverändert. Eine neue Figur ist ein Ordner mit Bildern, eine figure.json und ein Eintrag in der Szenenliste; das kann der Betreiber selbst.
Das Speicherproblem hat ein Zuschneide-Werkzeug gelöst. Es schneidet jede Ebene auf den Bereich zu, in dem überhaupt etwas zu sehen ist, und schreibt den Versatz in die figure.json, damit der Player das Bild wieder an dieselbe Stelle setzt. An der Bewegung ändert sich nichts, aus 547 MB wurden 34 MB. Die Rotation zieht beim Start eine zufällige Figur, wechselt alle 25 Sekunden und mischt erst neu, wenn jede Figur einmal dran war; welche zuletzt lief, merkt sich localStorage, damit die nächste Sitzung mit einer anderen beginnt. Für schwache Rechner gibt es einen Sparmodus, der die Figur als Standbild zeigt, während Musik und Player weiterlaufen.
Dasselbe Prinzip funktioniert außerhalb von Spielen. Wenn Sie auf einer Produktseite, einem Messe-Display oder der Website eines Spiels eine gezeichnete Figur zeigen wollen, die atmet und dem Mauszeiger folgt, brauchen Sie dafür weder ein Spiele-Framework noch eine Editor-Lizenz: Ebenen, eine JSON-Datei und ein Skript reichen. Wie die Technik im Einzelnen arbeitet, erkläre ich im Blog-Beitrag „Spine-Alternative kostenlos: Idle-Animation für 2D-Figuren im Browser“, der unten auf dieser Seite verlinkt ist.
Die Vorschau lädt erst nach dem Klick und kann Ton abspielen.