2D Stack

On this page

Adding a stack
Child objects
Example
Properties

Have a question?

Go to Forum

On this page

Adding a stack
Child objects
Example
Properties

A stack is a 2D object in Spark AR Studio. Use it to easily set the position of 2D objects by laying them out in positions relative to each other and their parent object. Stacks are particularly useful for creating frames, UI, games and other 2D effects.

The stack object itself won’t render anything in your effect, unless you add a material to it. Instead, it acts as a container for any 2D objects added as children.

Adding a stack

To add a stack to your project:

  1. In the Scene panel, click + Add Object.
  2. Select 2D Stack from the menu.

To make it easier to edit and position 2D objects like stacks, it’s a good idea to click the 2D button at the top of the Viewport. Here’s how the stack will look:

Child objects

You can add the following 2D objects as children of a stack:

  • Rectangles
  • 2D Text
  • Stacks

Example

In the example below, we’ve added 3 rectangles as children of a stack:

The stack and each rectangle have materials applied to them. In the Inspector we’ve edited the stack's properties, setting:

  • Direction to Horizontal - which arranges the rectangles horizontally in a row.
  • Distribute to Space Evenly - to create even space between each rectangle.
  • Alignment to center - aligning the rectangles to the center of the stack.

Properties

Edit a stack by adjusting its properties in the Inspector. This will control things like the direction child objects are positioned in, how objects are distributed along the stack’s axis, and the space between objects.

Alignment

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

Visible

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

Width and Height

Adjust the width and height of the stack.

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

  1. Click the Width text field, and select Fill Width, to fill the width of the parent canvas.
  2. 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 stack. 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.

Pinning

Pinning a stack means it will maintain the same distance to its parent's border - however much you transform the parent. Stacks can be pinned to the top, bottom, left and right.

Direction

A stack can be used to arrange child objects in a horizontal or vertical direction:

  • Horizontal - child objects will "start" at the left and "end" at the right.
  • Vertical - child objects will start at the top and end at the bottom.

Distribute

Edit Distribute to control where objects are placed along a stack’s main axis. There are six options:

  1. Start - distributes objects from the left or top sides, depending on its direction. Empty space will be moved to the end of the stack.
  2. End - distributes objects from the right or bottom sides, depending on its direction. Empty space will be moved to the start of the stack.
  3. Center - distributes objects at the center of the stack's main axis. Empty space will be split between the start and end of the stack.
  4. Space Between - distributes objects so an equal amount of empty space exists between each.
  5. Space Around - Each object is surrounded by an equal amount of space. The amount of space between objects will be double that of the amount of space between the first and last stack, and the edges of the stack.
  6. Space Evenly - Each object is surrounded by an equal amount of space. There's also an equal amount of space between the start of the stack and the first object, and between the last object and the end of the stack.

Alignment

Adjust Alignment to controls where objects are placed along the stack’s cross axis.

Gap

Gap controls the amount of space between objects that are children of the stack. This property is only available when Distribute is set to Start, Center or End.

Padding

Padding controls the amount of space between the stack's edges. Selecting:

  1. Uniform - adds the same amount of space at the side of each child object.
  2. Per Side - lets you set a different amount of space for each side.

Padding is affected by the Distribution setting. For example, when Distribution is set to Horizontal, left padding applies but right padding does not. Set Distribution to Space Between to apply padding to both sides.

Transformations

Edit the Scale and Rotation of the slack object. Selecting:

  1. Uniform - applies the same scale or rotation values to each child object.
  2. Per Side - lets you to set a different scale or rotation value for each child object.

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 checked 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 checked 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.

Was this article helpful?