CLEAR

Signing In

To sign in to Spark AR Studio:

  1. Open Spark AR Studio
  2. Enter the email address or phone number associated with your Facebook account
  3. Enter the password for your Facebook account and click Sign In

You can only use Spark AR Studio after signing into your Facebook account. Using your Facebook account makes it easier to:

  • Submit your finished effect for people to see and share
  • Receive notifications relating to the approval process

Assets and Objects

Delete

To delete something, right-click on it and select Delete from the menu.

Rename

To rename something:

  1. Long-press on it and release
  2. Enter the new name
  3. Press the Return key on your keyboard

Resize

To resize something:

  1. Select it in the Navigator
  2. Go to the Properties section in the Inspector
  3. Edit the Size property

You can also adjust objects in the Viewport directly by toggling between the Manipulator buttons in the Toolbar and moving the axis.

The Face Tracker

To make an object track your face, you have to make it the child of a Face Tracker.

To do this:

  1. Click Insert
  2. Select Face Tracker and then click Insert
  3. Go to the Scene tab and drag the object file onto the face tracker

Note: To insert objects as children of other objects directly, you can also right-click on the parent in the Scene tab, select Insert and then select the object you want to insert from the menu.

You can add more than one face tracker to a scene, but you can’t add more than one to a face. You would add more than one face tracker if you wanted to track multiple faces within a scene.

To enable multiple faces:

  1. Insert the first face tracker into the scene
  2. Click Project in the menu bar and then select Edit Properties...
  3. Go to the Capabilities tab and click the arrow next to Face Tracking
  4. Click the number to change it
  5. Press the Return key on your keyboard to save

Visualizing Effects

The Viewport enables to you position, scale and rotate your objects in a 3D space, but it isn't an accurate preview of the output. That's why we have the Simulator Window.

The Simulator Window is a separate view for previewing the output of any changes you make in the Viewport and is an accurate representation of what the effect will look like on your device.

The Viewport and the Simulator Window are designed to be used in sync, but if you want to hide either one, you can.

Docking the Simulator Window will maximize it and hide the Viewport. To dock the Simulator Window, click on it to show the buttons and click the third one from the left.

To hide the Simulator window, go to View in the navigation bar and click Hide Simulator.

If you have more than one camera input available (a camera on a laptop and one on a connected monitor, for example) you can choose which one Spark AR Studio uses. To do this, long-press on Video in the Toolbar and select the camera you want to use from the menu.

Mirroring and the AR Studio Player app

To test the effects you build in Spark AR Studio on the Spark AR Player app, you'll need:

  • An iOS or Android device
  • A USB cable
  • A computer with AR Studio installed
  • A saved project

To test your effect:

  1. Connect your device to your computer
  2. Open the app on your device
  3. Open your project in AR Studio
  4. Click Mirror in the Toolbar

The Spark AR Player app stores a version of your effect whenever you click Mirror in the Spark AR Studio Toolbar. This means you can view effects that you've mirrored on your device previously, without being connected to your computer or the Internet.

Yes, if you're offline, you can still view effects that you mirrored with the Spark AR Player app previously.

To toggle between versions of your effect:

  1. Tap the menu in the top left
  2. Select the effect
  3. Select the version and tap Done

The Mirror button in Spark AR Studio is grayed out unless a mobile device is connected to your computer via a USB cable.

If you're having trouble previewing your effect with the Spark AR Player app, make sure:

  1. You have the latest versions of both Spark AR Studio and the app. If the tool and the app versions are incompatible, you won't be able to mirror your effect.
  2. Your device is connected to your computer via USB cable correctly.
  3. You've clicked Mirror in the Toolbar.
  4. You've saved your effect at least once before.

Submitting and Sharing Effects

Instagram and Messenger are currently in closed beta - available to select partners only.

ShareDialog supports an API canShow(ShareContent shareContent) that returns a boolean value which can be used to verify if the camera share is supported by the current version of Facebook app.

FBSDKShareDialog supports the API canShow:shareContent that returns a boolean value which can be used to verify if the camera share is supported by the either the current version of Facebook app.

Units of Measurement Migration

When it was first built, Spark AR Studio had its own units of measurement. These units were similar to millimeters.

From Spark AR Studio v25 onwards, these units will no longer be supported and real-world units, like centimeters or inches, will be supported instead. This will help make the dimensions that you specify in your projects look as close to real-world dimensions as possible.

From v25, you'll be able to choose the units you want to use in the properties of each project. The units that you select will affect how the numeric values of object properties and numbers in your scripts are interpreted.

Older projects will be automatically migrated when you open them in AR Studio v25. The Units of Measurements setting for these projects will be set to Legacy Units, so the numeric values of object properties in those projects won't change.

What's Affected

This change affects all 3D object properties that are specified in world space (example: size and position) and, most importantly, translation transform components. Any 3D objects in migrated projects will be automatically rescaled to meters, which may result in errors.

If your migrated project contains a 3D object, please make sure that you test for and fix any problems that might have occurred. Imported 3D objects are mostly likely to break, especially if the scale values of those objects are referenced in the script.

Your objects might look a little different in relation to the screen of the mobile device than they did before the migration, but this will depend on the mobile device that you use. An object of a certain size may take up the entire screen on one mobile device but not on another one. If you need to make sure that 3D objects are displayed in a fixed way relative to the screen, then those objects should be sized dynamically, either in the script or through layout mechanisms.

What's Not Affected

The units of measurement migration won't affect the properties of 2D objects. This is because the values of those properties are specified in screen units.

There are 2 ways to adjust a 3D object that has broken because of the units of measurement migration.

Using a Null Object

  1. Click Insert, then select Null Object, and click Insert again
  2. Go to the Scene tab and drag the 3D object onto the null object, so that the 3D object becomes its child
  3. Give the null object the same name as your 3D object' 3D mesh

Your script will reference the null object instead of the 3D mesh. By default, the scale values of the null object are set to 1, 1, 1, so the scaling in your script should work as it did before your project was migrated.

Editing the Script

  1. Identify values which are used to compute 3D scale property. For example, check all places where you modify Transform.scaleX/scaleY/scaleZ because those places might include values that are used in animations.
  2. Change those numbers to work with meters. A good place to start is to divide those numbers by 960, as this is the factor that is used internally to transform legacy units into meters. However, in many cases, you might prefer to divide by 1000, so that you end up with round numbers.

Here is an example from one of our projects:

      var startScale = 7;
      ...    
      var driver = Animation.yoyoTimeDriver(2500);
      var sampler = Animation.samplers.easeInOutSine(startScale*0.8, startScale*1.2);
      star.transform.scaleX = Animation.animate(driver, sampler);
      star.transform.scaleY = Animation.animate(driver, sample);
      driver.start();

In this case, the size of an element is animated to produce a pulsing star. After opening this project in AR Studio v25, this start turned out to be too big and it took up the whole screen.

To fix this project, we just need to update the startScale value:

      var startScale = 0.007; 

We chose to divide it by 1000 as we didn't need the new size to match the previous one.

Updated Face Mesh

From v37, the face mesh in Spark AR Studio will be upgraded to a higher fidelity face mesh.

In this new version, we have improved the accuracy of facial feature tracking.

When you open existing projects in Spark AR Studio v37, the face mesh will be updated to the new version automatically.

However, to make sure that your project continues to work as expected, you'll need to recreate any existing deformation models to accommodate the new mesh.

To download a copy of the reference mesh and texture templates:

  1. Open Spark AR Studio
  2. Click Help in the menu bar
  3. Select Get Face Reference Assets