As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.
There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.
In this tutorial you'll build a world effect, visible through the back camera of a mobile device. In the effect, a 2D photo with dynamic text shows the date and location. You'll use the Patch Editor to add interactivity, so the frame changes color and a clicking sound plays when it's tapped:
Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.
To get started open the unfinished effect in the sample content folder. We've already imported the assets you'll need to help you get started quickly. We've removed the directional and ambient lighting from the scene. This is a good idea when you're creating effects with 2D objects, as they don't need lighting to add depth to objects.
We're going to add all the objects at the same time and then assign them to layers so you can clearly see what you're building.
Your project should look like this:
It's worth renaming the objects to help you keep track. Rename:
You'll need 3 layers in this effect, to control the order objects render in.
There will already be 2 layers in the project, named frame_layer and color_overlay_layer. In the Layers panel, create 1 more layer and drag to position it above the frame_layer.
To keep track of layers, it's a good idea to rename them. We've called:
Back in the Scene panel, assign:
First edit the canvas. Because the rectangles are children of the canvas, they will take on any changes made to it.
In the Inspector, change the Mode from Camera Space to World Space.
Because the canvas is in World Space it will no longer scale with the screen of the device. This allows you to change its Transformations. In the Inspector, change:
We chose these values by adjusting them until we found the best effect. Using the manipulators is a good way to experiment with transforming objects.
Next edit the rectangles:
The rectangles are too small for our effect. To adjust this:
You'll now see a large rectangle in the scene:
At the moment, one rectangle is completely covering the other. To adjust this change the Position of:
Change the Scale of:
Create a material for each rectangle, by clicking the + next to Material in the Inspector.
The Shader Type should be Flat for both materials, because we don't need them to omit or respond to light. It's more performant than a standard shader, so it helps keep the size of the effect down.
Now select overlay_mat. In the Inspector:
The frame is taking shape now:
Overlay_mat changes color when the screen is tapped. You'll use the Patch Editor to do this. Start by clicking the arrow next to Texture in the Inspector to make a patch representing the Diffuse Texture property of the material.
We'll add the rest of the patches later.
The text in this effect is a dynamic text object. Dynamic text takes data from a user's device, like their location or the time, and represents it as text.
To add the dynamic text:
There are lots of others types of dynamic text to choose from when creating your own effects.
You'll see the text is in the middle of the frame. To fix this, change the Size values. Click in each of the boxes and select Fill Width and Fill Height to make the text the same width as the canvas:
Next to Pinning, pin the text to the top, bottom and both sides of the canvas. Pinning the text will mean it always maintains the same distance from the canvas's border.
Now we'll make the color of the frame change in response to a tap on the screen of the device.
You've already created the frame_color_mat patch. Create the other 3 patches by right-clicking anywhere in the Patch Editor, and choosing them from the menu. Select:
You'll add the colors to the Option Picker. First change the Option Picker's data type to Color:
To add the colors, click the squares in the Option Picker. Choose a color for each one from the menu:
You can test the effect in the Simulator, by clicking the gear and selecting Simulate Touch:
To finish the effect, add a sound that plays each time the screen is tapped. This is known as 'one-shot' audio:
It’s super easy, all you’ll do is add 4 more patches to your graph.
We’ve already added the audio file you’ll need to the project - it’s listed as arl_sfx_UITick_os_01.m4a in the Assets panel.
To render sound in any effect, you’ll need a scene object called a speaker. To add it to the project:
The network of patches you’ll build will send a signal to a patch representing the speaker, playing the sound in the scene.
To create a patch for the speaker:
A yellow patch will be added to the Patch Editor:
To do this you’ll connect the Screen Tap patch to the speaker patch, using a Multi-Clip Controller patch and Audio Player patch to play this audio file through the speaker.
The Multi-Clip Controller patch can play the same sound multiple times, overlapping with previous playback instances. With longer audio clips, it’s worth experimenting with the Single-Clip Controller instead, which will stop the previous playback instance before playing a new one.
To create these patches, right-click in the Patch Editor to open the menu. Select the:
You’ll also need a patch representing the audio file. To create it, just select arl_sfx_UITick_os_01.m4a in the Assets panel and drag it into the Patch Editor. An orange patch will be added:
Now connect the patches. Connect:
Here’s how the graph will look:
You’ve now added the audio clip to your effect! You can test it by clicking in the Simulator. You might need to click the Refresh button in the toolbar to hear it.
Tapping the screen in this effect is a subtle interaction, so the sound shouldn’t stand out too much. Complete the effect by adjusting the volume: