• 1. Prior Setup
  • 1.1 Subscribe to VFX Tools
  • 1.2 Add VFX Tools as a Project Reference
  • 1.3 IMPORTANT! Set VFX Tools as a Dependency
  • 1.4 Update usings
  • 1.5 The SpriteAsset
• 2. Designing the icon
  • 2.1 General visual guidelines
  • 2.2 Templates
• 3. Using StatusIconBuilders
  • 3.1 Create Mod Assets
  • 3.2 Create the Keyword and StatusEffect
  • 3.3 The Status Icon Builder
  • 3.4 Visual/Sound effects
• 4. Testing

If you haven't yet, make sure you are subscribed to the VFX Tools mod [Link]

This will be a similar process to the Basic Project Setup; Locate the DLLs of VFX Tools by opening the mods menu in-game, and pressing the Folder button.

This should open your File Explorer to the directory, which looks something like this. We can ignore everything except two DLLs:

1. VFX_Tests.dll
2. WildfrostHopeMod.Utils.dll

Now we just choose our favourite way to reference these into the project. I personally recommend this:

1. Right click while selecting the DLLs, and choose "Copy as path" or press SHIFT + CTRL + C. This will copy their filepaths to clipboard.

2. In the IDE, go to Add references (see Basic Project Setup again for how)
3. Choose to browse for files, and CTRL+V to paste the filepaths. Usually, this would be "C:\Program Files (x86)\Steam\steamapps\workshop\content\1811990\3157544232\WildfrostHopeMod.Utils.dll" "C:\Program Files (x86)\Steam\steamapps\workshop\content\1811990\3157544232\VFX_Tests.dll"

Setting any mod as a dependency is done in two steps:

1. Add the dependency mod's GUID (in this case, "hope.wildfrost.vfx") to your mod class's Depends array. So your mod code would start with something like this:

public override string GUID => "hope.wildfrost.tutorial";
public override string[] Depends => new string[] { "hope.wildfrost.vfx" }; // This is what's needed for icons!
public override string Title => "Tutorial: Creating Status Icons";
public override string Description => "Learn how to make a new status effect with a custom icon!";

2. Add VFX Tools as a Required item on your mod's workshop page. This should be done automatically if you did the previous step and try uploading your mod with the Mod Uploader [Link]. You should still check this regardless.

When you've uploaded your mod to the workshop, your mod's workshop page will have owner controls which let you add required items. Here you'll have to navigate to your Subscribed items. Find and add VFX Tools as required.

Before going further, we have to add some usings. At the top of your project file, you should have at least these:

using Deadpan.Enums.Engine.Components.Modding;
using System.Collections.Generic;
using System.Linq;
using UnityEngine;
using TMPro;                  // Declares TMP_SpriteAsset
using WildfrostHopeMod.Utils; // Creates TMP_SpriteAsset
using WildfrostHopeMod.VFX;   // Declares StatusIconBuilder

SpriteAssets will be required for icons to show up in text and effect descriptions. Assuming you've done the Initial setup in Tutorial 2, you need to declare some new variables:

// Already declared in Tutorial2
public static List<object> assets = new List<object>();
private bool preLoaded = false;

// TODO: This allows for icons in descriptions
public override TMP_SpriteAsset SpriteAsset => spriteAsset;
internal static TMP_SpriteAsset spriteAsset;

Next create a basic sprite asset in Load(), then register it.

public override void Load()
{
    if (!preLoaded)
    {
        // TODO: the spriteAsset has to be defined before any icons are made!
        spriteAsset = HopeUtils.CreateSpriteAsset(Title);
        
        CreateModAssets(); // <- where icons are made
        preLoaded = true;
    }
    // TODO: Let our sprites automatically show up for icon descriptions
    SpriteAsset.RegisterSpriteAsset();
    base.Load();
    }

... and unregister in Unload()

public override void Unload()
{
    // TODO: Prevent our icons from accidentally showing up in descriptions when not loaded
    SpriteAsset.UnRegisterSpriteAsset();
    base.Unload();
}

1. Padding!!: All vanilla icons in the game come in a square format, with about 10% transparent padding around them. E.g., a 170x170 icon would have 17 pixels of padding.
2. Visual clarity: Stackable vanilla icons (that show numbers) usually have flatter colors in the area where numbers appear (the black triangle in the example below). The numbers' shadow color usually share this flat color.

In these examples, the black area is where numbers will appear for stackable icons. Since Health () shows how many stacks it has, its center is simpler compared to Lumin () which doesn't need to show numbers.

These are some useful templates when making icons:

• Fonts:
  • English: [Link]
  • Japanese: [Link]
  • Korean: [Link]
  • Chinese Simplified: [Link]
  • Chinese Traditional: [Link]
• Icon template PSD: [Link] (Manually press "Download raw file")
• Card with icon template PSD: [Link] (Manually press "Download raw file")