Skip to content

06. Adding Clothing

Thomas "Tabski" Bartlett edited this page Dec 13, 2025 · 2 revisions

This assumes you've set up a .blend file.

Clothing is a bit more complex. If you don't have blender experience at this point, you're really going to struggle.

Creating the mesh

Once again, let's start with an existing mesh:

  • In your .blend file, go to File->Append
  • Double-click into the Yinglet-Clothes-Misc.blend file
  • Click into the Object folder
  • Click Clothes-Glasses-Vizlet
  • Click Append
  • It will bring in a copy of the rig and all the IK objects, you can safely delete all 6 of these by selecting them and pressing X
image
  • Rename the object as appropriate. I'm naming mine Clothes-Glasses-Star
image
  • Modify it to the desired shape.
image

Rigging

  • As with the hair, right click your glasses
  • Shift right click the rig
  • Hit CTRL-P
  • Select "Armature Deform"
  • As with the hair, go into edit mode, select all the vertices, and assign everything to the face Vertex Group
image
2025-11-24.15-09-13.mp4

UV setup

The glasses are simple and just use a basic grayscale ramp as their texture. Let's configure a material for this:

  • Go to the Ucupaint addon
  • Click "Quick Ucupaint Node Setup"
  • Set the Type to Emission and hit OK
image
  • Under Layers, click the (+) plus symbol and click Open Image...
  • Add the Assets\Art\Materials\Entities\Common\SimpleGrayscale (64x64).png image
image
  • Up near the top, add a UV Editing workspace

You should now see be able to edit the UVs:

image

Grayscale textures

Let's take a break for a moment to talk about how texturing actually works in Yinglet Creator.

Every single character creator texture is grayscale. This grayscaling is used as a color ramp for the actual user-defined colors.

Specifically, the colors are used at these points:

  • 0% lightness: the texture will be black
  • 25% lightness: the texture will be the Shade color
  • 75% lightness: the texture will be the Primary color
  • 100% lightness: the texture will be white

This graph may help clarify what I'm talking about:

image

If you're still confused, don't worry about it. All that's important is this:

  • If you want something to appear bright, texture it near 75% lightness.
  • If you want something to appear dark, texture it to 25% lightness.

In 90% of cases, you won't need to leave this 25%-75% range.

With this in mind, let's do the UVs for the glasses. Glasses use the color ramp directly, so we just need to unwrap it such that the vertices land directly on their lightness in the 25%-75% range.

image

With that done, we can export it back into Unity.

image

Creating the Toggle

If you've done the other tutorials, this part should be familiar:

  1. Make a copy of the ScriptableObjects/CharacterCompositor/CharacterToggleId/Clothes-Glasses/Clothes-Glasses toggle into your mod folder and give it a good name
  2. Give it a good DisplayName
  3. Set the Order->Index to something later
  4. Make a copy of the Added Mesh Reference and assign it
  5. Modify this new MeshWithMaterial such that the Skinned Mesh Renderer Prefab is our new mesh

Your assets should look like this:

image

And should be configured like this:

image

Note that we didn't have to define any MixTextures. This is because we can safely piggyback off the existing ones. This has an added benefit: if the user changes their type of glasses, the colors will be preserved.

image

Conclusion

This is really the tip of the iceberg as far as clothing goes. However, the core concepts remain the same for all clothing:

  • Create the models / textures in Blender
  • Create a CharacterToggleID
  • Configure it and any dependent toggles down the chain.

I've included two additional clothing assets in the sample app: a hat and a robe:

image

Clone this wiki locally