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.

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.

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)

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.

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.

---

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

---

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

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

---

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

---

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

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

---

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

---

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

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

---

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

---

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

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.

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

---

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

---

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

---

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

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

---

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

---

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

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.

---

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

---

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

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

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

• A second texture with color and alpha channels (an image to project)

Steps

1. Check that the Source Graph tab is similar to this image below.

---

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

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

---

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

---

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

---

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

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.

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

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

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.

---

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

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

---

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

---

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

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

---

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

---

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

Check that both tattoo options work well on the character.

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

• One texture only with an alpha channel (a mask texture)

Steps

1. Check that the Source Graph tab is similar to this image below.

---

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

---

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

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

---

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

---

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

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.

---

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

---

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

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

---

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

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

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

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.

---

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

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

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.

---

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

The texture applied is “Tattoo_santiago_mask”.

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

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

---

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

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

---

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

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

---

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

---

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

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

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

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

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.

Steps

1. Check that the Source Graph tab is similar to this image below.

---

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

---

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

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.

---

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

---

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

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

---

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

---

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

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.

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.

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

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

9. Compile.

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

1. Check that the Source Graph tab is similar to this image below.

---

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

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

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

---

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

---

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

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

---

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

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

---

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

---

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

Final result: