Page MenuHomeAnticto

Mutable for Unreal Engine | Create a texture-based bandage
Updated 933 Days AgoPublic

Overview

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.

We recommend visiting the Basic Concepts page before start creating any Customizable Object.

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.

The resulting Customizable Objects of these examples can be found in the Village Demo in Content/Examples/HowTo/TextureBandage named "TextureBandage_Example1" and "TextureBandage_Example2"

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
The assets used in this example can be found in the Village Demo in Content/HowTo/TextureBandage

Steps

  1. The first step is to create a basic Customizable Object asset with the Base Object, the Material, and the Skeletal Mesh. Link all the connections with the same name.

Step1_COTextureBandage.png (174×963 px, 508 KB)

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.


  1. 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 Mesh Layout node and link it to the “TextureBandage_M Layout” of the Skeletal Mesh node.

Step2_MeshLayout.png (150×1 px, 467 KB)


  1. 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.

Step3_MeshLayoutNodeProperties.png (766×634 px, 1 MB)

In this example, the grid proportion required is 16x16.


  1. 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 Group node is needed. Create a Group node from the “Children” connection of the Base Object.

Step4_GroupNode.png (372×1 px, 80 KB)


  1. In the Node Properties tab, write a name in the Group Name sub-tab and choose the Group Type preferred.

Step5_GroupNodeNameType.png (155×262 px, 28 KB)

In this example, the name is “Bandage” and the type of group is “Toggle”.


  1. From this Group node, one bandage option is to be created. From the “Objects” connection of the Group node create a Child object node.

Step6_ChildObject.png (132×435 px, 37 KB)


  1. 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.

Step7_ChildObjectName.png (203×267 px, 31 KB)

In this case, the children object’s name is “Right Hand Bandage”.


  1. Drag and drop from the “LOD 0” connection of the Child Object node to create an Edit Material node. This node is used to modify the parent’s material parameters by inheriting them and editing the layout block's selection and/or adding masks.

Step8_EditMaterial.png (129×597 px, 43 KB)


  1. 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.

Step9A_EditMaterialSelected.png (138×288 px, 25 KB)

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.

Step9B_EditMaterialLeyoutMesh.png (519×474 px, 302 KB)

Now, select the body parts’ blocks corresponding to the character's right hand and the long bandage.

Step9C_EditMaterialLeyoutMeshSelected.png (418×422 px, 534 KB)

In this example, the blocks related to the right hand and forearm are selected because of the long-bandaged texture's size. (Four blocks selected)

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.
At least one block from the layout must be selected to apply any texture variation.

  1. 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.

Step10_BaseTexture.png (186×888 px, 56 KB)


  1. In the Node Properties tab, set a color texture of the character with the long bandage applied.

Step11_BaseTextureApplied.png (192×441 px, 33 KB)

In this case, the Texture chosen is “TextureBandage_BandageLong_D”.


  1. Create another Texture node from the “Normal” connection of the Edit Material node. The corresponding long-bandaged normal map texture is needed as well.

Step12_NormalTexture.png (172×585 px, 312 KB)


  1. With the previous Texture node selected, apply the normal map including the long bandage in the Node Properties tab.

Step13_NormalTextureApplied.png (198×437 px, 271 KB)

In this example, the Texture selected is “TextureBandage_BandageLong_N”.


  1. 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.

Step14_MasksTexture.png (258×591 px, 464 KB)


  1. In the Node Properties tab, set a mask texture of the character’s body parts that are affected by the long-bandaged textures.

Step15_MasksTextureApplied.png (198×525 px, 322 KB)

In this example, the Texture selected is “TextureBandage_MaskBandageLong”.


  1. 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.

Step16_MasksTextureConnected.png (262×625 px, 72 KB)


  1. Check that the nodes in the Source Graph tab look similar to the image below.

Step17_SourceGraphExample1.png (495×1 px, 1 MB)


  1. 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.

Step18A_PreviewProperties.png (230×397 px, 285 KB)

Enable the bandage option. In the Preview Instance Viewport tab, the character should look like this:

Step18B_PreviewViewport.png (547×379 px, 625 KB)

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
The same assets used in the previous example as well.

Steps

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.

Step1_EditGroupNode.png (164×346 px, 183 KB)

In this example, the Group name has been changed from ”Bandage” to “Bandage Right Hand” and, the Group Type, from “Toggle” to “One or none”.


  1. 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.

Step2_ChildObject1.png (210×341 px, 31 KB)

In this case, the child object’s name is “Long”, as the bandage’s textures used in the previous example were the long ones.


  1. 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.

Step3_ChildObject2.png (554×1 px, 119 KB)

In this case, the children object’s name is “Short”.


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.
  1. 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:

Step4A_EditMaterial2.png (215×818 px, 53 KB)

Now, in the Node Properties tab, select only the blocks related to the character's right hand and short bandage.

Step4B_EditMaterialBlocks2.png (429×428 px, 277 KB)

In this example, the blocks related to the right hand are selected. (Three blocks selected)


  1. 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.

Step5A_BaseColor.png (234×1 px, 64 KB)

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.

Step5B_Normal.png (216×1 px, 76 KB)

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.

Step5C_Masks.png (245×1 px, 772 KB)

In this example, the texture selected is “TextureBandage_MaskBandageShort”.


  1. Frame each child asset using a Comment if wanted. Verify that the Source Graph tab looks similar to the image below.

imagen.png (683×1 px, 251 KB)


  1. Compile. In the Preview Instance Properties, a drop-down menu should appear headed by the Group node’s name.

Step7A_DropDownMenu.png (195×448 px, 273 KB)

Unfold the drop-down menu and check that three options are available.

Step7B_DropDownMenuOptions.png (235×447 px, 325 KB)

In this case, the three options should be “Long”, “Short” and “None”.

Check that all the choices work well on the character.

Step7C_Long.png (687×449 px, 921 KB)

Long option

Step7D_Short.png (687×449 px, 921 KB)

Short option

Step7E_None.png (687×449 px, 921 KB)

None option

Last Author
laura
Last Edited
Nov 10 2020, 10:10 AM

Event Timeline

laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)
marc edited the content of this document. (Show Details)
jordi changed the visibility from "All Users" to "Public (No Login Required)".Jun 10 2020, 11:26 AM
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)