Page MenuHomeAnticto

Mutable for Unreal Engine | Create color patterns with masks
Updated 739 Days AgoPublic

Overview

This article explains how to add color patterns in the textures of a character's cloth piece. This is achieved by applying color effects through masks. In this example, two-colored patterns are applied to a head handkerchief: one with lines and one with circles. The first case explains the basic node structure and how to control the colors of the pattern with a slider. The second example adds a second pattern option and the possibility to switch between them. This example is applied to a Child Object inside the parent's Customizable Object asset but the core structure of the example can be ported to any object setup.

We recommend visiting the Basic Concepts page before start creating any Customizable Object.

Add a pattern with a preset combination of colors

This case explains how to add a pattern with lines to a handkerchief, a child object of a base character, by 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 beforehand 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 end-user would choose the most important color information but not the secondary one.

The resulting Customizable Objects of these examples can be found in the Village Demo in Content/HowTo/ColorPatterns named "ColorPatterns_Example1" and "ColorPatterns_Example2"

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 (one material, two parameters)
  • One skeletal mesh of a cloth
  • One Color Base and one Normal texture of the cloth asset
  • 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
The assets used in this example can be found in the Village Demo in Content/HowTo/ColorPatterns

Steps

  1. The first step is to create a basic Customizable Object asset with the Base Object, the Material, and the Skeletal Mesh. Link all the connections with the same name.

Step1_BasicObject.png (107×645 px, 42 KB)

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.


  1. As the objective is to apply colored patterns to handkerchief's mesh, a Child Object node is to be used to add this mesh to the character. Create a Child Object node.

Step2_ChildObject.png (302×761 px, 63 KB)


  1. Select the Child Object node and name it in the Graph Node Properties tab.

Step3_NameChildObject.png (203×266 px, 31 KB)

In this case, the Object Name is “Handkerchief”.


  1. Create an Extend Material node by 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.

Step4_ExtendMaterial.png (114×445 px, 36 KB)


  1. In the Graph Node Properties tab, select the parent’s material in the Parent sub-tab.

Step5_ExtendMaterialSelectMaterial.png (151×286 px, 25 KB)

In this example, the material selected is “ColorPatterns_M”.

Now, this node should inherit the slots from the parent's material.

A parent material's number of parameters define the number of modifiable slots that a child object, sharing the same material, would inherit.

  1. From the “Add Mesh” connection of the Extend Material node create a Skeletal Mesh node. In the Graph Node Properties tab, select the handkerchief’s mesh. This mesh is the one on which the color patterns are to be applied.

Step6_SkeletalMesh.png (213×911 px, 65 KB)

In this example, the Skeletal Mesh selected is “ColorPatterns_OnlyHandkerchief”.


  1. Create a Texture node from the “Normal” connection of the Extend Material node.

Step7_Normaltexture.png (183×648 px, 50 KB)


  1. In the Texture sub-tab of the Graph Node Properties tab, select the handkerchief’s normal map.

Step8_NormaltextureSelected.png (190×335 px, 34 KB)

In this example, the Texture selected is “ColorPatterns_Handkerchief_N”.


  1. Add a 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.

Step9_TextureLayer.png (238×488 px, 53 KB)


  1. With the Texture Layer node selected, go to the Graph Node Properties tab and select the “+” button in the Layer sub-tab.

Step10A_TextureLayer+.png (139×317 px, 26 KB)

After creating a layer, two new slots should appear in the Texture Layer node. The “Mask 0” connection is to be linked to a pattern’s mask texture whereas the “Layer 0” one to a color bar.

Step10B_TextureLayer1Layer.png (169×542 px, 40 KB)

Unfold the little sub-tab next to the “0” layer in the Graph Node Properties tab. Here, choose a blending effect from the drop-down menu in the Effect sub-tab. This effect is to be applied to the “Base” connection’s texture using the color of the “Layer 0” one.

Step10C_SelectBlendTextureLayer.png (294×338 px, 36 KB)

In this example, the Effect chosen is “Cotle Hardlight”.


  1. As the objective is to have two masked parts of a pattern linked to different colors, another layer is needed in the Texture Layer node. Create another layer by clicking the “+” button in the Graph Node Properties tab. Select the same blending effect as the previous one if wanted.

