Everything you need to know to create an interactive augmented reality experience.
Learn to create the Boombox with Audio effect!
This effect is one of our featured templates. You can find it by opening Spark AR Studio and selecting Samples, or by downloading the sample content. You can adapt any of the assets in this effect in your own projects.
In this guide, you'll lean about:
If you want to build this effect yourself, open the unfinished effect in the sample content folder. We've already imported the assets you need, to help you get started quickly.
In this effect, we'll create child-parent relationships between different objects in the scene. Child objects will take on or be affected by the properties of the parent object. You can also right-click on an object and insert an object as its child.
To make one object the child of another, all you need to do is drag the child object onto the parent object.
When an object is a child of another object, it'll be listed underneath it in the Scene tab, like this:
In the example above, Boombox_animated is a 3D object. It's a child of a null object, placer. It will take on any transformations applied to the null object.
To start building the effect, add a plane tracker to your scene. Objects that are children of a plane tracker will appear when a flat surface is detected by the camera, for example a table or floor.
When you add a plane tracker, the video in Spark AR Studio will change to blank.
Insert a null object as a child of the plane tracker. We renamed it placer in the sample effect.
We'll use placer to group 2 objects, so we can make changes to them both at the same time:
To insert a null object:
We've already added the 3D object to the unfinished project. It's listed in the Assets Panel as boombox_animated:
To add it to the effect, just drag and drop it from the Assets Panel, into the Scene Panel. Drag it on to placer, so it becomes a child of the null object:
You'll see the boombox object in the Viewport and Simulator, but it isn't animated yet - we'll use animation patches to do this later.
We've already imported an audio clip into the project - it's listed in the Assets Panel as boombox_loop.M4a.
To add the audio clip to the effect we'll connect it to an asset called an audio playback controller. We'll connect the audio playback controller to an object called a speaker, which will play the sound in the scene.
You're going to add the speaker as a child of the null object. To do this:
You'll see an object called Speaker listed in the Scene Panel:
Create the audio playback controller:
You'll see audioPlaybackController0 listed in the Assets Panel:
First connect the audio file to the playback controller:
Now connect the playback controller to the speaker:
Next we're going to use the Patch Editor to build a simple graph, which will animate the boombox.
If you expand boombox_animated in the Scene Panel, you'll see it's made up of multiple objects:
The first 4 objects are meshes. The mesh is where materials are applied, to determine how the boombox looks.
There's also a skeleton with 3 joints. We'll manipulate these joints, to control the animation. We'll animate:
We're going to manipulate the 3D Scale properties of the joints, so the boombox appears to get bigger, then smaller.
First, create patches to represent the 3D Scale of each joint:
Repeat these steps for speaker_left_jnt and speaker_right_jnt, so you have 3 patches in the Patch Editor.
Next, create patches to drive the animation:
The Loop Animation patch and Transition patches are usually used together. This is because the Loop Animation patch controls the progress of an animation, and the Transition patch can be configured to control how and where the object moves.
Start by connecting:
Because the Start value in the Transition patch is set to 0 by default, the rescaling effect is quite extreme:
To change this, set the Start values to 0.09.
Currently the boombox is getting bigger, then resetting to its original size. In the Loop Animation patch, check the box next to Mirrored. The boombox will get bigger and then gradually smaller:
The movement is also a bit slow - change the Duration to 0.4 to speed the animation up.
The final adjustment is to change the Curve in the Transition patch. This sets the movement of the object as it rescales. We chose Quintic In, but you could pick something different.
Your finished graph should look like this:
Animating the speakers is very similar to animating the base of the boombox. Again:
In the Loop Animation patch:
In the Transition patch:
Your graph should look like this:
This effect uses interaction patches to change the scale, position and rotation of the boombox.
We'll adjust these properties in the null object, placer. This is because the scale, rotation and position of the boombox object are already controlled by the animation.
Select placer in the Scene Panel, and click the circles next to Scale, Position and Rotation in the Inspector to create patches representing these properties.
Find out more about adding interactivity to this effect:
Find inspiration, see examples, get support, and share your work with a network of creators.Join Community