Page MenuHomeAnticto

Mutable for Unreal Engine | Add mesh-based cloth pieces to a character
Updated 965 Days AgoPublic

Overview

This page features the creation of a Customizable Object with two child objects (two pieces of cloth) enclosed by a Group node that allows choosing the way of enabling or disabling each one of them. Each child asset exemplifies a different way to create objects’ hierarchies: the first one is a child that uses the same parent’s material through nodes that permits the modification of some textures, and the second one, uses its own independent material. In both examples, the pieces of clothes are two different types of trousers.

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

Add a child object using its parent’s material

In this first example, the cloth piece proposed is a pair of officer trousers. This child object is sharing the same material as the parent’s through an Extend Material node which allows the modification of the parent material’s parameters by connecting its slots to new textures.

The resulting Customizable Object of this example can be found in the Village Demo in Content/Examples/HowTo/ClothPieces named "ClothPieces"

Assets required

  • One material asset or material instance of a character with two parameters (color and normal)
  • One skeletal mesh of the character with the previous material applied (two parameters)
  • One skeletal mesh of a pair of trousers (that fits the character) without any material applied (Piece 1)
  • One color and one normal texture asset of the Piece 1
The assets used in this example can be found in the Village Demo in Content/HowTo/ClothPieces
A parent material's number of parameters define the number of modifiable slots that a child object, sharing the same material, would inherit.

Steps

  1. The first step is to create a basic Customizable Object asset with a Base Object, a Material, and a Skeletal Mesh.

Step1_BasicCO.png (133×764 px, 49 KB)

In this example, the Customizable Object asset is named "Cloth Pieces", the Reference Skeletal is "ClothPieces_BaseBody", the Material is called “ClothPieces_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one.


  1. From the Base Object's "Children" connection, drag and drop to create a Group node. This node is created to enclose one or more child assets.

Step2_ObjectGroup.png (293×752 px, 63 KB)


  1. In the Group Name sub-tab of the Graph Node Properties tab, write a name for the node.

Step3A_ObjectGroupName.png (160×315 px, 27 KB)

In this case, the Group is named “Trousers”.

Choose the type of group preferred in the Group Type sub-tab.

Step3B_ObjectGroupNameType.png (158×308 px, 31 KB)

In this example, the type selected is “At least one Option”, which creates a drop-down menu of choices in which, at least, one option must be enabled.


  1. In this step, the first Child Object (Piece 1) is created. Click and drag from the “Objects” connection of the Group node to create a Child Object node.

Step4_ChildObject.png (250×439 px, 41 KB)


  1. At the Graph Node Properties tab, write a name in the Object Name sub-tab. Leave the other sub-tabs as default.

Step5_ChildObjectProperties.png (203×317 px, 31 KB)

In this example, the first Child Object node is named “Officer”.


  1. As the objective of this example is to create a child object that shares the same material as the parent, the node Extend Material is the one needed. From the “Lod 0” connection of the Child Object node create an Extend Material node.

Step6_ExtendMaterial.png (251×730 px, 49 KB)


  1. With the Extend Material node selected, in the Graph Node Properties tab, set the parent’s material on the Parent sub-tab. Now, the parent’s material is applied to the Child Object as well, so the same slots should have appeared on this node.

Step7_ExtendMaterialSelected.png (156×317 px, 25 KB)


  1. Create a Skeletal Mesh node. On this node, the trousers mesh asset has to be set up.

Step8_SkeletalMesh.png (128×440 px, 33 KB)


  1. Select the trousers' mesh at the Skeletal Mesh sub-tab of the Graph Node Properties tab.

Step9A_SkeletalMeshApplied.png (216×413 px, 37 KB)

Link the “Unnamed Material Mesh” connection of the new Skeletal Mesh node to the “Add Mesh” one of the Extend Material node, at the Source Graph tab.

Step9B_SkeletalMeshConnected.png (140×943 px, 53 KB)


  1. As this child object’s mesh has its own color and normal texture, both textures should be connected to the slots that the Extend Material node has inherited from its parent. Here, the base diffuse texture of the trousers should be connected. Add a Texture node and link its connection “Image” to the “Base Color” one of the Extend Material node.

Step10_TextureBase.png (147×599 px, 47 KB)


  1. With the Texture node selected, choose the piece of cloth's color texture in the Graph Node Properties tab.