Step11_2Layer.png (233×333 px, 31 KB)


  1. 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 Texture node.

Step12_BaseTexture.png (304×342 px, 37 KB)


  1. In the Graph Node Properties tab, choose a base texture of the handkerchief asset.

imagen.png (154×422 px, 13 KB)

In this case, the “ColorPatterns_Handkerchief_D” is the selected one. It is a light-gray-color-based texture because of its neutrality when mixed with other colors.


  1. Click and drag from the “Mask 0” connection to create another Texture node. The Mask A of the pattern must be connected here.

Step14_Mask0.png (251×465 px, 49 KB)


  1. In the Graph Node Properties, select the required mask.

imagen.png (146×427 px, 14 KB)

In this example, the “ColorPatterns_Lines_MaskA” is the selected one.


  1. In this step, the group of nodes that allow having a color bar instead of a simple color begins to be created. Create a Sample Texture and link its “Color” connection to the “Layer 0” one of the Texture Layer node. This node takes individual sample values from multiple color information images, like a color bar.

Step16_SampleTexture.png (434×527 px, 71 KB)


  1. From the “Texture” connection, drag and drop to create a Texture node.

Step17_ApplyColorBar.png (155×442 px, 32 KB)


  1. In the Graph Node Properties tab, select a color bar texture. This one has to be the main color bar.

Step18_ChooseColorBar1A.png (187×397 px, 28 KB)

In this example, the texture chosen is “ColorPatterns_ColorBar_1A”.


  1. As a slider is needed to choose the colors, the most suitable node is a Float Parameter. Create a Float Parameter node.

Step19A_FloatParameter.png (218×623 px, 44 KB)

This parameter requires an axis from which to extract the values. In a color bar texture, the axis in which colors change its value is the horizontal one. Link the “Value” connection of the Float Parameter node to the “x” one of the Sample Texture node.

Step19B_FloatParameter.png (218×623 px, 46 KB)


  1. Select the Float Parameter node and, at the Graph Node Properties tab, write a name in the Parameter Name sub-tab and change the Default Value sub-tab if wanted.

Step20A_FloatParameterProperties.png (174×422 px, 30 KB)

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 after compiling, so the end-user could see the color options.

Step20B_FloatParameterNewlayer.png (200×418 px, 31 KB)

Unfold the new layer sub-tab “0” and write a descriptive name for this node's connection. Refresh the Float Parameter node if it doesn’t upload automatically.

Step20C_FloatParameterColorBar.png (237×421 px, 32 KB)

In this case, the name is “Main Color Bar”.


  1. Link the Float Parameter’s new connection “Main Color Bar” to the “Image” one of the Texture node. This image, the color bar, will be displayed on top of the slider after compiling.

Step21_ConnectFloatParameter.png (226×695 px, 51 KB)


  1. 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.

Step22_Mask2.png (187×468 px, 42 KB)


  1. 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”.

Step23_MaskB.png (192×401 px, 34 KB)

In this example, the texture selected is “ColorPatterns_Lines_MaskB”


  1. 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” one of the Texture Layer node.

Step24_SampleTexture2.png (254×704 px, 62 KB)


  1. From the “Texture” connection of the Sample Texture node create a Texture node.

Step25_Texture2.png (143×454 px, 32 KB)


  1. In the Graph Node Properties tab, choose the secondary color bar texture in the Texture sub-tab.

Step26_ColorBar2.png (194×398 px, 28 KB)

In this example, the texture selected is “ColorPatterns_ColorBar_1B”.


  1. 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 has 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.

Step27_FloatParameter2.png (434×759 px, 77 KB)

The same Float Parameter is now connected to both Sample Texture nodes.


  1. Check that the Source Graph looks similar to the image below.

imagen.png (662×1 px, 277 KB)


  1. Compile. A slider with the main color bar image should appear in the Preview Instance Properties tab.

Step29A_ColorBarSlider.png (238×656 px, 32 KB)

Move the slider and get different combinations of the Handkerchief pattern’s colors.

Step29B_Preview.png (557×650 px, 202 KB)

Add a second pattern and the option of switching between them

