Navigating the Spark AR Studio Interface

Have a question?

Ask the community

The Viewport

This is the middle section of the Spark AR Studio interface. You can see and work with the effect you're building here.

When the Camera is selected in the menu on the left of the screen, blue lines will appear in the Viewport. These lines show where the camera is pointing and which objects are in view of the camera.

In the image above, the pink diamond is a child of the Camera in the Scene panel. It won't be visible on the screen of the device, because its position is outside the blue lines of the camera.

When an object is listed underneath the Camera in the Scene panel, it will move with these blue lines - because it's in camera space. You can test this out by clicking and dragging your mouse in the Simulator.

When an object isn't listed under the camera, it's in what's known as 'world space'. It won't move with these lines, and can be placed in a fixed position in the world. Read more about world effects.

At the top of the Viewport are the Manipulators. Use them to quickly change your object's:

Position - to choose where your object is placed within your scene.
Scale - to make your object appear bigger or smaller.
Rotation - to rotate your object.

Editing objects in the Viewport

3D and 2D objects can be edited in the Viewport. You can change their position, scale and rotation. The default setting is for editing 3D objects. To switch to 2D, at the top of the interface, to the right of Viewport, click the Mode menu

When this option is:

Set to 3D, you can edit 3D objects.
Set to 2D, you can edit 2D objects.

The Simulator

The Simulator represents a device screen. For example, a mobile or a tablet.

Use it to preview how your effect will look, including with different compression settings. Find out more about using the Simulator.

The Scene panel

Adding objects to the Scene panel on the left of the interface will add them to your effect.

Click + to add an object. You can also right click or double click an empty space in the panel.

You'll see a list of all the different objects included in Spark AR Studio. You can also select 3D Object to import an object from your computer.

This is also where you'd insert an element that will make your effect respond to the person using it, or someone's environment. For example a face tracker if you want to build an effect that responds to someone's face.

You can create relationships between objects in the Scene panel. Creating a child-parent relationship means you can make the same change to multiple objects at the same time, by making a change to the parent object. To create a child-parent relationship, drag the object that you want to be the child onto the object that you want to be the parent.

The Assets panel

This is where you can add your own assets to a project or create assets in Spark AR Studio.

Click + to create assets or add your own. Right clicking or double clicking and empty space in the panel will also work. You can add textures, materials, 3D models, animations and audio files here.

Interface with Assets panel highlighted and objects, materials and textures added.

Organize assets

Sort assets

You can sort the list of assets in each category alphabetically. To sort:

Select the category name.
Right click and select Sort By.
Select Name: A-Z or Name Z-A.

Filter and search

Click the search button in the Assets panel footer to locate specific assets. Click the filter button to filter by one or multiple asset categories.

Reorder categories and assets

You can also rearrange categories and assets within categories, by dragging and dropping them.

The Inspector

Use the Inspector to make all kinds of changes to assets and objects. You'll need to select the asset or object in the Scene panel or Assets panel first.

Below, we've selected one of the mesh that makes up the 3D object in our scene.

Inspector with mesh selected in Scene panel

We could use the Inspector to change:

Which layer it's on, by adjusting the dropdown next to Layer.
Whether or not it's visible in the scene, by checking the box next to Visibile.
Its position, scale and rotation, by changing the X, Y and Z values under Transformations.
Its material, by clicking the dropdown under Material.

We could also click Create, next to Patch. This will create a patch representing the mesh in the Patch Editor.

Some properties have arrows to the left of them. This means a patch can be created to represent the property.

Inspector with object's position property and arrow highlighted

So if we click the arrow to the left of Position, a patch would be added representing the position of the mesh. You could connect this patch to other patches in a graph, to manipulate the position of the mesh.

The Layers panel

Use this panel to create layers. Find out more about using layers in your effects.

The Patch Editor and Console

Use the Patch Editor to create effects with logic, animation and interactivity, without using scripting. Use the Console to add JavaScript to your project.

To open or close the Patch Editor or console, click View in the menu bar and select either:

Show/Hide Patch Editor.
Show/Hide Console.

Both the Patch Editor and Console will open at the bottom of the screen.