(WARNING) 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. 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.
(WARNING) We recommend visiting the [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/basic-concepts/ | Basic Concepts ]] page before start creating any Customizable Object.
(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/HowTo/ named "Tattoo"
= 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)
(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/Tattoo//
== Steps
1) The first step is to create a basic [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/create-a-basic-customizable-object/ | Customizable Object]] asset with the** Base Object**, the **Material** and the **Skeletal Mesh**. Connect all the parameters with the same name.
{F101766}
> 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 [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/mesh-layout/ | Mesh Layout ]] node and link it to the “Tattoo_M Layout” of the **Skeletal Mesh** node.
{F101768}
---
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.
{F101770}
> 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 [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/object-group/ | Group ]] node from the “Children” connection of the **Base Object**.
{F101772}
---
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.
{F101774}
> 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 [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/child-object/ | Child object ]] node.
{F101776}
---
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.
{F101778}
> 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 [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/edit-material/ | Edit Material ]] node. This node permits editing somehow the parent’s material parameters by inheriting them and adding one mask slot for each.
{F101780}
---
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.
{F101782}
> 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.
{F101784}
> 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 [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture-project/ | Texture Project ]] node. This node allows projecting an image on a mesh providing multiple adjustable options to achieve the most suitable result.
{F101798}
---
11) From the “Image” connection of the **Texture Project** node create a [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture/ | Texture]] node. This node has to enclose the Tattoo’s image.
{F101796}
---
12) In the Node Properties, set the Tattoo’s texture preferred.
{F101800}
> 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 [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/texture-to-channels/ | 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.
{F101802}
(WARNING) 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.
---
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 [[https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/projector-constant/ | Projector Constant ]] node from the “Projector” connection of the **Texture Project** node.
{F101804}
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.
{F101806}
---
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.
{F101808}
---
16. Compile. In the Preview Instance Properties, a toggle button should appear with the Tattoo’s name.
{F101810}
Enable it. The tattoo should appear where the projection area crosses the skin’s mesh.
{F101812}
= 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
(WARNING) The same assets used in the previous example as well.
* A second texture with color and alpha channels (an image to project)
== Steps
(WARNING) This example starts where the previous one finished.
1) Check that the Source Graph tab is similar to this image below.
{F101824}
---
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.
{F101826}
> 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 [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/switch/ | Texture Switch ]] node and link its “Image” connection to the “Image 0” one of the **Texture Project** node.
{F101828}
---
4) From the “Switch Parameter” connection of the **Texture Switch** node create an [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/enum/ | Enum Parameter]] node. This node allows adding multiple values grouped by the parameter name in the **Texture Switch** node.
{F101830}
---
5) In the Node Properties tab, name the parameter in the Parameter Name sub-tab.
{F101832}
> 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.
{F101834}
> In this example, the name is “Blood Drops”.
Add another layer. Write a name related to the second image to project.
{F101836}
> 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.
{F101838}
---
6) Re-approach the first projected texture kept aside and connect it to the first layer of the **Texture Switch** node.
{F101840}
> 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.
{F101842}
---
8) In the Node Properties tab, and with the last **Texture** node selected, choose the second image to project in the texture sub-tab.
{F101844}
> 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.
{F101846}
---
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.
{F101848}
Check that both tattoo options work well on the character.
{F101850}
{F101854}
= 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, the type of projection, in this case planar, 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
(WARNING) The same assets used in the first example as well.
* One texture only with an alpha channel (a mask texture)
== Steps
(WARNING) This example starts where the first one finished.
1) Check that the Source Graph tab is similar to this image below.
{F101881}
---
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.
{F101883}
---
3) Change the name of the** Child Object** node if wanted.
{F101885}
> 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 [[ URL | Projector Parameter ]] and link it to the “Projector” connection of the **Texture Project** node.
{F101891}
---
5) In the Node Properties tab, write a name in the Parameter Name sub-tab.
{F101893}
> 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.
{F101895}
---
6) Drag and drop from the “Image 0” connection of the **Texture Project** node to create a **Texture** node.
{F101897}
---
7) In the Node Properties tab, set an image to be projected. This image must have an alpha channel.
{F101899}
> In this case, the texture applied is “Tattoo_Santiago”.
---
8. Compile. A toggle button of the tattoo should appear. Enable it.
{F101901}
> In this case, the button is called “Santiago”.
By default, the projection appears where the **Projector Parameter** node is placed.
{F101903}
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.
---
(WARNING) Extra Step: **Fading angles**
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.
{F101905}
> Projection without fading angles’ value.
In the **Texture Projector** node, there are two connections related to the fading angles’ issue. Create two [[ URL | Float Constant ]] nodes to set values to the “Fade Start Angle” and “Fade End Angle”.
Image Step 9B (NOT Created yet)
Compile and check that even in the tricky surfaces, the projection looks good.
Image Step 9C (NOT created yet)
---
(WARNING) Extra Steps: **Use a mask to create a tattoo**
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.
{F101907}
> 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.
{F101909}
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.
{F101911}
Now, the alpha channel of the image projected is already set.
---
13) Now, it only remains the color information of the image. Create a [[ https://work.anticto.com/w/mutable/unreal-engine-4/user-documentation/nodes/color-parameter/ | 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.
{F101913}(CHANGE IT)
> 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 [[ URL | 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.
{F101915}
---
15) Check that the modified nodes look like the image below.
{F101917}
Add the nodes created in the “Fading Angles” extra step if wanted to have a more complete result.
{F101919}
Compile. In the Preview Instance Properties tab, the color-picker should appear altogether with the projector buttons.
{F101921}
= Projector Parameter (Cylindrical)
This last 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.
As the node used is also the **Project Parameter**, the end-user can control the projector and even change the projection type in real-time.
(WARNING) This type of projection is only recommended for cylindrical body parts or surfaces.
== Steps
(WARNING) This example starts where the first one finished.
1) Check that the Source Graph tab is similar to this image below.
{F101923}
---
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 surface.
{F101925}
---
3) Change the name of the **Child Object** node if wanted.
{F101927}
> 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.
{F101929}
---
4) Create a **Texture** node from the “Image 0” connection of the **Texture Project** node.
{F101931}
---
5) In the Node Properties tab, set an image to be projected. This image must have an alpha channel.
{F101933}
> 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 [[ URL | Projector Parameter ]] and link it to the “Projector” connection of the **Texture Project** node.
{F101935}
---
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.
{F101937}
> In this case, the Parameter Name is “Tattoo Position”
To place 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.
{F101939}
Automatically, in the Preview Instance Viewport tab, the cylindrical projector should appear surrounding the left arm. Now, adjust it if necessary and be sure the projection area exceeds the wrapped mesh’s volume.
{F101941}
8) Compile.
(Image to be created)