== Overview
(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
= Constant Projection
(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"
== 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 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, as for the moment, 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, 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 tattoo’s image itself is the best option when this one can be movable, changeable or there is not a fixed place to apply it, so the alpha is always moving altogether with its related image.
---
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, rotate or scale by an axis controller but only when the node is selected. After compiling, the image will remain in its position, so the end-user won’t be able to change its position.
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.
== 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 [[ URL | 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 [[ URL | 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_Lys”.
---
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)
== Steps
== Fading Angle
Aquí, com un pas extra dels steps, amb una imatge del graph i una del resultat, mostrar com funcionen els Fading Angles
= Projector Parameter (Cylindrical)
== Steps