Using null objects

You'll use two null objects in this effect. One to manipulate the transformations of the hand and particles at the same time. The other will add secondary animation to the hand, making it spin.

To add the first null object:

1. Right-click on the plane tracker in the Scene panel.
2. Select Insert, then Null Object.
3. Rename the null object, to help you keep track. We named it placer.

You'll use placer to manipulate the position, scale and rotation of the hand and particles.

Now insert another null object as a child of placer. Name it rotator. You'll use this null object to add secondary animation.

In the Scene panel, the objects should be listed like this:

Adding 3D objects

There are two 3D objects in this effect:

1. origami_hand - the hand that will appear when the screen is tapped.
2. origami_portal - this object creates the effect of a portal. It covers the hand, to hide it until the screen is tapped. It also includes a portal shape - which the hand will appear through.

Both objects include an animation. The hand is animated to move upwards, and the portal is animated to open.

To add these objects to the scene:

1. Select origami_hand in the Assets panel and drag it onto rotator in the Scene panel.
2. Drag origami_portal from the Assets panel, onto placer.

Your project will look like this:

Adjusting the layers

The layers will make sure objects lay over each other in the right order. It's a good idea to set them up now, so the effect appears to work correctly as you're building it.

In the Layers panel click + twice, to add 2 more layers.

Rename the layers, to help keep track. Rename:

1. The first layer in the list hand_layer.
2. The second layer in the list occlusion_layer.

Move occlusion_layer to the bottom of the list, so the panel looks like this:

In the Scene panel, assign the objects to the layers. Only the mesh that make up the 3D objects should be assigned to new layers.

Expanding the 3D objects in the Scene panel will show the mesh. In the example below, portal is one of the mesh that makes up the origami_portal object:

In the Inspector, assign:

1. origami_hand to hand_layer.
2. door_r and door_l to occlusion_layer.

Everything else in the scene will be assigned to layer0 by default. Keep them assigned to this layer.

Adding a material to the portal

At the moment, the portal object is visible. It should be invisible, but still hide the hand underneath it.

Achieve this effect by adjusting a material applied to the portal - so it becomes an occluder material. To do this:

1. Click + in the Assets panel, and select Material.
2. Rename the material occluder_mat.
3. Select the 3 mesh that make up the portal in the Scene panel - portal, door_r, door_l.
4. In the Inspector, click the dropdown next to Materials and select occluder_mat.

Next edit the material:

1. Select occluder_mat in the Assets panel.
2. In the Inspector, change the Opacity of this material to 0%.

You should now no longer see full object - just the outline of a hole:

The animation

In this effect you'll use the Patch Editor to add an animation. The hand will move up through the portal when the screen is tapped once. It'll move back down when the screen is tapped a second time.

This effect uses the Animation Player patch. This patch is able to play and reverse an animation - in this effect making the hand move down into the portal.

Create the patches

First, create patches to represent the animation property of the origami_hand and origami_portal objects:

1. Select origami_hand and origami_portal in the Scene panel. You can select them both at the same time by holding down command on your keyboard.
2. In the Inspector, click the arrow next to Animation.

Two patches will be created and the Patch Editor will open.

Next, create patches to represent the animations in each object:

1. Drag portal_anim and thumbs_up from the Assets panel and into the Patch Editor. Two orange patches will be created.

Right-click in the Patch Editor to open the menu. Select:

• 2 Animation Player patches.
• A Screen Tap, Switch and Pulse patch.
• An Animation and Transition patch.

In the Transition patch:

1. Change the type to Number using the menu at the bottom of the patch. This is the patch that will be connected to the Animation Player patches, which need a number as an input.
2. Change the Curve to Quintic Out, to set the shape of the movement. You can experiment with different values here, to achieve different effects.

Connect the patches

The first section of the graph will create a switch, to turn the animation on or off when the screen is tapped. Connect:

