Tutorial: Boombox with Audio

Learn to create the Boombox with Audio effect!

This effect includes sound, and uses the Patch Editor to add animation and interactivity. The best way to try this out is by mirroring the effect to your device with the Spark AR Player app.

Download the sample content to follow this tutorial. You can adapt any of the assets in this effect in your own projects.

In this guide, you'll lean about:

1. Object hierarchy in Spark AR Studio.
2. Placing an object on a plane tracker - so it'll appear when the camera detects a real life surface.
3. Using null objects.
4. Adding sound to an effect.
5. Adding animation.
6. Changing the position, scale and rotation of an object, based on interactions.

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.

Object hierarchy

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.

To make one object the child of another, all you need to do is drag the child object onto the parent object. You can also right-click on an object and insert an object as its child.

When an object is a child of another object, it'll be listed underneath it in the Scene panel, 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.

Adding a plane tracker

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.

Using null objects

Insert a null object as a child of the plane tracker.

To insert a null object:

1. Right-click on the plane tracker.
2. Select Null Object from the menu.
3. Rename it placer.

We'll use placer to group 2 objects so we can make changes to them both at the same time:

1. The 3D object that looks like a boombox.
2. An object called a speaker, which we'll configure to play sound in the scene.

Adding the boombox 3D 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.

Adding the audio clip

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.

Inserting a speaker

You're going to add the speaker as a child of the null object. To do this:

1. Right click on placer.
2. Select Speaker from the menu.

You'll see an object called Speaker listed in the Scene panel:

Creating an Audio Playback Controller

To create the audio playback controller:

1. Click Add Asset in the Assets panel.
2. Select Audio Playback Controller.

You'll see audioPlaybackController0 listed in the Assets panel:

Configuring the playback controller and speaker

First connect the audio file to the playback controller:

1. Select the playback controller.
2. In the Inspector, click the dropdown next to Audio.
3. Select the boombox_loop.M4a audio clip.

Now connect the playback controller to the speaker:

1. Select the Speaker in the Scene oanel.
2. In the Inspector, click the dropdown next to Audio.
3. Select audioPlaybackController0.

Using the Patch Editor to add animation

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:

1. base_jnt - to add movement to the base of the boombox.
2. speaker_left_jnt and speaker_right_jnt - to animate the two speakers.

Creating the patches

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:

1. Select base_jnt in the Scene panel.
2. In the Inspector, click the arrow next to Scale. This will create a patch and open the Patch Editor.

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:

1. Right-click in the Patch Editor.
2. Select 2 Loop Animation and 2 Transition patches from the menu.

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.

Animating the base

Start by connecting:

1. The Progress port in the Loop Animation patch to Progress port in the Transition patch.
2. The output of the Transition port to the 3D Scale port in the base_jnt patch.

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

Animating the speakers is very similar to animating the base of the boombox. Again:

1. Connect the Progress port in the second Loop Animation patch to the Progress port in the second Transition patch.
2. Connect the output of the Transition port to the 3D Scale port - this time in both speaker_right_jnt and speaker_left_jnt.

In the Loop Animation patch:

1. Again, check the box next to Mirrored.
2. Change the Duration - this time to 0.2 seconds.

In the Transition patch:

1. Change the Start values to 0.7, and the End values to 0.85.
2. Change the Curve to Elastic Out.

Your graph should look like this:

Manipulating the boombox

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:

1. Select placer in the Scene panel.
2. 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:

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

Learn more

• Different audio patches in Spark AR Studio.
• Creating world effects.
• Build this effect using scripting, instead.