Rectangles

In Spark AR Studio, a rectangle is a 2D shape that can be added to your scene. Use it to render textures and materials, creating 2D effects like frames, backgrounds and colored overlays.

Find out about:

We've used rectangles to create a a frame in this tutorial.

Adding rectangles to your scene

To add a rectangle:

  1. Click Add Object.
  2. Select Rectangle.

You'll see a rectangular shape in the center of the Viewport. A canvas will be added to the Scene Panel, too:



A rectangle will always be the child of a canvas - either directly, or as a child of another 2D object. If the canvas is in screen space, this means the rectangle will rescale with the size of device's screen.

Adding materials and textures to rectangles

To create a material for a rectangle:

  1. Click + next to Materials in the Inspector panel.
  2. Select Create New Material.

A flat material will be created by default. Select the material in the Assets Panel to adjust its properties - for example to choose a color, adjust how transparent or opaque it looks, or add a texture.

Rectangle - Properties

When you've selected a rectangle in the Scene Panel, you can make changes to it by adjusting its properties in the Inspector.

Visible

Uncheck this box to stop the rectangle from being rendered in the scene.

Size

Adjust the width and height of the rectangle in the scene.

You can also adjust these values to fill the width and height of the parent canvas. To do this:

  • Click the box on the left and select Fill Width, to fill the width of the parent canvas.
  • Click the box on the right and select Fill Height, to fill the height of the parent canvas.

If you want the rectangle to scale with the width and height of the parent canvas, you'll always need to set Flexibility. Find out more below.

Pinning

Pinning a rectangle means it will maintain the same distance to its parent's border - however much you transform the parent.

Rectangles can be pinned to the top, bottom, left and right.

Flexibility

Using Flexibility will scale a rectangle's width and height proportionately to the canvas - so if you double the size of the canvas, the rectangle will double in size too. This means rectangles will stay in proportion on all devices if the canvas is in screen space.

Flexibility needs to be turned on. Do this by clicking the arrows next to Flexibility in the Inspector panel.

Alignment

Alignment moves the rectangle around within the parent object. Rectangles can be aligned to the top, center, bottom, left and right.

Transformations

Change the rectangle's position, scale or rotation.

Material

Create a new material for the rectangle or apply an existing one. Once you've added a material to a rectangle, you add textures and color to the material to change the appearance of the rectangle in the scene.

Learn More