== Overview
This article explains how to create four examples of Customizable Objects involving morph targets, from the simplest to the most complex one. The first one consists in applying a permanent mesh variation (protruding ears) without any parameter, the second example uses a Child Object to modify the nose and creates a toggle to enable or disable the morph, the third one recovers the ear morph but controlling the grade of rotation through a slider and the last example mixes two head morphs applied on the same character’s mesh using graph curves to control their gradual values.
(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 "ShapeVariations"
== Assets required
* One material asset or material instance of a character without parameters (textures included)
* One skeletal mesh of the character that has mesh morphs and with the previous material applied (one material, no parameters)
(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/ShapeVariations//
= Add a simple shape variation
This is the simplest example of a mesh morph in a Customizable Object. An “ear rotated” morph is proposed as a single and constant result.
== 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**.
{F85668}
> In this example, the Customizable Object asset is named "Shape Variations", the Reference Skeletal is "ShapeVariations_BaseBody", the Material is called “ShapeVariations_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one.
---
2) Click and drag from the “Unnamed Material Mesh” connection of the **Skeletal Mesh** node to create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/mesh-morph/ | Mesh Morph]] node.
{F85670}
---
3) With the **Mesh Morph** node selected, click the “Morph Target” sub tab’s drop-down menu in the Graph Node properties tab. It opens a list of all the mesh morphs available of the skeletal mesh connected to this node. Choose one.
{F85672}
> In this example, the “Ear_rotation” is the chosen morph.
---
4) As the objective is to variate a part of the mesh directly and without intermediate results, the "Factor" needed to be applied is a constant value. From the "Factor” connection of the** Mesh Morph** node create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/float-constant/ | Float Constant]] node.
{F85674}
---
5) With this last node selected, change or maintain the “Value” sub-tab to “1,0” in the Graph Node Properties tab.
{F85676}
(WARNING) The “Value” ranges from 0 to 1. In this example “1” is set to have the full morph modification.
---
6) Link the “Mesh” connection of the **Mesh Morph** node to the “Mesh” one of the **Material ** node.
{F85678}
---
7) Compile. The character must look like this in the Preview Instance Properties tab:
{F85753}
> Before compiling
{F85755}
> After compiling
= Child Object morph variation
The result is similar to the “Add a simple shape variation” example but, in this case, the objective is to add a morph using a **Child Object** and enclose it in a group to enable or disable it through a toggle button. For creating this example, a prominent nose is proposed as a morph.
== Steps
1) Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/object-group/ | Group]] node from the “Children” connection of the **Base Object** node. The Group node allows the end-user to choose to enable or disable the morph through a toggle button or a drop-down menu of options after compiling.
{F85686}
---
2) Name the **Group** in the Graph Node Properties tab and select a type of choice menu in the “Group Type” sub-tab.
{F85688}
> In this example, the Group’s name is “Nose Variations” and the Group Type is “Toggle”.
---
3) Drag and drop 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.
{F85690}
---
4) Name the **Child Object** node in the Graph Node Properties tab.
{F85692}
> In this example, the Child Object is called “Nose Pepper”.
---
5) Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/morph-material/ | Morph Material ]] node. Link its “Material” connection to the “LOD 0” one of the Child Object node. This node permits choosing the parent's applied material and accessing the mesh morphs of the skeletal mesh that has this material assigned.
{F85694}
---
6) In the Graph Node Properties, and with the **Morph Material** node selected, choose the parent’s material in the Parent sub-tab. Then, in the Morph Target sub-tab, click in the drop-down menu and choose the morph preferred.
{F85696}
> In this example, the Parent’s material is “ShapeVariations_M” and the Morph Target selected is “Nose_pepper”.
---
7) Compile. In the Preview Instance Properties tab, the toggle menu of the **Child Object** should be displayed like in the image below.
{F85698}
Then, check the Preview Instance Viewport tab that no morph is already displayed. The character shouldn’t have changed before enabling the toggle button:
{F85759}
Now, click on the toggle button and the morph should be applied:
{F85761}
(WARNING) The first constant example can also be done by following this second example's steps disregarding the Group node step.
=Control the amount of a morph with a slider
In this example, the mesh morph is used as the final shape of a gradual modification of the mesh. The variation between this morph and the default mesh offers a great number of modifications. The same exercise of the ears’ rotation is proposed but with all the intermediate shapes available by moving a slider.
== Steps
(WARNING) This example begins where the previous one finished.
1) Check that the Source Graph tab is similar to this image below.
{F85704}
(WARNING) Create Comment boxes if wanted to arrange and organize the nodes in the Source Graph tab.
---
2) As in the first example, create a **Mesh Morph** node from the “Unnamed Material mesh” connection of the **Skeletal Mesh** node. Then, in the Graph Node Properties tab select the preferred morph in the Morph Target sub-tab.
{F85706}
> In this example the morph selected is “Ear_rotation” again.
---
3) The objective is to have a slider to control the intermediate values of the **Mesh Morph** node. In this case, instead of creating a **Float Constant** node as in the first example, the **Float Parameter** is the most suitable one. Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/float-parameter/ | Float Parameter ]] node dragging from the “Factor” connection of the** Mesh Morph** node.
{F85708}
---
4) Select the **Float Parameter** node and change the Default Value number if wanted in the Graph Node Properties tab. Write a name in the Parameter Name sub-tab.
{F85710}
> In this example, the Default Value is 0, so by default the morph is not applied at all. The Parameter Name is “Ear Rotation”.
---
5) Link the “Mesh” connection of the **Mesh Morph** node to the “Mesh” one of the **Material** node.
{F85712}
---
6) Compile. In the Preview Instance Properties tab, a new slider must appear next to the **Float Parameter**’s name.
{F85714}
---
7) Check that ears rotate when moving the slider.
{F85763}
=Mix two morph targets with a curve-based slider
In this last example, a Curve asset is used to mix two head morphs (an elongated and a blunt one) with the base shape. This asset permits combining multiple morphs through curves that can be reshaped, if wanted, to avoid its linearity. Moreover, a slider takes part in this case to control the Curve asset's horizontal axis: the graduation starting from the first morph, passing through the base mesh and arriving at the other morph.
==Assets required
* One curve asset
== Steps
(WARNING) This example begins where the previous one finished.
1) Check that the Source Graph tab is similar to this image below.
{F85718}
---
2) Create a new **Mesh Morph** node from the “Mesh” connection of the previous **Mesh Morph** node (Ear Rotation Example). Unlink the “Mesh” connection of the **Mesh Morph** node and the **Material** node.
{F85720}
(WARNING) To accumulate morphs, the **Mesh Morph** nodes must be serially connected to each other between the **Skeletal Mesh** node and the **Material** one.
---
3) In the Graph Node Properties, select a morph in the Morph Target sub-tab.
{F85722}
> In this example, the Morph Target applied is “Head_crushed”.
---
4) From the previous **Mesh Morph** node’s “Mesh” connection, create another **Mesh Morph** node.
{F85724}
---
5) In the Graph Node Properties, select another morph in the Morph Target sub-tab.
{F85726}
> In this example, the Morph Target applied is “Head_eggShaped”.
---
6) As the **Mesh Morph**’s transformation must be based on curves’ values to control the variations, a **Curve** node is required. Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/curve/ | Curve node]].
{F85728}
---
7) In the Graph Node Properties, select a curve in the Curve Asset sub-tab.
{F85730}
> In this example, the Curve Asset selected is “ShapeVariations_Curve”.
Click the Curve Asset thumbnail to get inside the asset and modify its curves or other properties if wanted.
{F85732}
>In this example, two curve's channels are used: “R” linked to the “Head Crushed” morph and “G”, to the “Head Egg Shape” one. These curves begin with the first morph at 100% (the other one at 0%), pass through a 0% of both morphs in which the base mesh is displayed and, finally, end with the last morph at 100% (the first one at 0%). The horizontal axis's values are the ones that gradually go from one morph to another passing through the base mesh in the middle. Moreover, the shape of the curves describes the behavior of the progression, so in this example, the variation is slightly more abrupt in the middle of the graph than in the two ends.
---
8) Link the “Curve 0” connection of the **Curve** node to the “Factor” one of the first **Mesh Morph** node (Head_crushed) created in this example. Do the same with the “Curve 1” connection and the second **Mesh Morph** node (Head_eggShape).
(WARNING) When linking a connection of a **Curve** node to a **Mesh Morph** node, the curve's channel that represents it gets related to the morph. The first connection is equivalent to the first channel in the Curve Asset and it proceeds equally with the following ones.
{F85734}
>In this example, only two channels are used.
---
9) Create a **Float Parameter **node from the “Input” connection of the** Curve** node. This node creates the controller slider based on the horizontal axis's values of the** Curve** asset.
{F85736}
---
10) In the Graph Node Properties, and with the **Float Parameter **node selected, write a name in the Parameter Name sub-tab and change the Default Value if wanted.
{F85738}
>In this example, the Parameter Name is “Head Shape” and the Default Value is “0.5” since it is the value in which the influence of the two morphs is zero.
---
11) Finally, link the “Mesh” connection of the last **Mesh Morph** node to the “Mesh” one of the** Material** node. Now, all the** Mesh Morphs** are connected to the default mesh and the shape variation can be controlled by sliders.
{F85740}
---
12) Compile. The new "Head Shape" slider has been added. The Preview Instance Properties should look similar to this:
{F85742}
---
13) After compiling, the character shouldn’t have changed at all (the Float Parameter's default value is 0.5, in which both morphs are at 0%). When moving the slider to each end, the head’s shape should variate. In the in-between values of the parameter, intermediate morph values should be obtained as well.
{F85766}
>In this picture, the “Head Shape” slider is set by default at 0.5, so the mesh is the base one.
{F85768}
>In this picture, the “Head Shape” slider is set at 0, so the “Head_Crushed” morph has been fully applied.
{F85770}
>In this picture, the “Head Shape” slider is set at 1, so the “Head_EggShape” morph has been fully applied.