Satisfactory Spielstände visualisieren mit FeliX

Momentan hört man nicht viel von mir, da ich gerade an meiner Masterarbeit schreibe. Oder zumindest sollte ich das. Stattdessen prokrastiniere ich gerade indem ich diesen Blogbeitrag schreibe.

Genau so habe ich letztes Jahr im März prokrastiniert als das Alpha-Wochenende von Satisfactory stattfand. Nach dem Wochenende konnte man das Spiel erstmal nicht mehr spielen, aber die Spielstände waren noch vorhanden. So verbrachte ich, wie ein paar andere auch, meine Zeit damit, die Spielstände zu reverse engineeren.

Dabei ist eine TypeScript Bibliothek entstanden, die die Spielstände zu menschenlesbaren JSON Dateien umwandelt. Die Spielstände wurden zum Großteil mit dem Serialisierer der Unreal Engine geschrieben. In den Spielständen finden sich nicht nur Statuseigenschaften des Spielers und Informationen über die Gebäude, sondern auch die Daten der Umgebung, bsp. Erzstandorte, Gegnerspawns und Pflanzen.

Um die Spielstände zu visualisieren habe ich die Web App FICSIT - Felix erstellt. (Ja, das ist eine Anspielung auf Fix-It Felix Jr. aus Wreck-It Ralf) Das war das erste Mal, dass ich so eine richtige JavaScript Webanwendung gebaut habe und ich habe mich für Vue.js mit TypeScript entschieden. Die 3D Grafiken werden in WebGL mit der Bibliothek three.js erzeugt.

Die erste Version renderte farbige Boxen an den Stellen wo sich Objekte befinden. Dann habe ich angefangen einfache, ganz grobe Modelle zu erstellen, um die verschiedenen Gebäude einfacher unterscheidbarer zu können. Cale kam dazu und hat sehr schöne low-poly 3D Modelle für die Gebäude gebastelt.

Eine Besonderheit sind die Conveyor Belts. Diese sind im Savegame als Spline mit den entsprechenden Kontrollpunkten abgespeichert dafür musste der existierende Spline Code in three.js angepazst werden um einen Querschnitt (Rechteck) zu extrahieren und daraus das Modell zu erstellen. Der selbe Code wird auch für Schienen und Röhren verwendet.

Um das Ganze performanter zu machen, werden die Gebäude, so lange sie nicht ausgewählt sind, mit Instancing gerendert. Das heißt, für jede Gebäudeart muss die Geimetrie nur einmal zur GPU gesendet werden zusätzlich mit einem Array in dem Transformation und Farbe für die Instanzen gespeichert werden. Wenn ein Gebäude ausgewählt wird, wird die Instanz weit außerhalb des sichtbaren bereich verschoben und ein normales Mesh eingefügt. Wenn man das Mesh verschiebt und dann wieder deselektiert wird es wieder entfernt und dir Instanz wird auf die neue Position verschoben.

Initial habe ich eine Webapp gebaut, da ich dachte, dass es schwierig wäre Nutzer davon zu überzeugen sich eine Applikation herunterzuladen, nur um damit das Savegame inspizieren zu können. Nach und nach bauten die Spieler allerdings immer größere Fabriken und das Einlesen und Verarbeiten dieser Dateien im Webbrowser brauchte sehr lange. Daher habe ich auch noch eine Electron App für den Desktop gebaut, die sich in großen Teilen den Code mit der Web App teilt. Die Electron App kann im Hintergrund-Prozess in node.js die Dateien direkt einlesen. Außerdem kann sie direkt den Ordner von Satisfactory einlesen und dem User so ein bekanntes Menü zur Auswahl der Spielstände bieten.

Ich habe immer noch jede Menge Ideen um FeliX mit weiteren Visualisierungs- und Bearbeitungsfeatures auszustatten. Falls du helfen möchtest oder einfach nur mal in den Code reinschnuppern möchstest, findest du ihn auf GitHub. Jetzt habe ich aber genug prokrastiniert und sollte weiter an meiner Masterarbeit schreiben.