Navigating the Interface

Navigating the Spark AR Studio Interface

In this guide we'll take a look at the different parts of the Spark AR Studio interface.

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.

The Viewport showing blue camera lines and a pink and blue diamond

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

Mode menu showing editing options

When this option is:

The Simulator

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

The Simulator showing a blue diamond

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.

The interface with the Scene panel highlighted and diamonds added

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:

  1. Select the category name.
  2. Right click and select Sort By.
  3. 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 Toolbar and Menu bar

The Toolbar

The toolbar is along the left of the interface. Click the icons to:

  • Configure your workspace, for example to show or hide the Patch Editor.
  • Change the video playing in the Viewport.
  • Pause or restart the video.
  • Advance the video in the Simulator by a single frame. Use this button to debug your effect frame by frame.
  • Stop the video. Stopping the video, or pausing and restarting the video, resets your effect to its initial state. Any changes you make when the effect is stopped will be applied when you press play.
  • Test your effect on a device.
  • Export your effect to publish in Spark AR Hub.
  • Report a bug.

Interface with toolbar highlighted

The Menu bar

You can access a number of shortcuts and features through the menu bar along the top of the screen. For example, under:

  • File you'll find options to save, publish your project or log out.
  • Edit you can undo and redo actions.
  • View you can configure your workspace.

The Layers panel

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

Interface with Layers panel highlighted

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.

Interface with Patch Editor open and highlighted
Was this tutorial helpful?