1. The Tap output in Screen Tap to the Flip input in the Switch patch.
2. The On/off output in the Switch patch to the On/Off input in Pulse.

Here's how the graph will look:

To join this part of the graph to the Animation, Transition and Animation Player patches, connect:

1. The Turned On port in the Pulse patch to the Play port in the Animation patch. This will make the animation play once when the screen is tapped.
2. The Turned Off port in the Pulse patch to the Reverse port in the Animation patch. This will make the animation reverse when the screen is tapped again.
3. The Progress port in the Animation patch to the Progress port in the Transition patch.
4. The Value port in the Transition patch to the Progress port in each Animation Player patch.

Your graph should look like this:

To finish up, connect the animations to the graph. Connect:

1. The Animation output in the first Animation Player to the Animation input in the origami_portal patch.
2. The Animation output of the second Animation Player to the Animation input in the origami_hand patch.
3. portal_anim to the Animation Asset port of the Animation Player connected to origami_portal.
4. thumbs_up to the Animation Asset port of the Animation Player connected to origami_hand.

In the Animation patch, change the duration to 3. This will slow the animation down.

This section of the graph should look like this:

Previewing the effect

Command-click in the Simulator to simulate touch and see how the animation looks.

Applying a physically-based material

This effect uses a physically-based material to give the hand a realistic appearance.

Physically-based materials allow you to add multiple textures. You can then change the properties of the material to make it look more or less metallic or rough and adjust occlusion strength. You can also add realistic lighting using environment textures.

Applying a material

First, create a new material for the hand:

1. Select the origami_hand mesh in the Scene panel.
2. In the Inspector, click the dropdown next to Material and select Create New Material.
3. To help keep track, rename the material. We chose origami_hand_mat.

To edit the material, select origami_hand_mat in the Assets panel. All the changes you'll need to make can be made in the Inspector.

Start by changing the Color and Shader Type:

1. Change the Shader Type to Physically-Based.
2. Under Albedo, choose a Color. We picked a yellow.
3. Next to Texture, apply origami_hand_mat_BaseColor.

The hand will have a dull, yellow appearance:

Applying an environment texture

Environment textures simulate the lighting in a real place - like a beach or a park. There are several included in Spark AR Studio.

In the Inspector:

1. Check the box next to Environment.
2. Click the drop down next to Texture and select environmentTexture.

The hand will now have some light and shadow:

Applying an ORM texture

Use an ORM texture to control how metallic or rough an object looks and its occlusion strength.

Apply origami_hand_mat_OcclusionRoughnessMetallic next to ORM Texture. The appearance of the hand won't have changed yet - we'll use the sliders to do this.

Under Surface Parameters, set:

1. Metallic to 95%.
2. Roughness to 30%.
3. Occlusion to 100%.

The hand will now have a metallic appearance:

Adding a normal map

The final step is to add a normal map. This will add a bumpy look to the surface of the hand:

1. Check the box next to Normal.
2. Next to Texture, apply origami_hand_mat_normal.

To add a little more pop, select the Ambient Light in the Scene panel. In the Inspector increase the Brightness to 100%.

The finished material should look like this:

Adding a particle system

In the finished effect, a particle system causes small yellow particles to emit from the portal, alongside the hand. In the Scene panel:

1. Insert a particle system - it'll be listed as emitter0. You'll see a small stream of fast particles in the Viewport.
2. Drag the particle system onto placer.

Because the particle system is also the child of the plane tracker it'll appear when a real surface is detected.

Applying a material and adding a color

We'll use Spark AR Studio to add a material and color to the particles - you don't need any custom textures.

First, create a material for the particle system:

1. Select emitter0 in the Scene panel.
2. In the Inspector, click + next to Material to create a new material for the particles.
3. Rename the material - we chose particle_mat.

To add a color to the material:

1. Select particle_mat in the Assets panel.
2. In the Inspector, change the Shader Type to Flat.
3. Choose a Color under Diffuse - we picked yellow, but you could choose a different color.

