Replacing Base Game Text & Images

Note

Before following any guide on this page, create a template by following the steps in Setup first. If you only want to replace assets, use the Empty Slay the Spire 2 Mod template. Make sure to follow the section about publishing.

Folder Layout

Before we begin, I'd like to make a note about folder layout, as the layout in this guide is different from how you would do it for most other mods.

A typical mod layout looks like this:

ModName
├── ModName
│   ├── localization
│   │   ├── cards.json
│   │   └── ...
│   └── images
│       ├── card_portraits
│       └── ...
├── ModNameCode
│   ├── MainFile.cs
│   └── ...
├── ModName.csproj
├── ModName.json
├── ModName.sln
└── ...

Pay close attention to the nested ModName folders. In this setup, files inside of localization are merged with base game localization files, and files inside of images are ignored by the base game (your mod can still load them).

If you instead format your project like this (no nested ModName folders):

ModName
├── localization
│   ├── cards.json
│   └── ...
├── images
│   ├── card_portraits
│   └── ...
├── ModNameCode
│   ├── MainFile.cs
│   └── ...
├── ModName.csproj
├── ModName.json
├── ModName.sln
└── ...

Then files inside of localization or images will replace those from the base game. This is almost never what you want for localization, but placing files in the images folder can be used to replace assets in the base game, which is what we'll be doing in this guide.

Replacing Images

Most images in Slay the Spire 2 are stored in 1 of 2 ways - either as individual pngs, or in an atlas. Some images have large and small variants, and some images have separate outline variants.

In this guide, I will cover replacing relic images, as this encompasses all of those variants. Other images can be replaced using the same steps.

The first step is to find where in the game files the relic images are located. You can do this by looking through the game's extracted assets (obtained by following the steps on the Extracting Assets and Text page).

Each relic has 3 different images. For akabeko,

• large image is at images/relics/akabeko.png
• small image is at images/atlases/relic_atlas.sprites/akabeko.tres
• small outline image is at images/atlases/relic_outline_atlas.sprites/akabeko.tres

Those last 2 are rectangular regions of atlases (located at images/atlases/relic_atlas.png and images/atlases/relic_outline_atlas.png)

So, in order to replace a relic's image in-game, we need to replace all 3 of these.

Large Relic Images

I'll start with the large image, as that's the easiest. For assets that aren't stored in an atlas (e.g. enchantments), this would be the only step you need to do.

Start by opening up your project in the godot editor

• If you have Rider open, you can click this button in the top right (If it doesn't appear, make sure your godot path in Directory.Build.props is correct)

• Otherwise, run godot, click Import and select your project folder

Next, place your image at the exact same filepath as the one you want to replace. Akabeko is at images/relics/akabeko.png, so I'll place a png at that location. I determined the dimensions of this png (256x256) by looking at the size of akabeko.png in the extracted sts2 assets.

If you publish your project now, the image will show up in-game:

However, this only replaces the large relic image shown when inspecting a single relic, and not the small one shown in the compendium or relic bar.

Small Relic Images

Small relic images are stored in an atlas, and they require more steps to replace than the large image. Cards and potions are also stored in atlases, so you would adapt these steps if you want to replace those.

The small image files in the game end in .tres and not .png. Here, .tres is the extension for Godot's resource format. Godot Resources can be used for all sorts of things, in this case we want to create a resource that points to a png.

Start by placing your image somewhere in your project folder (in ModName/images is a good place for them, but exactly where doesn't matter). I determined the size of this image by looking at the last 2 numbers in this line of the akabeko.tres file (in this case, 81x69):

region = Rect2(1616, 536, 81, 69)

Then, double click your image in the File System pane to open it up in the Inspector pane on the right. Find and copy the Load Path field

Next, at the exact same filepath as the image you want to replace, right click > Create New > Resource > search for CompressedTexture2D. Akabeko is at images/atlases/relic_atlas.sprites/akabeko.tres, so I'll create it there.

Finally, double click on the resource (.tres file) you created in the previous step, and paste the path you copied earlier into its Load Path field

If you publish your project now, the small image will show up in-game:

It's a bit hard to tell in this image, but the outline is still that of akabeko (there's a black blob on the right side).

The last step is to replace the outline image. The process for the outline image is exactly the same as replacing the small image - just use a different path. In akabeko's case, it would be images/atlases/relic_outline_atlas.sprites/akabeko.tres for the outline. To create your outline image, create an all-white version of your small relic image that's slightly larger.

---

Old Replacing Card Images Guide

• Open up your project folder in the godot editor
  • If using rider, you can click this button in the top right (If it doesn't appear, make sure your godot path in Directory.Build.props is correct)

• Place your custom image(s) somewhere in your project folder (in ModName/images is a good place for them)

  • Image dimensions should be a multiple of 500x380 (e.g. 250x190 or 1000x760)

• Open your custom image in the File Editor pane of the godot editor and double click it to open it up in the inspector panel on the right. Find and copy the Load Path field

• Recreate the same folder structure as the base game card you want to replace the art of

  • Example: images/atlases/card_atlas.sprites/ironclad/strike_ironclad.tres
  • Look at Extracting Assets and Text to see the base game folder structure for yourself

• In the godot editor, right click > Create New > Resource > select CompressedTexture2D

• Double click on the resource (.tres file) you created in a previous step, and paste the path you copied earlier into its Load Path field

• Finally, publish your project, and your changes should appear in-game

---

Replacing Text/Localization

Since mods are loaded after the base game, using the same localization keys as the base game will cause your mod to replace certain parts of base game localization during the merging process (using the first layout mentioned at the top of this page).

For example, creating a file at ModName/localization/eng/cards.json with the following contents will change the title and description of ironclad's starter strike:

{
    "STRIKE_IRONCLAD.title": "Strike 2",
    "STRIKE_IRONCLAD.description": "Electric Boogaloo"
}

Make sure to publish so that your changes show up in-game.

This pattern can be used to change any text in the base-game, look at Extracting Assets and Text to be able to view all base game localization.