Page MenuHomeAnticto

Mutable for Unreal Engine 4 | Create projected tattoos or stickers
Updated 4 Days AgoPublic

The same procedure explained in this article can be applied to create stickers projected on a different surface (for example cloth).

Overview

This article explains different ways to project an image on a character's skin using Mutable for UE4. The first two examples consist of constant projections of images, no adjustable by the end-user. The first example is the most basic one with just one image and the second one is an extension that allows switching between two tattoos. The third and fourth examples are more complex, not only because the projection can be controlled by the end-user but also they feature a planar and a cylindrical projection, each one in its related example.

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

Constant Projection

This case explains how to project an image on a character's skin by using adjustable parameters of a projector to edit its size, rotation and placement. This example is the most basic one because it allows the artist to control the projector and, once compiled, the end-user cannot modify anything but the activation or deactivation of the tattoo itself.

The resulting Customizable Object of this example can be found in the Village Demo in Content/HowTo/Tattoo named "Tattoo"

Assets required

  • One material asset or material instance of a base character with two parameters (color and normal)
  • One skeletal mesh of the character with the previous material applied (one material, two parameters)
  • One texture with color and alpha channels (the image to project)
The assets used in this example can be found in the Village Demo in Content/HowTo/Tattoo

Steps

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

Step1_CO.png (162×837 px, 414 KB)

In this example, the Customizable Object asset is named "Tattoo", the Reference Skeletal is "Tattoo_BaseBody", the Material is called “Tattoo_M” and the Skeletal Mesh is the same as the Reference Skeletal’s one.


  1. As the objective is to project a tattoo on the character’s skin, it is necessary to have the character’s mesh layout divided into blocks so the ones affected can be selected afterward. Create a Mesh Layout node and link it to the “Tattoo_M Layout” of the Skeletal Mesh node.

Step2_MeshLayout.png (165×1 px, 513 KB)


  1. In the Node Properties tab, select the Mesh Layout node and create the number of blocks needed to enclose each body part of the character’s mesh.

Step3_MeshLayoutNodeProperties.png (766×634 px, 1 MB)

In this example, the grid proportion required is 16x16.


  1. Then, as the projection is a visual option that can be enabled or disabled a Group node is needed. This group is containing all the nodes related to the projection and permits it to become a toggle choice if wanted.

Create a Group node from the “Children” connection of the Base Object.

Step4_Group.png (349×1 px, 1 MB)


  1. In the Node Properties tab, write a name in the Group Name sub-tab and choose the Group Type preferred. Remember that the Group Name is the title of the button or drop-down menu displayed after compiling.

Step5_GroupName.png (159×284 px, 149 KB)

In this example, the name is “Tattoo” and the type of group is “Toggle”.


  1. From this Group node, one child object has to be created because it is just one image to be projected. From the “Objects” connection of the Group node create a Child object node.

Step6_ChildObject.png (344×975 px, 1000 KB)


  1. In the Node Properties tab, write a name for this object in the Object Name sub-tab. This name is to be displayed as the projected image toggle button’s title.

Step7_ChildName.png (203×354 px, 228 KB)

In this case, the children object’s name is “Blood Drops”.


  1. Drag and drop from the “LOD 0” connection of the Child Object node to create an Edit Material node. This node permits editing somehow the parent’s material parameters by inheriting them and adding one mask slot for each.

Step8_EditMaterial.png (131×606 px, 250 KB)


  1. With the Edit Material node selected, in the Node Properties’ Parent sub-tab, choose the parent’s material. Afterward, the Edit Material node should have been updated integrating the inherited slots and two masks connections. In this case, to apply the projected tattoo, the “Base Color” parameter and its related mask are the ones needed.

Step9A_EditMaterialParent.png (136×333 px, 150 KB)

In this example, the selected material is “Tattoo_M”

Below the Parent sub-tab, the parent’s mesh layout with the blocks created should appear. The projection can be applied on any part of the character’s skin except the eyes.
Click on the “Select All” button and deselect the eyes’ block.

Step9B_EditMaterialBlocks.png (583×551 px, 959 KB)

In this example, all blocks are selected but the eyes’ one.


  1. In this step, the node in charge of projecting an image has to be created. From the “Base Color” connection of the Edit Material node create a Texture Project node. This node allows projecting an image on a mesh providing multiple adjustable options to achieve the most suitable result.