Here's how the particles will look at this stage:

Editing the particles

Next, make some changes to the particles themselves. Scroll down to Particle in the Inspector. Change:

1. Scale to 0.15 - to make the particles smaller.
2. Spin to 45 - to make the particles spin slightly.

Adding interactivity

This effect uses the Patch Editor to control the Birthrate property of the particle system based on the screen tap interaction. As a result, the particles appear when the portal opens.

1. In the Inspector, click the small circle next to Birthrate. The particle system will no longer be visible in the scene because the birthrate is being controlled by the Patch Editor - instead of the value you set in the Inspector.
2. Right-click in the Patch Editor, and select a Multiply patch from the menu.
3. Connect the Progress output in the Animation patch you created earlier, to the input in the Multiply patch.
4. Connect the output of the Multiply patch to the Birthrate input in the emitter patch.

Here's how the section of the graph will look:

The particle system should now be visible, but only one particle is emitting. You can scale the birthrate to a higher value using the second value of the Multiply patch. By setting this value to 20, the Birthrate will go back up to the same level as before.

Adding audio

This effect uses patches an audio playback controller to play a sound when the hand appears.

The audio clip has already been imported into the project — it's listed in the Assets panel as hand_reveal.m4a.

Insert a speaker

To render sound in the scene, first add a Speaker:

1. Click + in the Scene panel and select a Speaker.

It'll be listed in the Scene panel as speaker0.

Create an audio playback controller

To create the playback controller:

1. Click + in the Assets panel.
2. Select Playback Controller then Audio Playback Controller.
3. In the Inspector, click the dropdown next to Audio and select hand_reveal.m4a.

Apply the audio playback controller to the speaker

Select speaker0 in the Scene panel. In the Inspector:

1. Click the dropdown next to Audio.
2. Select Audio Playback Controller0.

Using the Patch Editor

Use the Play property in the playback controller to make the sound play based on a trigger:

1. Select the audio playback controller in the Assets panel.
2. In the Inspector, click the circle next to Play to create a patch.

Use the Pulse patch you created earlier to make the sound play when the hand appears. You'll also need to add a Delay patch. The values you'll set in the Delay patch will mean the sound plays at about the time the animation completes:

1. Select a Delay patch from the menu in the Patch Editor.
2. Connect the Turned On port in the Pulse patch to the input in the Delay patch. A Switch patch will automatically be added between the Pulse and the Delay patch.
3. Connect the Delay output to the playback controller.
4. Adjust the Duration in the Delay patch to 0.5.

Here's how the section of the graph will look:

Secondary animation

In the finished effect, the hand rotates continually.

The rotation property of the hand is already controlled by its animation.

To add an additional animation we'll use the null object you added earlier. By making the hand a child of the null object, you can adjust the rotation property of the null object - instead of the object itself.

Create the patches

To create the patches, select rotator in the Scene panel:

1. In the Inspector, click the circle next to Rotation. A patch will be created to represent this property.
2. Right-click in the Patch Editor, and select the Loop Animation and Transition patches.

Set the Duration in Loop Animation to 3.

Connect the patches

Connect:

1. The Progress output in the Loop Animation patch to the Progress input in the Transition patch.
2. The output of the Transition patch to the 3D Rotation input in the patch representing the null object - rotator.

Your graph should look like this:

And your effect will look like this:

Screen interactions

This effect uses interaction patches to change the scale, position and rotation of the hand and particles.

Find out more about adding interaction to your effects:

1. Changing scale when the screen is pinched.
2. Changing position when the screen pans.
3. Changing rotation when the screen rotates.

Adding instructions

We've added some instructions, to help people interact with this effect:

Because the effect includes a plane tracker we've added an instruction telling the user to flip the camera - if they're using the front camera. Once the user is looking through the back camera they'll see an instruction saying 'Tap'.

Find out more about instructions.