Learn to create the Boombox 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:
You can also find out more about what's in the finished effect.
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, insert a plane tracker. 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 your project will automatically switch to the back camera.
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, boombox_animated, to the unfinished project. To add it to the scene, just drag and drop it from the Assets panel, into the Scene tab. Drag it on to placer, so it becomes a child of the null object.
You'll see the boombox 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. To add the audio clip to the effect we'll connect it to a playback controller and connect the playback controller to a speaker.
Insert a speaker, as a child of the null object:
Create the audio playback controller:
Connect the audio file to the playback controller:
Connect the playback controller to the speaker:
If you expand boombox_animated in the Scene tab, you'll see it's made up of multiple objects:
There's a skeleton with several mesh underneath it. The mesh are where materials are applied to determine how the boombox looks.
There are also 3 joints, which we'll manipulate to control the animation:
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:
Next, create patches to drive the animation:
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.9.
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. Because the speaker is also a child of the null object, it'll take on these transformations. So, the sound will get louder or quieter depending on the interaction.
Select placer in the Scene tab, and click the circles next to Scale, Position and Rotation in the Inspector panel to create patches representing these properties.
Find out more about adding interactivity to this effect:
Find out more about what's in the finished effect.
boombox_animated is a 3D object. It contains textures and materials, and an animation - beats.
boombox_loop is an audio clip. We've applied it to playback_controller_model0. We then applied the playback controller to an object called a speaker, to add the sound to the effect.