== Overview
(WARNING) We recommend visiting the [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/basic-concepts/ | Basic Concepts ]] page before start creating any Customizable Object
(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 "ColorPatterns"
= Apply a toggleable bandage on a hand
On the right hand
== Assets required
* One material asset or material instance of a base character with two parameters (color and normal)
* One skeletal mesh of the character with the previous material applied (one material, two parameters)
* One color texture of the character with long bandages applied on both hands and arms.
* One normal map of the long bandages texture.
* One mask of the long bandages.
(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/ColorPatterns//
(WARNING) Check the following page to read more about **Child Objects** and object's hierarchies. https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/organize-customizable-objects-child-objects/)
== Steps
1) The first step is to create a basic [[ URL | Customizable Object]] asset with the **Base Object**, the **Material**, and the **Skeletal Mesh**. Link all the connections with the same name.
{F86187}
>In this example, the Customizable Object asset is named "Texture Bandage", the Reference Skeletal is "TextureBandage_BaseBody", the Material is called “TextureBandage_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one.
---
2) As the objective is to place a bandage on a part of the character’s body, the way of accomplishing it is by applying a bandage-applied texture to the affected area. To choose these involved body parts it is necessary to divide the mesh layout into blocks so the ones affected can be selected. Create a [[ URL | Mesh Layout ]] node and link it to the “TextureBandage_M Layout” of the **Skeletal Mesh** node.
{F86189}
---
3) Select the **Mesh Layout** node and create the number of blocks needed to enclose all the parts of the character’s mesh layout in the Node Properties tab.
{F86191}
>In this example, the grid proportion required is 16x16.
---
4) In this first example, the objective is to add a bandage to the base character’s body through a toggleable choice, so it can be enabled or disabled when required. To create this possibility, a [[ URL | Group Node ]] is needed. Create a Group node from the “Children” connection of the Base Object.
{F86192}
---
5) In the Node Properties tab, write a name in the Group Name sub-tab and choose the Group Type preferred.
{F86195}
>In this example, the name is “Bandage Right Hand” and the type of group is “Toggle”.
---
6) From this Group node, one bandage choice is to be created. From the “Objects” connection of the Group node create a [[ URL | Children object ]] node.
{F86197}
---
7) In the Node Properties tab, write a name for this object in the Object Name sub-tab. This name is to be displayed as option in the toogle menu.
{F86199}
>In this case, the children object’s name is “Right Hand Bandage”.
---
8) Drag and drop from the “LOD 0” connection of the Child Object node to create an [[ URL | Edit Material ]] node. This node is used to modify parts of the parent’s material parameters, inheriting them and adding one mask slot for each.
{F86201}
---
9) With the Edit material node selected, in the Node Properties’ Parent sub-tab, choose the parent’s material. Afterwards, the Edit Material node should have been updated integrating the inherited slots and two masks connections.
{F86203}
>In this example, the selected material is “TextureBandage_M”
Below the Parent sub-tab, the parent’s mesh layout with the blocks already created should appear.
{F86205}
Now, select the body parts’ blocks that are affected by the bandage texture chosen.
{F86207}
>In this example, the blocks related to the right hand and forearm are selected because the long-bandage texture is the chosen one.
---
10) Now, the long-bandage modified textures should be applied to this previous Edit Material node. To begin with, create a Texture node from the “Base Color” connection of the Edit Material node.
{F86209}
---
11) In the Node Properties tab, set a color texture of the character with the long bandage on it.
{F86211}
>In this case, the Texture chosen is “TextureBandage_BandageLong_D”.
---
12) Create another Texture node from the “Normal” connection of the Edit Material node. As the diffuse texture has a modification with regard to the base character’s one, a long-bandage modified normal map texture is needed as well.
{F86213}
---
13) With the previous Texture node selected, apply a normal map including the long bandage in the Node Properties tab.
{F86215}
>In this example, the Texture selected is “TextureBandage_BandageLong_N”.
---
14) Finally, in this Edit Material node, a mask is needed to restrict the modification of the color and normal texture to the affected area of the character’s body. Create a Texture node from the “Base Color Mask” connection of the Edit Material.
{F86217}
---
15) In the Node Properties tab, set a mask texture of the character’s body parts that are affected by the long-bandage textures.
{F86219}
>In this example, the Texture selected is “TextureBandage_MaskBandageLong”.
---
16) As the mask limits the modifications just for the long bandage-affected area of the body texture, the previous mask texture must be used on the normal channel as well.
Link the mask Texture node to the “Normal Mask” connection of the Edit Material node. Now, both “masks” connections should be linked to this Texture node.
{F86221}
---
17) Check that the nodes in the source Graph tab look similar to the image below.
{F86223}
---
18) Compile. In the Preview Instance Properties tab, a toggle button should appear headed by the Child Object’s name. By default, the toggle group type is disabled.
{F86225}
Enable the bandage option. In the Preview Instance Viewport tab, the character should look like this:
{F86227}