Creating Your Own Mods

Creating an Empty Mod

The first step to create your own mods is by creating an empty mod. To do this, open the Developer Tools sidebar (make sure to Enable Developer Mode first in Preferences) and then click the right pointing triangle beneath the thumbnail image at the top. Click Create a New Empty Library and you will be prompted to select a folder in which your mod files will be stored.

caution

Always use an empty folder and make sure the folder name only uses letters (uppercase or lowercase) and numbers!

After that, your empty mod will be created. You can click Edit Library Information to input further details regarding this mod.

caution

Use only letters (uppercase or lowercase) and numbers for authorid and id!

You can also click Open Library Folder to view the mod files via File Explorer or Finder. You will see that the empty folder that you have chosen now contains several subfolders and some files. These are:

• components subfolder. This folder should be used to store SVG files for your mod's graphical assets.
• configs subfolder. This folder should be used to store JSON files for your mod's template configurations.
• thumbnails subfolder. This folder should be used to store PNG files for your mod's template thumbnails.
• cover.png file. This image is what will be shown at the top of Developer Tools sidebar, and also will be set as cover image if you choose to upload your mod to Steam Workshop.
• mannequin-library.json file. This file contains your mod information which are previously inputted via Edit Library Information.

By now, your empty mod is ready and you can start making some templates!

How Mannequin Character Generator Works: Graphical Assets and JSON Configurations

Mannequin Character Generator renders your character by displaying multiple SVG files which are drawn based on the configurations loaded from various JSON files. These JSON files can be pose template, clothing template, hairstyle template or other things. The easiest way to get the example of these JSON files is by browsing the Default Library. To do this, click the right pointing triangle beneath the thumbnail image at the top of Developer Tools sidebar and choose Default Library. After that, click Open Library Folder.

You can see that the default library folder structure is pretty much similar with your newly created mod, minus the mannequin-library.json file. Therefore you can open the files inside to take a grasp about how things work. There is no encryption or anything, everything is pretty much in the open.

If you're not yet familiar with JSON, this material can help you get up to speed before starting to work with your own custom clothing template.

SVG Limitations

Mannequin Character Generator uses SVG format for its graphic assets. To ensure maximum compatibility with all of the available features, make sure that there is no bitmap parts in your SVG file. Some vector graphic apps convert gradients to bitmaps when exporting as SVG, so double-check your output to make sure that your app of choice behaves as expected. At this moment, the recommended apps to use are Illustrator (the same that we use) and Inkscape (for lower cost alternative).

Please note that with the current state of SVG, only linear and radial gradient can be used.

The color palette of your SVG assets should always be limited to these:

• Most body parts:

  • Fill (both solid and gradients): #FFE4D1 (base color), #FFEDE1 (highlight color), #F4AD9D (shadow color), #F5F5F5 (backlight color)
  • Stroke: #AB5849

• Hair, Brow, Eyelash:

  • Fill (both solid and gradients): #563426 (base color), #6B4839 (highlight color), #2D201C (shadow color), #F5F5F5 (backlight color)
  • Stroke: #211B15

• Iris:

  • Fill (both solid and gradients): #743174 (base color), #BD58A5 (highlight color), #2B072B (shadow color), #F5F5F5 (backlight color)

• Clothing:

  • Fill (both solid and gradients): #3C4C72 (base color), #4B5D7F (highlight color), #131C43 (shadow color), #F5F5F5 (backlight color)
  • Stroke: #0C1535

• Cast shadows:

  • Fill (both solid and gradients): #151515

Cast shadows must be separate SVG files because a different blending mode will be applied to them.