== Overview
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 pattern is applied to the handkerchief and, using two complementary masks, each part of the pattern is linked to a different “color bar”. Both “color bars” are controlled through only one slider so they share the same horizontal value when selecting. That means that the artist can control and restrict the combinations of colors keeping in mind the horizontal value of each. Only the main "color bar" is to be displayed on top of the slider, so the user can choose the most important color information but not the secondary one.
(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//
== Steps
1) The first step is to create a basic [[ URL | Customizable Object]] asset with the **Base Object**, the **Material**, and the **Skeletal Mesh**. Link all the connections with the same name.
{F85784}
> 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** node is to be used to add this mesh to the character. Create a [[ URL | Child Object ]] node.
{F85786}
---
3) Select the **Child Object** node and name it in the Graph Node Properties tab.
{F85788}
> 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.
{F85790}
---
5) In the Graph Node Properties tab, select the parent’s material in the Parent sub-tab.
{F85792}
> 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. This mesh is the one on which the color patterns are to be applied.
{F85794}
> In this example, the Skeletal Mesh selected is “ColorPatterns_OnlyHandkerchief”.
---
7) Create a **Texture** node from the “Normal” connection of the **Extend Material** node.
{F85796}
---
8) In the Texture sub-tab of the Graph Node Properties tab, select the cloth asset’s normal map.
{F85798}
> 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.
{F85800}
---
10) With the **Texture Layer** node selected, go to the Graph Node Properties tab and select the “+” button in the Layer sub-tab.
{F85802}
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.
{F85804}
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.
{F85806}
> 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.
{F85808}
---
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.
{F85810}
---
13) Graph Node Properties tab, choose a base texture of the cloth’s asset.
{F85812}
> 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.
{F85814}
---
15) In the Graph Node Properties, choose the mask preferred.
{F85816}
> 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 starts to be created. Create a [[ URL | Sample Texture ]] and link its “Color” connection to the “Layer 0” one of the **Texture Layer** node. This node is used as an intermediary for the color bar and the color displayed.
{F85870}
---
17) From the “Texture” connection, drag and drop to create a Texture node.
{F85872}
---
18) In the Graph Node Properties tab, select a “color bar” texture. This one is the main “color bar”.
{F85874}
> 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 a **Float Parameter**. Create a [[ URL | Float Parameter ]] node.
{F85876}
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.
{F85878}
---
20) Select the **Float Parameter** node and, in the Graph Node Properties tab, write a name in the Parameter Name sub-tab and change the Default Value sub-tab if wanted.
{F85912}
> In this example, the Parameter Name is “Main Color”. The Default Value is changed into 0.0 to make the slider's selector pick the first color of the "color bar" 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.
{F85914}
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.
{F85916}
> 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.
{F85886}
---
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.
{F85920}
---
23) In the Texture sub-tab of the Graph Node Properties tab, select the complementary mask of the first mask added in the connection “Mask 0”.
{F85890}
> In this example, the texture selected is “ColorPatterns_Lines_MaskB”
---
24) Create another **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.
{F85922}
---
25) From the “Texture” connection of the **Sample Texture** node create a **Texture** node.
{F85894}
---
26) In the Graph Node Properties tab, choose the secondary “color bar” texture in the Texture sub-tab.
{F85896}
> 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. The value selected along the horizontal axis of the main "color bar" is supposed to be coincident with the one selected on the second one. Link the “Value” connection of the **Float Parameter** node to the “X” one of this last **Sample Texture** node.
{F85898}
The same **Float Parameter** is now connected to both **Sample Texture** nodes.
---
28) Check that the Source Graph looks similar to the image below.
{F85910}
---
29) Compile. A slider with the main “color bar” image should appear in the Preview Instance Properties tab.
{F85908}
Move the slider and get different combinations of the Handkerchief pattern’s colors.
{F85906}
== Switch between two patterns and control of two independent “color bars”
This second example is an evolution of the previous one. Two patterns are applied to the handkerchief using a Switch Texture node that permits to choose between one or the other, conserving the one displayed in the previous example. Moreover, the new pattern that takes part in it is linked to two different “color bars” working independently and controlled through two sliders.
(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 mask of a different pattern (Mask A)
* One mask of the previous pattern inverted (Mask B)
* Two color bars with plain colors (not necessarily the same number in each one)
(WARNING) The same assets used in the previous example 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.
{F85933}
> A comment is been used to join and spot all the nodes involving the “Lines Pattern” used in the previous example.
2) As the first objective of this example is to be able to switch between two different patterns, another node is to be used before the Texture Layer. Unlink the “Color” connection of the Extend Material node to the “Image” connection of the Texture Layer node.
{F85935}
(WARNING) All the groups of nodes involving the “Lines Pattern” can be set aside for later.
3) From the “Color” connection of the Extend Material node create a [[ URL | Texture Switch ]] node. This node allows having multiple Texture or Texture Layer node’s connected to it, that means that it permits choosing between different textures or texture group of nodes.
{F85937}
4) To create eligible options in the Texture Switch node, another node is needed. Create an [[ URL | Enum Parameter ]] node and link its “Value” connection to the “Switch Parameter” of the Texture Switch.
{F85939}
5) Select the Enum Parameter node if it wasn’t. In the Parameter Name sub-tab of the Graph Node Properties tab, write a name. This name is the title of the eligible drop-down menu that is being created. The Default Index can be changed afterward if wanted.
{F85941}
> The name used in this example is “Handkerchief Patterns”.
Add two layers clicking on the “+” button in the Values sub-tab. These layers are the number of patterns’ options wanted.
{F85943}
Click on the sub-tab icon of each layer and name it. The names should be related to the sort of pattern they are introducing. Change the Default Index if wanted, “0” is the first option and “1” the second one.
{F85945}
> The first choice is the “Lines” pattern, used in the first example, and the second one is the “Circles” pattern. These names are appearing in the drop-down menu as choices after compiling. The Default Index is left at “0” in this example.
6) In the Source Graph tab, refresh the Texture Switch node if it hasn’t been updated automatically.
{F85947}
> Two new slots should appear named as the two layers of the Enum Parameter’s properties.
7) As the “Lines Pattern” group of nodes is already created in the previous example, the second pattern is the one to create in this step. First, a Texture Layer is needed to use multiple layers and masks in the same texture image connection. Add a [[ URL | Texture Layer ]] node from the “Circles” connection of the Texture Switch node.
{F85949}
(WARNING) The name of the connection which the Texture Layer is to be linked to is the one chosen as the second Enum Parameter’s layer, in this example “Circles”.
8) As done in the previous example, create two more layers in the Texture Layer properties. Select the “+” button twice in the Layers sub-tab in the Graph Node Properties tab.
{F85951}
Choose a blending effect in the Effect sub-tab of each layer.
{F85953}
> In this example, the blend effect chosen is “Cotle Hardlight”.
9) From the “Base” connection of the Texture Layer node, create a Texture node. This is the node on which the base texture of the handkerchief is to be applied, the same one as in the previous example, to receive on it the blend effects of the “color bars”.
{F85955}
In the Graph Node Properties tab, select the handkerchief base texture.
{F85957}
> In this example, the texture selected is “ColorPatterns_Handkerchief_D”, as in the “Lines Pattern” example since it is the same handkerchief.
10) Now, one of the masks of the second pattern is to be applied. Create a new Texture Layer node and connect it to the “Mask 0” of the Texture Layer node.
{F85959}
Apply a mask of a pattern in the Texture sub-tab of the Graph Node Properties.
{F85961}
> In this case, the “ColorPatterns_Circles_MaskA” is chosen.
11) Create a Sample Texture node and link its “Color” connection to the “Layer 0” of the Texture Layer node. This node is in charge of extracting a color, selected through a parameter, from a “color bar”.
{F85963}
12) From the “Texture” connection of the Sample Texture node create a Texture node. On this node is to be applied a “color bar”.
{F85965}
In the Texture sub-tab of the Graph Node Properties tab choose a “color bar” for the first part determined by the mask’s pattern already connected in the “Mask 0” slot.
{F85967}
> In this example, the “ColorPatterns_ColorBar_2A” is chosen. This bar has only two different plain colors.
13) Drag and drop from the “X” connection of the Sample Texture node and create a Float Parameter. This node, as told previously, is used to create selector sliders.
{F85969}
In the Graph Node Properties tab, write a name in the Parameter name sub-tab. This is to be the title of the first “color bar”. Change the Default Value if wanted.
> In this example, the name is “Handkerchief Color 1”. The Default Value is changed to 0.0, in this way, by default, the first color of the “color bar” is displayed.
{F85971}
Click on the “+” button in the Description Image sub-tab to add the “color bar” texture on top of the slider after compiling. Unfold the sub-sub-tab of the new layer and name the new connection.
{F85973}
> In this example, the name is “Color Bar 1”.
14) Refresh the Float Parameter node, if it hasn’t been updated automatically, and link the “Color Bar 1” connection to the “Image” of the Texture node. The image of the Texture node is taken to be displayed on top of the slider after compiling, The nodes for this first slider are already created.
{F85975}
> In this example, the connection is called “Color Bar 1” because it is the name written at the Description Image sub-tab gap.
15) From the “Mask 1” connection of the Texture Layer node, create a Texture node. This node is used to apply the complementary mask of the pattern.
{F85977}
Select the complementary of the mask applied in “Step 12”.
{F85979}
> In this case, the mask texture selected is “ColorPatterns_Circles_MaskB”. This one is the inverted mask of the already applied texture in the “Mask 0” connection.
16) The second “color bar” is to be created for this preceding mask applied. Create another Sample Texture node. Link its “Color” parameter to the “layer 1” of the Texture Layer.
{F85981}
17) Create a new Texture node and link it to the “Texture” connection of the Sample Texture. In this texture, the second “color bar” is to be set up.
{F85983}
In the Graph Node Properties, select a second “color bar”. The colors of this one are to be combined with the ones of the first “color bar”, in a completely free way.
{F85985}
> The second “color bar” chosen in this example is “ColorPatterns_ColorBar_2B”. This bar has different and plain colors, two more colors than the first “color bar” of this example.
18) Finally, a slider is needed to control the second “color bar” created previously as this example presented two independent “color bar” selection. Create a Float Parameter node and link its “Value” connection to the “X” on of the Sample Texture.
{F85987}
In the Graph Node Properties tab, write a name for this parameter. This is to be the title of the second “color bar”. Change the Default Value if wanted.
{F85989}
> In this example, the Parameter Name is “Handkerchief Color 2” and the Default Value is changed to 0.0, as in the first Float Parameter properties.
Add a Description Image layer by clicking on the “+” button. As two sliders are being created, both related “color bar” images are to be displayed as well. Unfold the sub-tab of the new layer and write a name for the new connection to the “color bar” image.
{F85991}
> In this example, the Name of this Description Image is “Color Bar 2”.
19) Refresh the Float Parameter node if needed and connect its “Color Bar 2” to the “Image” connection of the Texture node, that is to say, to the second “color bar” image.
{F85993}
20) Check that all the “Circle Pattern” nodes are similar to the image below. Create a new Comment if wanted to frame this group of nodes.
{F85995}
21) Approach the other pattern group of nodes created in the previous example, the “Lines Pattern”, and link the “Image” connection of its Texture Layer node to the “Lines” connection of the Texture Switch. After that, both patterns are already connected to the Texture Switch, and therefore, to the handkerchief mesh.
{F85997}
(WARNING) The names involving patterns’ and other chosen titles by the artist may be different.
22) The Source Graph may look similar to the image below.
{F85999}
23) Compile. The Preview Instance Properties should look like this:
{F86001}
Check in the drop-down menu of the “Handkerchief Patterns” that the two patterns’ options are available to be chosen.
{F86003}
Select the “Circles” pattern and check that both “color bar” sliders work independently by moving each selector and creating different combinations.
{F86005}
{F86007}