In this case, a color pattern with circles is created in addition to the previous Lines one. Also, the possibility of switching between them is created with a Texture Switch node and an Enum Parameter node.

Moreover, both colors of the new color pattern are controlled through two different sliders to have all the possible combinations the end-user decides.

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)
The same assets used in the previous example as well.

Steps

This example begins where the previous one finished.
  1. Check that the Source Graph tab is similar to this image below.

imagen.png (577×1 px, 163 KB)

A comment is used to join and spot all the nodes involving the “Lines Pattern” used in the previous example.


  1. As the first objective of this example is to be able to switch between two different patterns, another node has to be used before the Texture Layer. Unlink the “Color” connection of the Extend Material node from the “Image” one of the Texture Layer node.

imagen.png (607×1 px, 161 KB)

All the groups of nodes involving the “Lines Pattern” can be set aside for later.

  1. From the “Color” connection of the Extend Material node create a 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.

Step3_CreateTextureSwitch.png (326×560 px, 55 KB)


  1. To create eligible options in the Texture Switch node, another node is needed. Create an Enum node and link its “Value” connection to the “Switch Parameter” of the Texture Switch.

Step4_EnumParameter.png (317×368 px, 37 KB)


  1. 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 a drop-down menu that is being created after compiling. The Default Index can be changed afterward if wanted.

Step5A_NameEnum.png (180×368 px, 29 KB)

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.

Step5B_Handkerchief.png (229×365 px, 30 KB)

Click on the sub-tab icon of each layer and name them. 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.

Step5C_LinesCircles.png (322×370 px, 34 KB)

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.


  1. In the Source Graph tab, refresh the Texture Switch node if it hasn’t been updated automatically.

Step6_RefreshTextureSwitch.png (254×323 px, 36 KB)

Two new slots should appear named as the two layers of the Enum Parameter’s properties.


  1. 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 node is needed to use multiple layers and masks in the same texture image connection. Add a Texture Layer node from the “Circles” connection of the Texture Switch node.

Step7_TextureLayerCircles.png (244×440 px, 38 KB)

This Texture Layer has to be linked to the second pattern connection of the Enum Parameter’, in this example “Circles”. The first pattern's nodes have already been created in the first example.

  1. As done in the previous example, create two more layers in the Texture Layer properties, so there can be two parts of the pattern to be colored. Select the “+” button twice in the Layers sub-tab in the Graph Node Properties tab.

Step8A_TextureProperties.png (182×366 px, 27 KB)

Choose a blending effect in the Effect sub-tab of each layer.

Step8B_TexturePropertiesBlendedEffect.png (245×370 px, 31 KB)

In this example, the blending effect chosen is “Cotle Hardlight”.


  1. From the “Base” connection of the Texture Layer node, create a Texture node. Here, the base texture of the handkerchief has to be set up, the same one applied to the previous Lines pattern.

Step9A_BaseTexture.png (261×656 px, 52 KB)

In the Graph Node Properties tab, select the handkerchief base texture.

Step9B_BaseTextureApplied.png (192×426 px, 33 KB)

In this example, the texture selected is “ColorPatterns_Handkerchief_D”, as in the “Lines Pattern” example since it is the same handkerchief.


  1. Now, one of the masks of the second pattern has to be applied. Create a new Texture Layer node and connect it to the “Mask 0” of the Texture Layer node.

Step10A_TextureMask1.png (316×444 px, 51 KB)

Apply the Mask A of this second pattern in the Texture sub-tab of the Graph Node Properties.

Step10B_TextureMask1Applied.png (191×413 px, 35 KB)

In this case, the “ColorPatterns_Circles_MaskA” is chosen.


  1. Create a Sample Texture node and link its “Color” connection to the “Layer 0” one of the Texture Layer node.

Step11_SampleTexture.png (342×453 px, 67 KB)


  1. From the “Texture” connection of the Sample Texture node create a Texture node. On this node a color bar has to be set up.

Step12A_TextureColorBar1.png (182×709 px, 46 KB)

In the Texture sub-tab of the Graph Node Properties tab choose a color bar for this first part of the handkerchief's pattern.

imagen.png (154×413 px, 9 KB)

