Adding a rectangle

A rectangle will render the textures and material in the scene.

To add the rectangle:

1. Click Add Object.
2. Select Rectangle - it’ll automatically be added to the scene as a child of a canvas:

The rectangle should completely cover the device’s screen. To do this, adjust the rectangle’s properties:

1. Go to the Inspector.
2. Click in the box for Width, click Fill Width. Click in the box for Height, click Fill Height.

Creating a material

To create the material you’ll add the textures to:

1. Select rectangle0 in the Scene panel.
2. In the Inspector, go to Materials and click +.

A new material will be added to the Assets panel. Rename it hair_mat.

Editing the material.

Add the textures you’ve already created to the material:

1. Go to the Inspector.
2. Under Diffuse, click the dropdown next to Texture and select cameraTexture0.
3. Check the box next to Alpha.
4. Next to Texture, click the dropdown and select hairSegmentationMaskTexture0.

You’ll see the video of the camera texture playing in the Simulator:

Changing the hair color

To give the hair a different color:

1. Select hair_mat in the Assets panel.
2. In the Inspector, go to Diffuse.
3. Next to Color, click the rectangle and choose a color.

It’s worth experimenting with the opacity of the material, for a stronger or more subtle effect. To do this, adjust the slider next to Opacity in the Inspector.

For this tutorial set Opacity to 80%.

Editing the Render Options

Editing the Render Options in the material will change appearance of the hair color, so it’s worth experimenting with these settings. For this tutorial:

1. Change Blend Mode to Add.

Add a light

For extra interest, add a rotating light to the scene. To do this quickly you can use the actions feature, which lets you to add common techniques with just one or two clicks.

Start by adding a light to the scene:

1. In the Scene panel, right-click canvas0.
2. Select Add, then Directional Light.

The light with be listed as directionalLight0. Because it’s shining on the scene, the hair will appear lighter and brighter:

To rotate the light:

1. In the Inspector, click Actions in the top right corner.
2. Select Animate, then Spin.

This will add a series of animation patches to the Patch Editor, controlling the rotation of the light.

The light is quite bright at the moment. To adjust this:

1. Go to the Inspector.
2. Next to Intensity, edit the slider. About 85% works well.

Adding interactivity

Use the Patch Editor to change the hair’s color each time the screen is tapped.

Patches you’ll use

You’ll use 4 patches to change the color of the hair:

• The Screen Tap patch will detect a tap on the device screen.
• The different hair colors will be set in an Option Picker patch.
• The Counter patch will count through the colors.
• A patch representing the Diffuse property of the material will show the color in the scene.

Creating the patches

To create these patches:

• Right-click anywhere in the Patch Editor to open the menu.
• From the menu, search for and add the Screen Tap, Option Picker and Counter patches.
• In the Assets panel, select hair_mat.
• In the Inspector, go to Diffuse and click the arrow to the left of Texture.

Edit the Option Picker

The Option Picker patch is set to number by default. To add colors to the Option Picker patch instead, change the data type:

1. Select the Option Picker patch.
2. Click the blue dropdown menu that appears at the bottom of the patch.
3. Select Color from the menu.

You can now add colors to the Option Picker patch by clicking the rectangles on the patch, and selecting options from the menu:

Add as many or as few colors as you like.

Connecting the patches

To connect the patches, connect:

1. The Tap port of the Screen Tap patch to the Increase port in the Counter patch.
2. The output of the Counter patch to the Option input in the Option Picker patch.
3. The output of the Option Picker patch to the Diffuse Texture input in the material patch.

Make sure the Maximum Count value in the Counter patch is set to match the number of options you want to count through in the Option Picker patch.

Here’s how the graph will look if you set 5 colors in the Option Picker:

Testing the tap feature

To see the interactive part of this effect:

• Set the Simulator to Simulate Touch.
• Tap anywhere in the Simulator.

Your final effect will look like this: