Change the skin color

What is the HowTo about?

In this HowTo we are going to make the skin color of our character customizable by blending a color over our base texture.

What assets are needed?

All the assets from the basic custom object HowTo.

An adapted Base Color Texture (see Asset Hint Creation).

A Mask Texture selecting the skin parts.

A Color Bar Texture with skin tones.

The object of this example can be found as "Bandit_SkinColor" in MutableExamples/Bandit/CustomObjects/HowToExamples


The Texture Layer node

To change the skin tone of a character, what we need is to modify the texture parameters of the object's material. To do this, we'll use the node Texture Layer, which allows us to create several blending options with images and masks.

1 - Inside the Custom Object, create a Texture Layer node by right-clicking on the background and typing the name of the node. By default, this node has an input connection called Base and we can add more elements (Layers) to it by clicking the "+" button in the Graph Node Properties tab.

The Base parameter will be the base texture (on the bottom) in which we'll be applying the blending effects with other textures. Each Layer we create will have two connections: the Layer itself and the Mask channel. In the Layer, we'll connect the texture we want to blend. If needed, the mask will be a B/W texture that will filter which parts of the Base texture will be affected by the blended texture. In the properties tab we'll have to select which effect we want for each layer.

For more detailed information about the Texture Node, check the Node Reference page.

Blending colors over the skin texture

2 - Starting from this basic custom character, we are going to edit the Color texture parameter from the character's material. So we connect the Texture Layer node to the Color parameter:

3 - Connect the base color texture in the Base connection by dragging and dropping the texture or creating a Texture node. This texture will be the one in which to apply the blending effect.

4 - Create and import a texture masking the skin parts of the base texture. Connect it to the Mask 0 connection in the Texture Layer node:

We want to blend a color with the Softlight effect over the base texture. To do this, we have to connect color information to the Layer 0. We could connect a color texture, a color parameter or, as in this case, a sample texture from which to pick a custom color.

5 - Create a Sample Texture node and a Float Parameter node. Import a texture that works as a pickable color bar.

Sample texture node allows to pick a point (a color) from a texture. In this case, we'll pick a horizontal value (as the color bar changes only horizontally) from the bar with a Float Parameter.

6 - Connect the color bar texture and the Float Parameter to the Sample Texture node. Name the float parameter (e.g "Skin Tone") and add a Description Image element in the Graph Node Properties. Connect the color bar texture to the Description image connection in the Float Parameter node.

Now, the value of the "Skin Tone" parameter will pick a color from the color bar. The Description Image will be displayed as a color bar in the Preview Inst. Properties tab after compiling.

This is the whole node structure connected to the Color parameter in the object's material:

7 - Save and compile.


You can check the blending effect in the Preview Instance Properties and Viewport:

Adding custom color for the eyes

Following the same principle we could make the eyes color customizable. In this case, the texture of the eye is in the same Material, so we just have to add a new Layer to the Texture Layer node and blend a color through a new mask.

1 - Add another Layer in the Texture Layer node. Set a blending mode (in our case, Hardlight).

2 - Create and import a texture that masks the modifiable eye part. Connect it to the new layer mask (Mask 1).

3 - Create a new Sample Texture and a new Float Parameter (we named this one Eyes Color). Create and import an eyes color bar. Connect them as in the skin tone node group:

4 - Save and compile. Now the character has two parameters that control two color bars: