Sample Effect: Boombox with Audio

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.

The Boombox 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.



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.

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.

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. 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.

Adding a Plane Tracker

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.

Using Null Objects

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:

  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.

To insert a null object:

  1. Right-click on the plane tracker.
  2. Select Null Object from the menu.

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

Adding the Audio Clip

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.

Inserting a speaker

Insert a speaker, as a child of the null object:

  1. Right click on placer.
  2. Select Insert.
  3. Select Speaker.

Creating an Audio Playback Controller

Create the audio playback controller:

  1. Click + in the Assets panel.
  2. Select Create new Audio Playback Controller.

Configuring the playback controller and speaker

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 audio clip.

Connect the playback controller to the speaker:

  1. Select the Speaker.
  2. In the Inspector panel, click the dropdown next to Audio.
  3. Select Audio Playback Controller.

Using the Patch Editor to Add Animation

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:

  1. base_jnt - the base of the boombox.
  2. speaker_left_jnt and speaker_right_jnt - 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 tab.
  2. In the Inspector panel, click the circle next to Scale. This will create a patch and open the Patch Editor.
  3. Repeat these steps for speaker_left_jnt and speaker_right_jnt.

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.

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.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

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. 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:

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

In the Finished Effect

Find out more about what's in the finished effect.

Objects



boombox_animated is a 3D object. It contains textures and materials, and an animation - beats.

The audio clip and playback controller



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.