Articles
2D Objects
Changes to coordinates for 2D Objects

Changes to coordinates for 2D Objects

From version 95 of Spark AR Studio there will be a new coordinate system for 2D objects - rectangles and 2D text.

You can update 2D objects that have been positioned using the Inspector to the new coordinate system by opening a project in v95 or above and following the on-screen instructions. If the position of objects are set in Patch Editor or with scripting, patch graphs and scripts will need to be manually updated.

If you don’t update your projects, they’ll be automatically updated when v99 of Spark AR Studio is released. It’s best to update projects yourself before the automatic update, so you can make sure objects are in the right positions.

Which projects are affected?

Projects and blocks that include rectangles and 2D text are affected.

Projects using rectangles to fit the full width and height of the canvas will not be affected.

Only the position of 2D objects will be impacted. The scale and rotation of 2D objects will not change. 3D objects will not change.

How will coordinates change?

Until version 95, the origin of a 2D object in Spark AR Studio is the center of the object with the Y axis pointing up.

In the new coordinate system the origin of the object is in the top-left, with the Y axis pointing down.

Example

The image on the left shows a rectangle positioned using the old coordinate system. The image on the right shows the same rectangle positioned with the new coordinate system:

In the old coordinate system, the rectangle’s position is -50, 150, with its center offset to the parent canvas’ center point.

In the new coordinate system, the rectangle’s position is 50, 50, which is the top-left offset to the parent canvas’ top-left.

What does this mean for projects with 2D objects?

2D objects positioned in the scene, for example to create UI, frames or other shapes will be in the wrong positions.

Updating projects with 2D objects

To quickly and easily update a project with 2D objects:

  • Open the project in v95 of Spark AR Studio or above.
  • When asked to Change this project to the new 2D coordinate system, select Change Now.

Remember to update blocks as well as projects. You’ll see a warning icon on a block if the coordinates haven’t been changed.

When you’ve updated to the new coordinate system, upload the effect to Spark Hub.

Projects using the Patch Editor or scripting

If a project includes scripting or the Patch Editor, you’ll need to edit any coordinates referenced by the script or graph manually.

For all projects that use the Patch Editor or scripting to position 2D objects, the object must be pinned to the top left of the parent object in the Inspector.

If a project uses the Patch Editor

With the new coordinates system, 2D objects will by default be pinned to the top-left of their parent object. If the Pinning property is changed in the Inspector, any patch representing the Position property of a 2D object will be removed from the Patch Editor.

If a project uses scripting

Here are some examples of how you can update your scripts. This logic can be applied to patches, too.

If you previously offset a 2D element relative to its parent’s center:

 child.transform.x = Reactive.val(centerXOffset);
 child.transform.y = Reactive.val(centerYOffset); 

Because the new coordinate system offsets from the top left, you’ll need to add rectangle sizes into the calculation. You’ll also need to take the Y axis direction change into account, using the opposite value for the Y offset.

 child.transform.x = parent.bounds.width
  .div(2)
  .sub(child.bounds.width.div(2))
  .add(Reactive.val(centerXOffset));
  
 child.transform.y = parent.bounds.height
  .div(2)
  .sub(child.bounds.height.div(2))
  .sub(Reactive.val(centerYOffset));

If you previously offset a 2D element relative to its parent’s top left, you may have logic such as:

child.transform.x = Reactive.val(left)
  .sub(parent.bounds.width.div(2))
  .add(child.bounds.width.div(2));
  
child.transform.y = Reactive.val(-top)
  .add(parent.bounds.height.div(2))
  .sub(child.bounds.height.div(2));

Because the new coordinate system offsets from the top left, you can simplify it to directly use top-left offsets:

child.transform.x = Reactive.val(left);
child.transform.y = Reactive.val(top);
Was this article helpful?