Step10_TextureProject.png (224×561 px, 385 KB)


  1. From the “Image” connection of the Texture Project node create a Texture node. This node has to enclose the Tattoo’s image.

Step11_AddTexture.png (224×430 px, 299 KB)


  1. In the Node Properties, set the Tattoo’s texture preferred.

Step12_TextureSetBloodDrops.png (179×344 px, 197 KB)

In this case, the Texture selected is “Tattoo_BloodDrops”.


  1. This last image has an alpha channel responsible for outlining the tattoo’s silhouette with a transparent background. Enable this alpha channel for the projection by creating a Texture To Channels node. Link its “Image” connection to the “Image 0” one of the Texture Project node and its “A” connection, the alpha channel, to the "Base Color Mask" connection of the Edit Material node.

Step13_TextureToChannels.png (229×744 px, 516 KB)

This way of getting the alpha channel from the image itself is highly recommended when the tattoo or sticker has multiple colors. The main reason is that with just one image both color and alpha channels can be obtained. For tattoos with a simple customizable color, an alpha image could be enough. More information in the Extra Step 10 of the Projector Parameter (Planar) example.

  1. To complete the projection’s nodes, it only remains the Projection Constant node. This node creates a projector and a projection area in the Preview Instance Viewport tab that can be moved, rotated and scaled by an axis controller but only when the node is selected. After compiling, the image will be displayed and the end-user won’t be able to change it.

Create a Projector Constant node from the “Projector” connection of the Texture Project node.

Step14A_ProjectorConstant.png (242×485 px, 361 KB)

Move the projector keeping in mind that the projection area must always cross the mesh where the image has to be projected. Choose its placement.

Step14B_PlaceProjector.png (563×398 px, 674 KB)


  1. Finally, to finish this example, the Texture Project node must be connected to the mesh on which the image has to be projected. Link the “Mesh” connection of the Texture Project node to the “Tattoo_M Mesh” of the character base’s Skeletal Mesh node.

Step15_SourceGraph.png (409×1 px, 1 MB)


  1. Compile. In the Preview Instance Properties, a toggle button should appear with the Tattoo’s name.

Step16_PreviewProperties.png (225×392 px, 31 KB)

Enable it. The tattoo should appear where the projection area crosses the skin’s mesh.

Step16_PreviewViewport.png (654×406 px, 186 KB)

Selectable Projection

This example is an extension of the previous one. In this case, the nodes that allow switching between two or more images to project are explained in more detail. In the end, the result is similar to the previous one but with a drop-down menu of tattoo's images.

Assets required

The same assets used in the previous example as well.
  • A second texture with color and alpha channels (an image to project)

Steps

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

Step1_SourceGraphPrevious.png (356×1 px, 99 KB)


  1. Change the name of the Child Object node. It is no longer useful to have the name of a specific tattoo but rather a generic one that includes multiple tattoo images.

Step2_ChangeChildObjectName.png (208×868 px, 42 KB)

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


  1. Disconnect the Texture node of the image projected from the “Image 0” connection of the Texture Project node. Keep it aside for later.

Now, as the objective is to select among multiple tattoos, it is needed a node that allows switching between different textures. Create a Texture Switch node and link its “Image” connection to the “Image 0” one of the Texture Project node.

Step3_TextureSwitch.png (226×592 px, 37 KB)


  1. From the “Switch Parameter” connection of the Texture Switch node create an Enum Parameter node. This node allows adding multiple values grouped by the parameter name in the Texture Switch node.

Step4_EnumParameter.png (295×422 px, 22 KB)


  1. In the Node Properties tab, name the parameter in the Parameter Name sub-tab.

Step5A_ParameterName.png (185×443 px, 13 KB)

In this example, the Parameter Name is “Tattoo Types”.

Then, click the “+” button to add a new value layer. Write a name related to the first image to project.

Step5B_BloodDrops.png (259×449 px, 16 KB)

In this example, the name is “Blood Drops”.

Add another layer. Write a name related to the second image to project.

Step5C_FleurDeLys.png (322×435 px, 20 KB)

In this case, the name is “Fleur de Lys”.