Step11_TextureBaseApplied.png (180×443 px, 30 KB)

In this example, the texture used is “ClothPieces_TrousersOfficier_D”.


  1. Add a new Texture node from the “Normal” connection of the Extend Material node.

Step12_TextureNormal.png (271×674 px, 65 KB)


  1. Select the trousers' corresponding normal map texture in the Graph Node Properties tab.

Step13_TextureNormalMapApplied.png (197×438 px, 33 KB)

In this example, the texture used is “ClothPieces_TrousersOfficier_N”.


  1. The first child object (Piece 1) is already created. Check if the Source Graph looks similar to this:

Step14_SourceGraphPiece1.png (370×1 px, 96 KB)


  1. Compile. In the Preview Instance Properties tab, a drop-down menu called “Trousers” should appear with only one choice, the first pair of trousers.

Step15A_PreviewInstancePropertes.png (243×404 px, 32 KB)

At the Preview Instance Viewport tab, the character should look similar to the image below.

Step15B_OfficerTrousers.png (702×404 px, 180 KB)

Add a child object using its own material

This second and last example is an evolution of the first one in which another child object is added, but, in this case, the material used is a different and independent one that includes its own color and normal texture.

Assets required

  • A different skeletal mesh of a pair of trousers (that fits de character) without any material applied (Piece 2)
  • One material asset or material instance for Piece 2 without any parameters but that includes color and normal textures

Steps

  1. In this step, the second child object (Piece 2) is to be created. This object is not using its parent’s material but its own one. From the Group node’s connection “Objects”, create a second Child Object node.

Step1_SecondChildObject.png (260×562 px, 44 KB)


  1. Select the new Child Object and name it on the Graph Node Properties.

Step2_SecondChildObjectproperties.png (214×291 px, 31 KB)

In this example, the second Child Object node is named “Pirate”.


  1. From the “LOD 0” connection of the second Child Object node, create a Material node. This node is used to add a new material.

Step3_Material.png (113×437 px, 34 KB)


  1. Select the new Material node and, at the Graph Node Properties tab, select the second pair of trousers corresponding material in the Material sub-tab. This material is the one prepared beforehand which already includes the textures of color and normal map for this second child object but without any parameter slot.

Step4_MaterialApplied.png (311×431 px, 44 KB)

In this example, the material used is “ClothPieces_TrousersPirate_M”.


  1. Then, create a Skeletal Mesh node. In the Graph Node Properties tab, select the second trousers' mesh.

Step5A_SkeletalMesh.png (211×803 px, 55 KB)

In this example, the mesh used is “ClothPieces_TrousersPirate”.

Link the two purple “Mesh” connections of the Skeletal Mesh node and the Material one at the Source Graph tab.

Step5B_SkeletalMeshConnected.png (146×905 px, 48 KB)


  1. Verify that the nodes’ connections at the Source Graph tab are similar to the image below.

imagen.png (661×1 px, 241 KB)


  1. Compile. Check that when unfolding the drop-down menu, two choices appear. Select each choice and verify that they are displayed on the character. The result should be like this:

Step7A_PreviewPiece1.png (721×414 px, 182 KB)

Step7B_PreviewPiece2.png (721×414 px, 183 KB)

Last Author
pep
Last Edited
Oct 9 2020, 12:33 PM

Event Timeline

marc created this object with visibility "Public (No Login Required)".
marc created this object with edit policy "All Users".
laura changed the title from Add-mesh-based-cloth-pieces to Add mesh-based cloth pieces to a character.Apr 2 2020, 9:36 AM
laura edited the content of this document. (Show Details)
laura changed the title from Add-mesh-based-cloth-pieces to Add mesh-based cloth pieces to a character.Apr 2 2020, 9:45 AM
laura edited the content of this document. (Show Details)
laura changed the title from Add-mesh-based-cloth-pieces to Add mesh-based cloth pieces to a character.Apr 2 2020, 9:47 AM
laura edited the content of this document. (Show Details)
laura changed the title from Add-mesh-based-cloth-pieces to Add mesh-based cloth pieces to a character.Apr 2 2020, 12:09 PM
laura changed the title from Add-mesh-based-cloth-pieces to Add mesh-based cloth pieces to a character.
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)
laura published a new version of this document.
laura edited the content of this document. (Show Details)
marc edited the content of this document. (Show Details)