Change Details

== Overview 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 mask texture of the character's skin * One texture asset of a "skin color bar" (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// == Steps 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. {F85446} > 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. {F85479} 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. {F85450} > 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. {F85452} 4) With the **Texture Layer** node selected, add a new layer clicking on the (+) icon in the Graph Node Properties. {F85455} 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. {F85457} > In this example, "Cotle_Soflight" is used. 6) Create a **Texture** node dragging and dropping from the "Base" connection of the **Texture Layer** node. {F85459} > 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. {F85461} > 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. {F85463} > 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. {F85465} 10) Create a **Texture** node from the "Texture" connection in the **Sample Texture** node. Choose a "skin color bar" texture. {F85467} > 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. {F85469} 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. {F85471} >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. {F85473} 14) Before compiling, check that the **Source Graph** looks similar to the example below: {F85475} 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. {F85477} > The resulting mesh in the [[ URL | Preview Instance Viewport ]] tab and the selector slider in the [[ URL | Preview Instance Properties ]].

== Overview 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 mask texture of the character's skin * One texture asset of a "skin color bar" (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// == Steps 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. Image Step 1 > The Customizable Object asset in the Unreal Engine Content Browser. In this example, the Customizable Object asset is named "SkinTone" 2) As the objective is to change the skin tone of the character, a node that can modify the texture parameters of the skeletal mesh's material and apply a "color bar" instead of a simple texture is needed. A Texture Layer node allows modifying a base texture with blending options and masks. From the "Base Color" connection in the **Material** node, create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture-layer/ |Texture Layer ]] node. Image Step 2 3) With the Texture Layer node selected, in the Graph Node Properties tab, click the "+" button in the Layers sub-tab. This creates a layer that results in two new slots in the Texture Layer node. Image Step 3A > Each layer created in the **Texture Layer** node has two connections: the "Layer X" and the "Mask X" connections. 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. Image Step 3B > The Effect in this example is left by default as "Cotle Softlight". 4) Create a **Texture** node dragging and dropping from the "Base" connection of the **Texture Layer** node. Image Step 4 5) With the new **Texture** node selected, choose a base texture for the character in the Graph Node Properties tab. This texture is the one on which the blending effect will be applied. Image Step 5 > In this example, the "SkinTone_BaseTexture_D" texture is used. 6) Create another **Texture** node from the "Mask 0" connection of the **Texture Layer**. This texture is the mask related to the skin color of the character. Image Step 6 7) In the Graph Node Properties, choose a black-and-white texture which masks in black the non-skin parts of the base texture, for example, the eyes, and leaves the rest in white. Image Step 7 > In this example, for the "Mask 0" connection, the "SkinTone_SkinMask" texture is used. 8) In the "Layer 0" connection, a texture with color information is to be connected. This texture is the one to blend with the "Base" texture through an effect (set in Step 5) to get different skin tones. As the objective is to get a "color slider selector" 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. {F85465} 10) Create a **Texture** node from the "Texture" connection in the **Sample Texture** node. Choose a "skin color bar" texture. {F85467} > 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. {F85469} 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. {F85471} >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. {F85473} 14) Before compiling, check that the **Source Graph** looks similar to the example below: {F85475} 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. {F85477} > The resulting mesh in the [[ URL | Preview Instance Viewport ]] tab and the selector slider in the [[ URL | Preview Instance Properties ]].

== Overview 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 mask texture of the character's skin * One texture asset of a "skin color bar" (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// == Steps 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. {F85446}Image Step 1 > 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**As the objective is to change the skin tone of the character, a node that can modify the texture parameters of the skeletal mesh's material and apply a "color bar" instead of a simple texture is needed. A Texture Layer node allows modifying a base texture with blending options and masks. WithFrom the **Material** node selected"Base Color" connection in the **Material** node, set material in the Graph Node Properties. {F85479}create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture-layer/ |Texture Layer ]] node. Image Step 2 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.3) With the Texture Layer node selected, Thenin the Graph Node Properties tab, withclick the **Skeletal Mesh** node selected,"+" button in the Layers sub-tab. set a skeletal meshThis creates a layer that results in the Graph Node Propertieswo new slots in the Texture Layer node. {F85450}Image Step 3A > 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** nodeEach layer created in the **Texture Layer** node has two connections: the "Layer X" and the "Mask X" connections. {F85452} 4) With the **Texture Layer** node selected, add a new layer clicking on the (+) icon in the Graph Node Properties. {F85455} 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. {F85457}Image Step 3B > IThe Effect in this example,le is left by default as "Cotle_Sof Softlight" is used. 64) Create a **Texture** node dragging and dropping from the "Base" connection of the **Texture Layer** node. {F85459} > 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.Image Step 4 {F85461}5) With the new **Texture** node selected, choose a base texture for the character in the Graph Node Properties tab. This texture is the one on which the blending effect will be applied. Image Step 5 > In this example, the "Bandit_Standard_D" texture is used.SkinTone_BaseTexture_D" texture is used. 6) Create another **Texture** node from the "Mask 0" connection of the **Texture Layer**. This texture is the mask related to the skin color of the character. Image Step 6 8) Create a **Texture** node from the "Mask 0" connection of the **Texture Layer**.7) In the Graph Node Properties, choose a black-and-white texture which masks in black the non-skin parts of the base texture, for example, the eyes, Add a black-and-white texture which masks in black the non-skin parts of the base texture and leaves the rest in white. {F85463}Image Step 7 > In this example, for the "Mask 0" connection, the "BanditSkinTone_SkinMask" texture is used. 98) 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**This texture is the one to blend with the "Base" texture through an effect (set in Step 5) to get different skin tones. 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. {F85465} 10) Create a **Texture** node from the "Texture" connection in the **Sample Texture** node. Choose a "skin color bar" texture. {F85467} > 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. {F85469} 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. {F85471} >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. {F85473} 14) Before compiling, check that the **Source Graph** looks similar to the example below: {F85475} 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. {F85477} > The resulting mesh in the [[ URL | Preview Instance Viewport ]] tab and the selector slider in the [[ URL | Preview Instance Properties ]].