Finally, if the node has not been updated automatically, refresh the Texture Switch. The layers created should appear as in the image below.

Step5D_Update.png (281×425 px, 24 KB)


  1. Re-approach the first projected texture kept aside and connect it to the first layer of the Texture Switch node.

Step6_Texture1.png (222×417 px, 27 KB)

In this example, the texture is “Tattoo_BloodDrops” and the connection on the Texture Switch node is “Blood Drops”.


  1. Create a Texture node to set the second image to project. Link it to the second layer of the Texture Switch node.

Step7_Texture2.png (225×417 px, 32 KB)


  1. In the Node Properties tab, and with the last Texture node selected, choose the second image to project in the texture sub-tab.

Step8_Lys.png (209×377 px, 11 KB)

In this case, the second texture to project is “Tattoo_FleurDeLys”.


  1. Check that the Source Graph tab looks similar to the image below. All the “projection” connections are already solved in the previous example, so verify that the “Switch” connections are correct.

Step9_SourceGraph.png (392×1 px, 123 KB)


  1. Compile. In the Preview Instance Properties tab, enable the toggle button “Tattoo”. Then, the “Tattoo Types” title of a drop-down menu should appear.

Step10A_EnableTattoos.png (251×395 px, 15 KB)

Check that both tattoo options work well on the character.

Step10B_BloodDrops.png (602×398 px, 191 KB)

Step10C_Lys.png (630×397 px, 204 KB)

Projector Parameter (Planar)

This case introduces the Projector Parameter node that allows the end-user to control the projector while seeing the image projected in real-time. This node provides some adjustable features like the fading angles, explained in an extra step, and also the possibility to copy and paste the transformations from the instance projector (the end-user one) to the default one (the node one) and vice versa. Moreover, another way to create tattoos by using a mask texture and a color parameter is explained as additional information.

Assets required

The same assets used in the first example as well.
  • One texture only with an alpha channel (a mask texture)

Steps

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

Step1_SourceGraph.png (377×1 px, 117 KB)


  1. Remove all the nodes connected to the Texture Project node. In this example, the projector has to be different to allow the end-user to move, rotate and scale the projection area while it is projecting an image over a surface in real-time and without compiling.

Step2_RemoveNodes.png (373×1 px, 103 KB)


  1. Change the name of the Child Object node if wanted.

Step3_Santiago.png (213×292 px, 13 KB)

In this case, the Object Name is “Santiago”, because the image projected is Santiago’s cross.


  1. As the objective is to create a projector that can be controlled and modified directly by the end-user, a Projector Parameter node is needed. Create a Projector Parameter and link it to the “Projector” connection of the Texture Project node.

Step4_ProjectorParameter.png (240×490 px, 30 KB)


  1. In the Node Properties tab, write a name in the Parameter Name sub-tab.

Step5A_NodepropertiesProjectorparameter.png (303×360 px, 19 KB)

In this example, the Parameter Name is “Tattoo Position”.

With the Projector Parameter node selected, move and place the projector in the Preview Instance Viewport tab, keeping in mind that the projection area must always cross the mesh on which the image has to be projected. Finally, choose its default placement, but remember that this can be changed afterward by the end-user after compiling.

Step5B_ProjectorDefault.png (487×554 px, 217 KB)


  1. Drag and drop from the “Image 0” connection of the Texture Project node to create a Texture node.

Step6_Texture.png (224×479 px, 41 KB)


  1. In the Node Properties tab, set an image to be projected. This image must have an alpha channel.

Step7_TextureProperties.png (203×360 px, 11 KB)

In this case, the texture applied is “Tattoo_Santiago”.


  1. Compile. A toggle button of the tattoo should appear. Enable it.

Step8A_EnableTattoos.png (251×538 px, 18 KB)

In this case, the button is called “Santiago”.

By default, the projection appears where the Projector Parameter node is placed.

Step8B_TattooDefault.png (489×537 px, 219 KB)

After enabling the toggle button, some other buttons should appear next to the Project Parameter’s name. Click the “Select Projector” button. Now, the red default projector should be hidden and instead of it, a green one should appear. This green projector is the instance one, which allows displaying automatically the result when moving, rotating or scaling it without losing the default position.


