This article explains how to create a Customizable Object with nodes that allow adding patterns on a mesh and applying colors based on the number of masks created. Two examples of a head’s handkerchief are created from less to more complexity. The first example features the choice of a combination of two colors for a handkerchief pattern using only a color selector slider linked to a secondary "color bar". However, the second example presents multiple choices of patterns and two "color bars" working independently one from another.
(WARNING) We recommend visiting the [[ URL | Basic Concepts ]] page before start creating any Customizable Object
= = Add a pattern with a preset combination of colors
In this example, a Texture Layer node is used to apply two pattern complementary masks linked to two different color bars but controlled through only one color selector slider. This slider displays only the main "color bar", so the user cannot choose two colors but a preset combination when choosing the main one. In this case, the color bars have a great range of color gradients.
(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 "ColorPatterns"
== Assets required
* One material asset or material instance of the character standard with two parameters (color and normal)
* One skeletal mesh of the character with the previous material applied (one material, two parameters)
* One skeletal mesh of a cloth asset
* One Color Base, one Normal and one Roughness (if wanted) textures of the cloth asset
* One general mask texture of the cloth area the patterns are to be applied
* One mask of the pattern (Mask A)
* One mask of the pattern inverted (Mask B)
* One color bar with gradient colors
* One secondary color bar with gradient colors
(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/ColorPatterns//
1) The first step is to create a basic [[ URL | Customizable Object]] asset with the Base Object, the Material, and the Skeletal Mesh. Connect all the parameters with the same name.
> In this example, the Customizable Object asset is named "Color Patterns", the Reference Skeletal is "ColorPatterns_mesh", the Material is called “ColorPatterns_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one.
2) As the objective is to apply colored patterns to a cloth asset’s mesh, a Child Object is to be used to add this mesh to the character. Create a [[ URL | Child Object ]] node.
3) Select the Child Object node and name it in the Graph Node Properties tab.
> In this case, the Object Name is “Handkerchief”.
4) Create an Extend Material node dragging from the “LOD 0” connection of the Child Object node. This node allows using the same material as the parent’s one but connecting new textures to the slots if wanted.
5) In the Graph Node Properties tab, select the parent’s material in the Parent sub-tab.
> In this example, the material selected is “ColorPatterns_M”.
6) From the “Add Mesh” connection of the Extend Material node create a Skeletal Mesh node. In the Graph Node Properties tab, choose a cloth or fabric asset’s mesh.
> In this example, the Skeletal Mesh selected is “ColorPatterns_OnlyHandkerchief”.
7) Create a Texture node from the “Normal” connection of the Extend Material node.
8) In the Texture sub-tab of the Graph Node Properties tab, select the cloth asset’s normal map.
> In this example, the Texture selected is “ColorPatterns_Handkerchief_N”.
9) Add a [[ URL | Texture Layer ]] node from the “Color” connection of the Extend Material node. This new node permits to add multiple layers and masks on a base texture.
10) With the Texture Layer node selected, go to the Graph Node Properties tab and select the “+” button in the Layer sub-tab.
After creating a layer, two new slots appear in the Texture Layer node. The “Mask 0” connection is supposed to be connected to a pattern’s mask texture whereas the “Layer 0” one to a color bar.
Unfold the little sub-tab next to the “0” layer in the Graph Node Properties tab. Here, the blend effect is to be chosen from the drop-down menu in the Effect sub-tab. This effect is supposed to be applied to the “Base” connection’s texture using the color of the “Layer 0” one.
> In this example, the Effect chosen is “Cotle Hardlight”.
11) As the objective is to have two masked parts of a pattern filled with two different colors, another layer is needed in the Texture Layer node. Create another layer in the clicking the “+” button in the Graph Node Properties tab. Select the same blend effect if wanted.
12) The “Base” connection of the Texture Layer node has to be linked to a Base texture on which the blend effects of the “color bars” are to be applied. Drag and drop from the “Base” connection of the Texture Layer node and create a [[ URL | Texture ]] node.
13) Graph Node Properties tab, choose a base texture of the cloth’s asset.
> In this case, the “ColorPatterns_Handkerchief_D” is the selected one. It is a light-gray-color-based texture because of its neutrality when other colors are blended on it.
14) Click and drag from the “Mask 0” connection to create another Texture node. One texture masking a part of a pattern must be connected here.
15) In the Graph Node Properties, choose the mask preferred.
> In this example, the “ColorPatterns_Lines_MaskA” is the selected one.
16) In this step, the group of nodes that allow having a color bar instead of a simple color start to be created. Create a [[ URL | Sample Texture ]] and link its “Color” connection to the “Layer 0” one of the Texture Layer. This node is used as an intermediary for the color bar and the color displayed.
Image Step 16
17) From the “Texture” connection, drag and drop to create a Texture node.
Image Step 17
18) In the Graph Node Properties tab, select a “color bar” texture. This one is the main “color bar”.
Image Step 18
> In this example, the texture chosen is “ColorPatterns_ColorBar_1A”.
19) As a slider is needed to choose the colors, the most suitable node is Float Parameter. Create a [[ URL | Float Parameter ]].
Image Step 19 A
This parameter requires an axis from which to extract the values. In a “color bar” texture, the axis in which colors change is the horizontal one. Link the “Value” connection of the Float Parameter node to the “x” one of the Sample Texture node.
Image Step 19 B
20) Select the Float Parameter node and in the Graph Node Properties tab, write a name in the Parameter Name sub-tab.
Image Step 20 A
> In this example, the Parameter Name is “Main Color”. The Default Value is left as default.
Click the “+” button in the Description Image sub-tab to add a new slot in the Float Parameter node. This new connection allows displaying the “color bar” image over the slider.
Image Step 20 B
Unfold the new layer sub-tab “0” and change the name if wanted. This one is the name of the new connection created. Refresh the “Float Parameter”node if it doesn’t upload automatically.
Image Step 20 C
> In this case, the name is “Main Color Bar”.
21) Link the Float Parameter’s new connection “Main Color Bar” to the “Image” one of the Texture node. This image, the “color bar”, is to be displayed on top of the slider.
Image Step 21
22) The first part of the colored pattern’s nodes is already created. The next step is to add the complementary mask of the pattern. Drag and drop from the “Mask 1” connection of the Texture Layer node to create a Texture node.
Image Step 22
23) In Texture sub-tab of the Graph Node Properties tab, select the complementary mask of the first mask added in the connection “Mask 0”.
Image Step 23
> In this example, the texture selected is “ColorPatterns_Lines_MaskB”
24) Create a Sample Texture node. With this node starts the second “group of nodes” to create the secondary “color bar”. Link the “Color” connection of the new Sample Texture node to the “Layer 1” connection of the Texture Layer node.
Image Step 24
25) From the “Texture” connection of the Sample Texture node create a Texture node.
Image Step 25
26) In the Graph Node Properties tab, choose the secondary “color bar” texture in the Texture sub-tab.
Image Step 26
> In this example, the texture selected is “ColorPatterns_ColorBar_1B”.
27) As one of the objectives of this example is to control two “color bars” with only one slider, in this step, the parameter that controls the main “color bar” is to control the secondary one as well. Link the “Value” connection of the Float Parameter node to the “X” one of this last Sample Texture node.
Image Step 27
The same Float Parameter is now connected to both Sample Texture nodes.
28) Check that the Source Graph looks similar to the image below.
Image Step 28