- Spark AR Studio
- Spark AR Hub
- Features
- Learn
- Partners
- Blog
- Forum
- Create AR effects for Instagram and Facebook.Get Started
Navigating the Spark AR Studio Interface
On this page
Have a question?
Go to ForumIn 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.
When the Camera is selected in the menu on the left of the screen, blue lines will appear. These lines show where the camera is pointing and which objects are in view of the camera.
In the example 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, click the 2D button in the top right corner:
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 Add Object to add an object. 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 Add Assets to create assets or add your own. You can add textures, materials, 3D models, animations and audio files here.
The Inspector
Use the Inspector to make all kinds of changes 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:
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 X 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 next them. This means a patch can be created to represent the property.
So if we click the arrow next to 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.
- 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.
- Report a bug.
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 or export your project
- Edit you can undo and redo actions.
- View you can configure your workspace.
- Insert you can add objects and assets to your project.
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 to 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:
