== Overview
This page features the creation of a [[ URL | Customizable Object ]] with two child assets (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 kinds of trousers.
(WARNING) We recommend visiting the [[ URL | 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 "ClothPieces"
= 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 asset is sharing the same material as the parent’s through an Extend Material node which allows the modification of the parent material’s parameters connecting its slots to new textures.
== Assets required
* One material asset or material instance of the 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 cloth's pieces without any material applied (Piece 1)
* One color and one normal texture asset of the Piece 1
(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/ClothPieces//
== Steps
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 a **Base Object**, a **Material**, and a **Skeletal Mesh**.
{F86082}
> 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.
---
2) 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 enabling a drop-down menu after compiling.
{F86084}
---
3) In the Group Name sub-tab of the Graph Node Properties tab, name the node. This name is to be displayed as a title next to the selector menu of child assets.
{F86086}
> In this case, the Group is named “Trousers”.
Choose the type of group preferred in the Group Type sub-tab.
{F86088}
> In this example, the type selected is “At least one Option”, which creates a menu of choices in which, at least, one option must be enabled.
(NOTE) If you want to choose the most suitable "Group type", check the Object Group page.
---
4) In this step, the first Child asset (Piece 1) is created. Click and drag from the “Objects” connection of the **Group node** to create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/child-object/ | Child Object ]] node.
{F86090}
---
5) In the Graph Node Properties tab, write a name in the Object Name sub-tab. Leave the other sub-tabs as default.
{F86092}
> In this example, the first **Child Object** node is named “Officer”.
---
6) As the objective of this example is to create a child asset that shares the same material as the parent’s, the node [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/extend-material/ | Extend Material ]] is the one needed. From the “Lod 0” connection of the** Child Object** node creates an ** Extend Material** node.
{F86094}
---
7) 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 of the parent’s material should have appeared in this node.
{F86096}
---
8) Create a **Skeletal Mesh** node. On this node, the required mesh of this child asset is to be applied.
{F86098}
---
9) Choose a cloth piece’s mesh that fits the base object’s character in the Skeletal Mesh sub-tab of the Graph Node Properties tab.
{F86100}
Link the “Unnamed Material Mesh” connection of the new **Skeletal Mesh** node to the “Add Mesh” one of the **Extend Material** node, in the Source Graph tab.
{F86102}
---
10) As this child asset’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 the parent’s one. Here, the base diffuse texture of the cloth piece is to be connected. Add a **Texture** node and link its connection “Image” to the “Base Color” one of the **Extend Material** node.
{F86104}
---
11) With the **Texture** node selected, choose the related color texture in the Graph Node Properties.
{F86106}
> In this example, the texture used is “MeshBased_TrousersOfficier_D”.
---
12) Add a new **Texture** node from the “Normal” connection of the **Extend Material** node.
{F86108}
---
13) Choose the related Normal map texture in the Graph Node Properties tab.
{F86110}
> In this example, the texture used is “MeshBased_TrousersOfficier_N”.
---
14) The first child asset (Piece 1) is already created. Check if the Source Graph looks similar to this:
{F86112}
---
15) Compile. In the Preview Instance Properties tab, a drop-down menu called “Trousers” should appear with only one choice, the first child asset.
{F86114}
In the Preview Instance Viewport tab, the character should look similar to the image below.
{F86116}
= Add a child object using its own material
This second and last example is an evolution of the first one in which another child asset is added, but, in this case, the material it uses is a different and independent one that includes its own color and normal texture.
== Assets required
* One skeletal mesh of a cloth's pieces without any material applied (Piece 2).
* One material asset or material instance of Piece 2 without any parameters but including the textures of the previous mesh (color and normal at least).
== Steps
1) In this step, the second child asset (Piece 2) is to be created. This asset is not using its parent’s material but its own one. From the **Group** node’s connection “Objects”, create the second **Child Object** node.
{F86118}
---
2) Select the new **Child Object** and name it in the Graph Node Properties.
{F86120}
> In this example, the second **Child Object** node is named “Pirate”.
---
3) From the “LOD 0” connection of the second **Child Object** node, create a **Material** node. This node is used to add a new material.
{F86122}
---
4) Select the new **Material** node and, in the Graph Node Properties tab, select the related material in the Material sub-tab. This material is the one prepared beforehand which already includes the textures of color, roughness (if wanted) and normal map for this second child asset but without any parameter slot.
{F86124}
> In this example, the material used is “ClothPieces_TrousersPirate_M”.
---
5) Then, create a **Skeletal Mesh** node. In this node, the second cloth piece’s mesh is to be applied. In the Graph Node Properties tab, select the cloth piece’s mesh preferred.
{F86126}
> In this example, the mesh used is “ClothPieces_TrousersPirate”.
Link the two purple “Mesh” connections of the **Skeletal Mesh** node and the **Material** one in the Source Graph tab.
{F86128}
---
6) Verify that the nodes’ connections in the Source Graph tab are similar to the image below.
{F86130}
(WARNING) If you want to create Comments to frame each child assets’ nodes (Piece 1 and Piece 2), you can do it by visiting this page XXXXXXXXXX
---
7) Compile. Check that unfolding the drop-down menu two choices appear. Select each choice and verify that it is displayed on the character. The result should be like this:
{F86132}
{F86134}
(WARNING) In the “Trousers” drop-down menu, two different choices must appear, their names are the ones written on each Child Object node properties.