- Meta Spark Studio
- Meta Spark Hub
- Features
- Learn
- Programs
- Blog
- Community
- Create AR effects for Instagram and Meta.Get Started
Rectangles
A rectangle is a 2D shape in Meta Spark Studio. Use it to render textures and materials, creating 2D effects like frames, backgrounds and colored overlays.
In this article you'll learn about adjusting a rectangle's properties in the Inspector. Like with all 2D objects, you can also use the viewport to easily resize, position and rotate rectangles. You can use rectangles to create a frame in this tutorial.
Adding rectangles to your scene
To add a rectangle:
- Click + in the Scene panel.
- Select Rectangle.
You'll see a square shape in the top left of the Viewport and Simulator. 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 can be set to rescale with the size of a device's screen.
Applying materials and textures
To create a material for a rectangle:
- Click + next to Materials in the Inspector.
- 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.
- 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. Clicking the circle symbol next to a property will create a patch to represent it in the Patch Editor.
You can also edit rotation, scale and position in the Viewport.
Visible
Clear this box to stop the rectangle from being rendered in the scene.
Width and Height
Adjust the width and height of the rectangle.
You can also adjust these values to fill the width and height of the parent canvas. To do this:
- Click the Width text field, and select Fill Width, to fill the width of the parent canvas.
- Click Height text field and select Fill Height, to fill the height of the parent canvas.
Width and Height can either be set to Fixed or Relative:
- Fixed lets you to set a specific number for the size of the rectangle. It will not scale with the size of the parent object.
- Relative lets you to set a percentage number that will scale with the width and height of the parent object and therefore the screen of the device.
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.
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 can add textures and color to the material to change the appearance of the rectangle in the scene.
Enable for
When the boxes are selected next to Front Camera and Back Camera the rectangle will be visible through both the front and back camera on a device.
When the boxes are selected next to Preview and Capture the rectangle will be visible both before the person using your effect is capturing a video and during capture.
Interactions
Insert simple combinations of patches into the Patch Editor, like tap gestures.