== 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 [[ 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 "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)
* One curve texture
(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 [[ URL | 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 [[ URL | 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 [[ URL | 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” connection 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 enable or disable it through a toggle button. In this case, a prominent nose is proposed.
== Steps
1) Create an [[ URL | Group]] node from the “Children” connection of the **Base Object** node.
{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 [[ URL | 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 [[ URL | Morph Material ]] node. This node allows selecting the mesh morphs that the skeletal mesh incorporates through choosing its assigned material in the drop-down menu. Link the “Material” connection to the “LOD 0” of the Child Object node.
{F85694}
---
6) In the Graph Node Properties, and with the **Morph Material** node selected, choose the parent’s material in the Parent tab. Then, in the Morph Target 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 applied. 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}
=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 interesting modifications. The same exercise of the ears’ rotation is proposed but with all the intermediates available by moving a slider.
== Steps
(WARNING) This tutorial 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 intermediates' 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 [[ URL | Float Parameter ]] node dragging form he “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
The main difference between this example and other ones is the use of a **Curve** node. This node allows applying two or more morphs mixing their influences and basing their modifications on curves. Moreover, the horizontal axis of the curve asset is to be controlled by a slider.
Each curve of the asset can be connected to a morph target to control its gradual variation’s behavior from 0 to 1. In this example, two head shape variations are to be joined in the same Curve asset passing through the base shape in the middle point. In the value “0“ of the range, the first morph is to be applied, in the 0.5, the base shape must remain without any morph influence and in the value “1” of the range, the second morph is to be fully applied as well.
== 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 [[ URL | 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}
>The Curve Asset is a tool that allows for the control through curves of the values of the shape variation progress between two or more morphs.
In this example, there are two channels: “R” related to the “Head Crushed” morph and “G”, related to the “Head Egg Shape” morph. The first morph starts with the 100% influence in the 0 value of the Y-axis and lowers the influence as the value approaches the 0.5 in Y. When arriving at the 0.5, no morph is influencing the default mesh, but after that, the curve of the second morph starts to grow until the 1 value in Y, where the morph is influencing 100%.
The shape of the curves describes the behavior of the progression, hence 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” parameter of the** Curve** node. This node creates the controller slider.
{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 Preview Instance Properties should look similar to this:
{F85742}
---
13) After compiling, the character shouldn’t have changed at all. When moving the slider to each end, the head’s shape should change.
{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.