This tutorial explains how to create a Customizable Object with a feature that allows for changing and choosing a character's skin tone. Once the tutorial's steps are followed and compiled, a selector slider, with a color skin bar on top, will be displayed and the user will be able to select a skin tone through it and to see immediately the variation applied to the character.
= Change the skin tone of a character
(NOTE) The resulting Customizable Object of this example can be found in the [[ https://work.anticto.com/w/mutable/unreal-engine-4/examples/#village-demo | Village Demo ]] in //Content/Examples/HowTo// named "SkinTone"
== Assets required
* One material asset or material instance with one color parameter (it may or may not have textures but only one slot converted to parameter)
* One skeletal mesh with only one material slot
* One texture asset of the base skin texture of the character
* One texture asset of a "skin bar color"
(NOTE) The assets used in this example can be found in the [[ https://work.anticto.com/w/mutable/unreal-engine-4/examples/#village-demo | Village Demo ]] in //Content/HowTo/SkinTone//
1) The first step is to create a [[ URL | Customizable Object]] asset. Open it and name the [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/base-object/ | Base Object ]] node in the [[ URL | Graph Node Properties ]] and set a [[ URL | Reference Skeletal Mesh ]] in the [[ URL | Object Properties ]] tab.
> The Customizable Object asset in the Unreal Engine Content Browser. In this example, the Customizable Object asset is named "SkinTone"
2) Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/material/ | Material ]] node and connect the "Material" connection to the "LOD 0" one of the **Base Object**. With the **Material** node selected, set material in the Graph Node Properties.
From the "Mesh" connection of the** Material** node, drag and drop to create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/skeletal-mesh/ | Skeletal Mesh ]] node. Then, with the **Skeletal Mesh** node selected, set a skeletal mesh in the Graph Node Properties.
> In this example, the Material asset used is "SkinTone_Material" and the Skeletal Mesh is "SkinTone_Mesh"
(WARNING) Step 1 and 2 are explained with more detail in the "Create a basic Customizable Object" page. The next steps are specific to create the "change the skin tone" nodes.
3) As the objective is to change the skin tone of the character, a node that can modify the texture parameters of the object's material is needed. The [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture-layer/ |Texture Layer ]] node allows modifying a base texture with blending options and masks. From the "Base Color" connection in the **Material** node, create a **Texture Layer** node.
4) With the **Texture Layer** node selected, add a new layer clicking on the (+) icon in the Graph Node Properties.
5) Still in the **Graph Node Properties**, click to unfold the tab of the new layer created. Choose the effect of blending among all the options displayed unfolding the Effect sub-tab. This effect will determine the visual interaction between the texture to be added to create the skin tones and the base layer.
> In this example, "Cotle_Soflight" is used.
6) Create a **Texture** node dragging and dropping from the "Base" connection of the **Texture Layer** node.
> Each layer created in the **Texture Layer** node has two connections: the "Layer 0" and the "Mask" connections.
7) With the new **Texture** node selected, choose a base texture for the character skin in the **Graph Node Properties**. This texture is the one on which the blending effect will be applied.
> In this example, the "Bandit_Standard_D" texture is used.
8) Create a **Texture** node from the "Mask 0" connection of the **Texture Layer**. Add a black-and-white texture which masks in black the non-skin parts of the base texture and leaves the rest in white.
> In this example, for the "Mask 0" connection, the "Bandit_SkinMask" texture is used.
9) In the "Layer 0" connection, a texture with color information is to be connected. This texture will be the one to blend with the "Base" texture through an effect (set in //Step 5//) to get different skin tones. The texture could be a **Color Texture**, a **Color Parameter** or a **Sample Texture**. As the objective is to get a "color slider selector" for being able to choose the skin color directly by clicking and previewing the result, the most suitable node is the **Sample Texture** node. Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/sample-texture/ | Sample Texture ]] node. Connect it from the "Color" connection to the "Layer 0" one of the **Texture Layer** node.
10) Create a **Texture** node from the "Texture" connection in the **Sample Texture** node. Choose a "skin color bar" texture.
> In this example, the" SkinTone_ColorBar" texture is used.
11) Click and drag from the "X "connection in the **Sample Texture** node to create a **Float Parameter** node. This node allows picking a horizontally-based value from the color bar texture.
12) Select the **Float Parameter** node and name it in the Graph Node Properties tab. This name is appearing next to the color bar when compiling.
Change the Default Value in the *Graph Node Properties tab if preferred. It is to provide the color value chosen as the default one after compiling the first time.
Click the (**+**) icon in the "Description Image" to enable the option of showing an image in the slider selector.
>In the example, the Parameter Name used is "Skin Tone".
13) Back to the **Source Graph**, connect the "Description Image 0" connection of the** Float Parameter** node to the "Image" one of the **Texture** node.
14) Before compiling, check that the **Source Graph** looks similar to the example below:
15) Compile. The result should look similar to the image below. The "selector slider" must work when choosing a color and be immediately applied on the character's skin.
> The resulting mesh in the [[ URL | Preview Instance Viewport ]] tab and the selector slider in the [[ URL | Preview Instance Properties ]].