In this effect, when the camera detects a surface in the real world and the screen is tapped, a rotating gold hand will appear. You'll also see particles and hear a sound.
To build this effect yourself, open the unfinished effect in the example project folder. We've imported the assets you need, to help you get started quickly.
First, add a plane tracker to your scene. Any objects that are children of a plane tracker will appear or respond when the camera detects a real-life surface. In this effect, all objects will be children of this plane tracker.
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:
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:
There are two 3D objects in this effect:
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:
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:
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:
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:
Next edit the material:
You should now no longer see full object - just the outline of a hole:
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:
Two patches will be created and the Patch Editor will open.
Next, create patches to represent the animations in each object:
Right-click in the Patch Editor to open the menu. Select:
In the Transition patch:
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:
Here's how the graph will look:
To join this part of the graph to the Animation, Transition and Animation Player patches, connect:
Your graph should look like this:
To finish up, connect the animations to the graph. Connect:
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.
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:
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:
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:
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:
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:
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:
In the finished effect, a particle system causes small yellow particles to emit from the portal, alongside the hand. In the Scene panel:
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:
To add a color to the material:
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:
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.
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.
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:
It'll be listed in the Scene panel as speaker0.
Create an audio playback controller
To create the playback controller:
Apply the audio playback controller to the speaker
Select speaker0 in the Scene panel. In the Inspector:
Using the Patch Editor
Use the Play property in the playback controller to make the sound play based on a trigger:
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:
Here's how the section of the graph will look:
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:
Set the Duration in Loop Animation to 3.
Connect the patches
Connect:
Your graph should look like this:
And your effect will look like this:
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:
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'.