Visualize Satisfactory savegames with FeliX

At the moment you don’t hear much from me, as I am currently busy writing my master thesis. Or at least I should be. Instead, I’m procrastinating by writing this blog post.

This is exactly how I procrastinated last year in March when the Satisfactory alpha weekend took place. After the weekend you couldn’t play the game anymore, but the savefames were still there. So, like some others, I spent my time reverse engineering the save games.

This resulted in a TypeScript library which converts the save games to human readable JSON files. Most of the serialization of the save games is done with the Unreal Engine serializer. The save games contain not only the status of the player and information about the buildings, but also the data of the environment, e.g. resource locations, enemy spawns and plants.

To visualize the save games I created the web app FICSIT - Felix (Yes, this is a reference to Fix-It Felix Jr. from Wreck-It Ralf). This was the first time I built such a real JavaScript web application and I chose Vue.js with TypeScript. The 3D graphics are created in WebGL with the library three.js.

The first version rendered colored boxes at the places where objects are located. Then I started to create simple, very rough models to make it easier to distinguish the different buildings. Cale came along and made very nice low-poly 3D models for the buildings.

A special feature are the conveyor belts. These are saved in the savegame as splines with the corresponding control points. The existing spline code in three.js had to be adapted to extrude a cross-section (rectangle) and create the model from it. The same code is also used for rails and tubes.

To make the whole thing more performant, the buildings are rendered with instancing as long as they are not selected. This means that for each type of building, the geometry only needs to be sent once to the GPU, and the transformation and color for the instances are stored in an array. When a building is selected, the instance is moved far outside the visible area and a regular mesh is inserted. If you move the mesh and then deselect it again it will be removed and the instance will be moved to the new position.

Initially I built a web app because I thought it would be difficult to convince users to download an application just to inspect the savegame. But little by little the players built bigger and bigger factories and the reading and processing of these files in the web browser took a long time. So I also built an Electron app for the desktop, which shares a lot of the code with the web app. The Electron app can read the files directly in node.js in the background process. It can also directly read the folder of Satisfactory and thus offer the user a familiar menu to select the games.

I still have a lot of ideas to add more visualization and editing features to FeliX. If you want to help or just want to have a look at the code, you can find it on GitHub.

Now that I’ve procrastinated enough, I should get back to my master thesis.