In this example, the “ColorPatterns_ColorBar_2A” is chosen. This bar has only two different plain colors.


  1. 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.

Step13A_FloatParameter1.png (188×665 px, 46 KB)

In the Graph Node Properties tab, write a name in the Parameter name sub-tab. This is the title of the first color bar. Change the Default Value if wanted.

imagen.png (139×389 px, 11 KB)

In this example, the name is “Handkerchief Color 1”. The Default Value is changed to 0.0, so by default the first color of the color bar will be displayed after compiling.

Click on the “+” button in the Description Image sub-tab to add the color bar texture on top of the slider. Unfold the sub-sub-tab of the new layer and name the new connection.

imagen.png (189×397 px, 13 KB)

In this example, the name is “Color Bar 1”.


  1. 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 so it will appear on top of the slider after compiling, The nodes for this first slider are already created.

Step14_FloatParameterLinked.png (195×654 px, 49 KB)

In this example, the connection is called “Color Bar 1”, the name written at the Description Image sub-tab gap.


  1. 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.

Step15A_TextureMask2.png (170×479 px, 39 KB)

Select the Mask B of the texture applied in “Step 12”.

Step15B_TextureMask2Applied.png (195×420 px, 34 KB)

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.


  1. The second color bar has to be created for this second mask applied. Create another Sample Texture node. Link its “Color” connection to the “Layer 1” one of the Texture Layer.

Step16_SampleTexture2.png (339×696 px, 71 KB)


  1. Create a new Texture node and link it to the “Texture” connection of the Sample Texture node. In this Texture node, the second color bar is to be set up.

Step17A_ColorBar2.png (96×381 px, 26 KB)

In the Graph Node Properties, select the second color bar.

Step17B_ColorBar2SetUp.png (190×398 px, 28 KB)

The second color bar chosen in this example is “ColorPatterns_ColorBar_2B”. This bar has four different and plain colors, two more than the first color bar of this example.


  1. Finally, a slider is needed to control the second color bar as well since this example presented two independent color bar selection. Create a Float Parameter node and link its “Value” connection to the “X” one of the Sample Texture.

Step18A_FloatParameter2.png (187×674 px, 46 KB)

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.

Step18B_FloatParameter2Name.png (182×398 px, 30 KB)

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. It is necessary that this second color bar image appears on top of the second slider after compiling, so the end-user can see all the options. Unfold the sub-tab of the new layer and write a name for the new connection to the color bar image.

Step18C_FloatParameter2DescriptionImage.png (232×395 px, 32 KB)

In this example, the Name of this Description Image is “Color Bar 2”.


  1. Refresh the Float Parameter node if needed and link its “Color Bar 2” to the “Image” connection of the Texture node.

Step19_RefreshConnectFloatColorBar2.png (193×676 px, 50 KB)


  1. Check that all the “Circle Pattern” nodes are similar to the image below.

Step20_GroupOfNodes.png (530×1 px, 136 KB)

Create, if wanted, a "Comment" to frame this group of nodes and identify quicker each "pattern" in the Source Graph tab.

  1. 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” one of the Texture Switch node. After that, both patterns are already connected to the Texture Switch, and therefore, to the handkerchief mesh.

imagen.png (742×946 px, 201 KB)


  1. The Source Graph should look similar to the image below.

imagen.png (779×1 px, 281 KB)


  1. Compile. The Preview Instance Properties should look like this:

Step23A_PreviewProperties.png (261×546 px, 34 KB)

Check in the drop-down menu of the “Handkerchief Patterns” that the two patterns’ options appear and can be selected.

Step23B_PreviewPropertiesDropDown.png (288×530 px, 37 KB)

Select the “Circles” pattern and check that both color bar's sliders work independently by moving each selector and creating different combinations.

Step23C1_PreviewPropertiesViewport.png (585×521 px, 197 KB)

Step23C2_PreviewPropertiesViewport.png (585×521 px, 191 KB)

Last Author
gerard
Last Edited
Sep 16 2021, 4:12 PM

Event Timeline

laura created this object with visibility "Public (No Login Required)".
laura created this object with edit policy "All Users".
laura published a new version of this document.
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)
laura edited the content of this document. (Show Details)