This article explains how to add texture-based variations to a base character. Two examples of bandages applied to the character's right hand show different ways to add them as options. The first example uses a toggle button to enable or disable a long bandage whereas the second one has a selectable drop-down menu with a long-sized bandage, a short-sized one, and a no bandage option. Each bandage's size is a different Child Object of the character's body.
(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.
(WARNING) Check the following link to read more about [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/organize-customizable-objects-child-objects/ | Child Objects ]] and object's hierarchies.
(NOTE) The resulting Customizable Objects of this examples can be found in the [[https://work.anticto.com/w/mutable/unreal-engine-4/examples/#village-demo | Village Demo ]] in //Content/Examples/HowTo/TextureBandage// named "TextureBandage_Example1" and "TextureBandage_Example2"
= Apply a toggleable bandage on a hand
This case explains how to create a toggleable option of a character's texture-based bandage on its right hand by editing its parent's material parameters and using the new corresponding textures and masks. Moreover, this texture variation is enclosed in a child's group to allow its activation or deactivation by the end-user.
== 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/TextureBandage//
1) The first step is to create a basic [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/create-a-basic-customizable-object/ | Customizable Object]] asset with the **Base Object**, the **Material**, and the **Skeletal Mesh**. Link all the connections with the same name.
> 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 texture-based bandage just to the affected area. To choose these involved body parts it is necessary to divide the mesh layout into blocks so the ones wanted can be selected. Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/mesh-layout/ | Mesh Layout ]] node and link it to the “TextureBandage_M Layout” of the **Skeletal Mesh** node.
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.
> 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 right hand through a toggleable choice, so it can be enabled or disabled when required. To create this possibility, a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/object-group/ | Group ]] node is needed. Create a **Group** node from the “Children” connection of the **Base Object**.
5) In the Node Properties tab, write a name in the Group Name sub-tab and choose the Group Type preferred.
>In this example, the name is “Bandage Right Hand” and the type of group is “Toggle”.
6) From this **Group** node, one bandage option is to be created. From the “Objects” connection of the **Group** node create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/child-object/ | Child object ]] node.
7) At the Node Properties tab, write a name for this object in the Object Name sub-tab. This name is to be displayed as the title of the toggle button.
>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 [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/edit-material/ | 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.
9) With the** Edit Material** node selected, in the Node Properties’ Parent sub-tab, choose the parent’s material. Afterward, the **Edit Material** node should have been updated integrating the inherited slots and two masks connections.
> 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.
Now, select the body parts’ blocks corresponding to the character's right hand and the long bandage.
> In this example, the blocks related to the right hand and forearm are selected because of the long-bandaged texture's size.
(WARNING) As the bandages are applied on both hands in the Textures assets (both color and mask), by selecting the layout's blocks is how it is defined which hand has a bandage on, even both hands could be selected if wanted. This system allows for multiple options with no additional work.
(IMPORTANT) At least one block from the layout must be selected to apply any texture variation.
10) After that, 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.
11) In the Node Properties tab, set a color texture of the character with the long bandage applied.
> In this case, the Texture chosen is “TextureBandage_BandageLong_D”.
12) Create another **Texture** node from the “Normal” connection of the **Edit Material** node. The corresponding long-bandaged normal map texture is needed as well.
13) With the previous **Texture** node selected, apply the normal map including the long bandage in the Node Properties tab.
> 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**.
15) In the Node Properties tab, set a mask texture of the character’s body parts that are affected by the long-bandaged textures.
> In this example, the Texture selected is “TextureBandage_MaskBandageLong”.
16) As the mask limits the modifications just for a specific 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.
17) Check that the nodes in the Source Graph tab look similar to the image below.
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.
Enable the bandage option. In the Preview Instance Viewport tab, the character should look like this:
= Create a drop-down menu with two different bandage options and a no-bandage one.
This case is an extension of the previous one. This example explains how to create a drop-down menu with two texture variations of bandages (a long and a short one) for a character's right hand and a no-bandage option.
== Assets required
* One color texture of the character with short bandages applied on both hands
* One normal map of the short bandages texture
* One mask of the short bandage affected area
(WARNING) The same assets used in the previous example as well.
(WARNING) This exercise starts where the other one finished, but it is created in a new Customizable Object example.
1) The objective of this second example is to add a shorter bandage option on the previous example and turn the toggle button to a drop-down menu with multiple options. In this case, both examples are focused on just one hand of the character. To create these possibilities, the **Group** node must be modified.
Select the **Group** node and change the name if wanted, keeping in mind that two bandage options are to be enclosed inside it. Change the type of group to “one or none” to convert it into a drop-down menu after compiling.
> In this example, the Group name has been changed from ”Bandages” to “Bandage Right Hand” and, the Group Type, from “Toggle” to “One or none”.
2) After that, as two child objects instead of one are to be enclosed in this previous group, the **Child Object** node created for the last example should be modified. Select the **Child Object** and modify its name.
> In this case, the child object’s name is “Long”, as the bandage’s textures used in the previous example were the long ones.
3) To create another bandage option, a new **Child Object** is needed. Create another **Child Object** node from the “Objects” connection of the “Bandage Right Hand” **Group **node.
> In this case, the children object’s name is “Short”.
(WARNING) Repeat some steps, from Step 8 to Step 16, used in the first example to create this short-bandaged child asset, but applying its respective short bandage variation textures. Keep in mind some small differences explained in the following steps.
4) Create all the nodes needed for this second child asset. Remember to select the parent’s material in the **Edit Material**'s Node Properties. It should look similar to the image below:
Now, in the Node Properties tab, select only the blocks related to the character's right hand and short bandage.
> In this example, the blocks related to the right hand are selected.
5) Then, this last **Edit Material** node must be connected to the proper short bandage texture in each parameter.
Create the first **Texture** node, connected to the “Base Texture”. In its Node Properties tab, apply the color texture of the base character with short bandages on it.
> In this example, the texture selected is “TextureBandage_BandageShort_D”.
Create a second **Texture** node, linked to the “Normal” connection of the **Edit Material** node and load the normal texture of the base character with short bandages on it.
> In this example, the texture selected is “TextureBandage_BandageShort_N”.
Finally, create a third **Texture** node, linked to both “Mask” connections of the **Edit Material** node. Set a mask texture of the character’s body parts that are affected by the short-bandage textures in its Node Properties tab.
> In this example, the texture selected is “TextureBandage_MaskBandageShort”.
6) Frame each child asset using a **Comment** if wanted. Verify that the Source Graph tab looks similar to the image below.
7) Compile. In the Preview Instance Properties, a drop-down menu should appear headed by the **Group** node’s name.
Unfold the drop-down menu and check that three options are available.
> In this case, the three options should be “Long”, “Short” and “None”.
Check that all the choices work well on the character.
> Long option
> Short option
> None option