Extra Step: Fading angles
  1. The “projection” nodes are already functional, but this tool permits adding some new nodes to adjust the implementation over tricky parts. The fading angles values help avoiding deformations of the projected images on different surfaces’ reliefs setting a range of suitable angles’ values.

imagen.png (590×629 px, 292 KB)

Projection without fading angles’ value.

In the Texture Projector node, there are two connections related to the fading angles’ issue. Create two Float Constant nodes to set values to the “Fade Start Angle” and “Fade End Angle”.

imagen.png (295×751 px, 81 KB)

imagen.png (291×767 px, 81 KB)

In this example, the Fade Start Angle has a value of 25º and the Fade End Angle of 45º

Compile and check that even in the tricky surfaces, the projection looks good.

imagen.png (585×626 px, 304 KB)


Extra Steps: Use a mask to create a tattoo
  1. Another simple way to create a single-color image projected is by using a mask texture (only with alpha channel) and a Color Parameter node to pick the preferred color.

To do so, select the Texture node of the image projected and, in the Node Properties tab, choose a mask texture.

Step10_Mask.png (220×863 px, 52 KB)

The texture applied is “Tattoo_santiago_mask”.

  1. Then, as the mask texture only has the alpha channel, the color one has to be created. To do so, select the Texture Project node and, in the Node Properties tab, add another texture in the Texture sub-tab.

Step11_TextureProject2Channels.png (225×558 px, 37 KB)

The node should have been updated and now should integrate another connection. Leave the mask Texture node connected to “Image 1”.


  1. Remove the Texture To Channels node. It is no longer necessary to extract the alpha channel from the Texture node because the new texture is already a mask. Link the “Image 1” connection of the Texture Project node to the “Base Color Mask” one of the Edit Material node.

Step12_RemoveAndLink.png (317×833 px, 63 KB)

Now, the alpha channel of the image projected is already set.


  1. Now, it only remains the color information of the image. Create a Color Parameter node and, in the Node Properties tab, pick a color in the Default Value panel and write a name in the Parameter Name box.

Step13_ColorParameter.png (257×825 px, 64 KB)

In this example, a shade of red is picked and the Parameter Names is "Tattoo Color".


  1. To link the Color Parameter node to an image connection, it is necessary to add an intermediary node. In this case, the most suitable one is the Texture From Color node. Create a Texture From Color and link its “Color” connection to the Color Parameter node and its “Image” one to the “Image 0” of the Texture Project. This node allows using a color type of node as a texture.

Step14_TextureFromColor.png (241×706 px, 55 KB)


  1. Check that the modified nodes look like the image below.

Step15A_Changedpart.png (269×739 px, 56 KB)

Add the nodes created in the “Fading Angles” extra step if wanted to have a more complete result.

Step15B_SourceGraphTab.png (468×1 px, 140 KB)

Compile. In the Preview Instance Properties tab, the color-picker should appear altogether with the projector buttons.

imagen.png (220×617 px, 17 KB)

Try picking a different color, moving the projector, or resetting its position.

imagen.png (759×618 px, 428 KB)

Projector Parameter (Cylindrical)

This case explains how to create a cylindrical projection around a character's left arm by attaching the projection area to a bone or simply by controlling it through a gizmo, like in the previous examples. Moreover, some parameters permit adjusting the angular range of the image projected to get a proper result.

This type of projection is only recommended for cylindrical body parts or surfaces.

Steps

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

Step1_SourceGraph.png (377×1 px, 117 KB)


  1. Remove all the nodes connected to the Texture Project node. In this example the projector is similar to the one in the third example, the Projector parameter (Planar), but instead of a planar projection, the image is to be wrapped around a cylindrical surface.

Step2_RemoveNodes.png (373×1 px, 103 KB)


  1. Change the name of the Child Object node if wanted.

Step3A_Santiago.png (213×292 px, 13 KB)

In this case, the Object Name is “Santiago”, because the image projected is Santiago’s cross.

And the name of the Group node as well.

Step3B_GroupName.png (165×313 px, 11 KB)


  1. Create a Texture node from the “Image 0” connection of the Texture Project node.

Step4_Texture.png (216×478 px, 35 KB)


  1. In the Node Properties tab, set an image to be projected. This image must have an alpha channel.

