Skip to main content

Creating Custom Hair Template

Hair Template Configuration File#

A hair template configuration file is a JSON file which should be located inside the /configs subfolder of your mod. There are specific rules for the filename of these files:

  • hair-[templatename].json for primary hairstyle template.
  • bangs-[templatename].json for bangs template.
  • wisps-[templatename].json for wisps/sideburns template.
  • facialhair-[templatename].json for facial hair template.

[templatename] should only contains alphanumeric characters and underscores.

You can see various examples of these filename rules in the Default Library, which is available in the /library subfolder inside Mannequin's installation directory.

Data Structure - Primary Hairstyle#

Below is an example of a primary hairstyle template file taken from the default library, hair-bundouble.json

{
"name" : "Double Bun",
"parts" : [ "ax", "ay", "bd" ]
}

name is the template name that will be displayed in Mannequin's user interface.

parts determines the variant code and their position relative to the head layer, which will affect the required SVG filename. SVG filenames for primary hairstyle follows this pattern: body-fronthair-[variant]-[pose].svg and body-backhair-[variant]-[pose].svg. The code for [pose] is determined by pose template file, and the code for [variant] is determined by the value inside parts. Below you can see how the layer order is generated based on example hair-bundouble.json above.

โ–ฒ Back
โ”‚
โ”‚ body-backhair-ax
โ”‚ body-backhair-ay
โ”‚ body-backhair-bd
โ”‚ body-head
โ”‚ body-fronthair-bd
โ”‚ body-fronthair-ay
โ”‚ body-fronthair-ax
โ”‚
โ–ผ Front

As you can see, for fronthair the first entry of parts will be displayed at the front, whereas for backhair, the first entry of parts will be displayed at the back. Please note that not every filename generated by this pattern must exist. For example, having body-fronthair-ax-1.svg while not having body-backhair-ax-1.svg is perfectly fine.

By default, Mannequin will look for this SVG file inside the default library folder. If you are making your own DLC and want to use your own graphic assets inside your own DLC's /components subfolder, you can add [your_dlc_authorid]:[your_mod_id]/ at the beginning of each parts item. For example: "parts" : [ "myAuthorID:myModID/ax", "myAuthorID:myModID/ay", "myAuthorID:myModID/bd" ].

Cast shadow must be a separate SVG image. [variant] for parts intended for cast shadow should always end with _shadow. Therefore as an example for cast shadow of body-fronthair-a usually we just use body-fronthair-a_shadow.

Data Structure - Bangs#

Below is an example of a primary hairstyle template file taken from the default library, bangs-halfwispy_right.json

{
"name" : "Half Wispy Bangs (Right)",
"parts" : [ "a", "a_shadow" ]
}

name is the template name that will be displayed in Mannequin's user interface.

parts determines the variant code and their position relative to the head layer, which will affect the required SVG filename. SVG filenames for primary hairstyle follows this pattern: body-fronthairbangs-[variant]-[pose].svg and body-backhairbangs-[variant]-[pose].svg. The code for [pose] is determined by pose template file, and the code for [variant] is determined by the value inside parts. Below you can see how the layer order is generated based on example bangs-halfwispy_right.json above.

โ–ฒ Back
โ”‚
โ”‚ body-backhairbangs-a
โ”‚ body-backhairbangs-a_shadow
โ”‚ body-backhair
โ”‚ body-head
โ”‚ body-fronthair
โ”‚ body-fronthairbangs-a_shadow
โ”‚ body-fronthairbangs-a
โ”‚
โ–ผ Front

As you can see, for fronthairbangs the first entry of parts will be displayed at the front, whereas for backhairbangs, the first entry of parts will be displayed at the back. Please note that not every filename generated by this pattern must exist. For example, having body-fronthairbangs-a_shadow-1.svg while not having body-backhairbangs-a_shadow-1.svg is perfectly fine.

By default, Mannequin will look for this SVG file inside the default library folder. If you are making your own DLC and want to use your own graphic assets inside your own DLC's /components subfolder, you can add [your_dlc_authorid]:[your_mod_id]/ at the beginning of each parts item. For example: "parts" : [ "myAuthorID:myModID/a", "myAuthorID:myModID/a_shadow" ].

Cast shadow must be a separate SVG image. [variant] for parts intended for cast shadow should always end with _shadow. Therefore as an example for cast shadow of body-fronthairbangs-a usually we just use body-fronthairbangs-a_shadow.

Data Structure - Wisps/Sideburns#

Below is an example of a primary hairstyle template file taken from the default library, wisps-shoulderlength_curly.json

{
"name" : "Curly Shoulder-length",
"left" : [ "c", "c_shadow" ],
"right" : [ "c", "c_shadow" ]
}

name is the template name that will be displayed in Mannequin's user interface.

left and right determines the variant code and their position relative to the head layer for each side of the hair wisps/sideburns, which will affect the required SVG filename. SVG filenames for primary hairstyle follows this pattern: body-fronthairwisps-[variant]-[pose].svg and body-backhairwisps-[variant]-[pose].svg. The code for [pose] is determined by pose template file, and the code for [variant] is determined by the value inside parts. Below you can see how the layer order is generated based on example bangs-halfwispy_right.json above.

โ–ฒ Back
โ”‚
โ”‚ body-backhairbangs
โ”‚ body-backhairwisps-c
โ”‚ body-backhairwisps-c_shadow
โ”‚ body-backhair
โ”‚ body-head
โ”‚ body-fronthair
โ”‚ body-fronthairwisps-c_shadow
โ”‚ body-fronthairwisps-c
โ”‚ body-fronthairbangs
โ”‚
โ–ผ Front

As you can see, for fronthairwisps the first entry of left/right will be displayed at the front, whereas for backhairwisps, the first entry of left/right will be displayed at the back. Please note that not every filename generated by this pattern must exist. For example, having body-fronthairwisps-c_shadow-1.svg while not having body-backhairwiss-c_shadow-1.svg is perfectly fine.

By default, Mannequin will look for this SVG file inside the default library folder. If you are making your own DLC and want to use your own graphic assets inside your own DLC's /components subfolder, you can add [your_dlc_authorid]:[your_mod_id]/ at the beginning of each parts item. For example: "left" : [ "myAuthorID:myModID/c", "myAuthorID:myModID/c_shadow" ].

Cast shadow must be a separate SVG image. [variant] for parts intended for cast shadow should always end with _shadow. Therefore as an example for cast shadow of body-fronthairwisps-a usually we just use body-fronthairwisps-a_shadow.

Hair Art Assets#

The color palette of your hair templates' graphic assets should always be limited to these:

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

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