Step5_TextureProperties.png (203×360 px, 11 KB)

In this case, the texture applied is “Tattoo_Santiago”.


  1. As the objective is to create a projector that can be controlled and modified directly by the end-user, a Projector Parameter node is needed. Create a Projector Parameter and link it to the “Projector” connection of the Texture Project node.

Step6_ProjectorParameter.png (249×486 px, 40 KB)


  1. In the Node Properties tab, write a name in the Parameter Name sub-tab. In the Projection Type's drop-down menu select “Cylindrical projection” and, for the moment, leave the Projection Angle value by default.

Step7A_PropertiesProjectParameter.png (111×321 px, 7 KB)

In this case, the Parameter Name is “Tattoo Position”

For placing the projected image on a “cylindrical” body part there are two options, using the gizmo to control the projector (as in the previous example) or using the “snap to bone” option.
Inside the Projector Parameter node properties, there is a drop-down menu of all the character’s bones named Projector Bone. Unfold it and select the bone in which the origin of the cylindrical projection is to be placed.

Step7B_Bone.png (305×322 px, 19 KB)

Automatically, in the Preview Instance Viewport tab, the cylindrical projector should appear surrounding the left arm. Now, adjust it with the gizmo if necessary and be sure the projection area exceeds the wrapped mesh’s volume.

Step7C_PropertiesProjectParameter.png (513×452 px, 220 KB)

  1. In the Node Properties tab, change the Projection Angle's value to reduce the angular range of the projected image if wanted. This range is defined by the yellow lines of the projection area displayed in the Preview Instance Viewport.

imagen.png (257×405 px, 21 KB)

imagen.png (588×522 px, 343 KB)

In this example, the Projection Angle's value is 180

  1. Compile.

imagen.png (590×635 px, 300 KB)

Projector Parameter (Wrapping)

This last case shows how to project an image on a side of the character’s trunk by enveloping it and acting as a second skin. This type of projection is recommended for organic surfaces with slight angle variation.

Steps

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

imageStep1.png (533×1 px, 131 KB)


  1. Remove just the Projector Parameter node connected to the Texture Project one. A new node is to be used with the default parameter’s details.

imageStep2A.png (484×1 px, 124 KB)

You can change the name of the Group node as well for better organisation.

imageStep2B.png (190×486 px, 27 KB)

In this case, the name is changed into “Tattoo Wrapping”.


  1. Create a new Project Parameter node and link it to the “Projector” connection of the Texture Project node.

imageStep3.png (236×454 px, 41 KB)


  1. With the Project Parameter node selected, name this parameter at the Node Properties tab. In the Projection Type's drop-down menu select “Wrapping projection”.

imageStep4.png (200×382 px, 13 KB)

In this example, the Parameter Name is “Tattoo Position”.


  1. In the Preview Instance Viewport, place the projector aiming at an “organically irregular” body part of the character by using the gizmo to control it. Note that the red arrow of the gizmo (x-axis) points at the projection’s direction.

imageStep5.png (676×529 px, 322 KB)

In this example, the projection area is placed over the left side of the character’s trunk.


  1. Compile. Enable the "Santiago" toggle button in the Preview Instance Properties tab. Check that the image is well displayed over the character’s surface.

imageStep6A.png (214×521 px, 15 KB)

imageStep6B.png (668×516 px, 369 KB)


  1. Play around with the end-user projector buttons that should appear on the Preview Instance Properties tab. Click on the «Select Projector» button and enlarge the projected image in order to maximize the «wrapping effect» around the surface if desired.

imageStep7A.png (632×510 px, 303 KB)

Final result:

imageStep7B.png (439×337 px, 162 KB)

imageStep7C.png (392×362 px, 160 KB)

Copy the new placement created with the end-user button by selecting «Copy Transform» and clicking on «Paste» once inside the Projector Parameter node’s properties. This allows saving the final position as default.

extraA.png (65×589 px, 6 KB)

extraB.png (93×501 px, 16 KB)

Last Author
gerard
Last Edited
Fri, Sep 17, 12:21 PM

Event Timeline

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)
jordi changed the visibility from "All Users" to "Public (No Login Required)".Jun 10 2020, 11:27 AM