Using 2D Objects and Layers

In this tutorial you'll create a 2D frame using 2 objects included in Meta Spark Studio - the canvas and rectangles. You'll use options in the Inspector to position the objects, which is a good option for making them fill the height and width of the screen. You can also edit 2D objects in the Viewport.

Download the sample content to follow along. If you open the unfinished effect in the sample content folder, you'll see we've imported a custom texture. It's called frame and listed in the Assets panel. You'll use this to add extra detail to the frame you build. In another tutorial, we'll show you how to add text to this frame.

Frames made with Meta Spark Studio can be used in the Facebook and Instagram cameras. To create a frame for a Facebook profile picture, use Frame Studio instead

The canvas

The first step for building effects with 2D objects is to add a canvas. The canvas creates a space to lay-out 2D objects like the rectangles you're going to add to this effect.

To add a canvas:

  1. Click + in the Scene panel.
  2. Select the Canvas from the menu.

You'll see canvas0 listed in the Scene panel.

If you look at its properties in the Inspector, you'll see an option labeled Mode. This is set to Camera Space by default. Any objects grouped underneath a canvas in camera space can be positioned and set to scale in relation to the size of the device screen.

In the Inspector you’ll see that the Size property can't be changed. This is because it will always match the size of the screen of the device.

If you changed the Mode to World Space, you'd be able to use the canvas to create 2D world effects. When a canvas is in world space, it's decoupled from the camera field of view. This means it can be positioned in 3D space. Follow this tutorial to use a canvas in world space.

We want this effect to scale with the screen of the device, so keep the Mode set to camera space.

Adding rectangles

You'll use 4 rectangles to create the frame. You'll then add a texture to a final rectangle, that you'll position in the center of the scene.

To add a rectangle:

  1. Right-click canvas0.
  2. Select +.
  3. Select Rectangle from the menu.

You'll see the rectangle in the top left corner of the Viewport.

The rectangle can be seen in the top-right corner, with a checkerboard pattern

To add 3 more rectangles, either repeat these steps or duplicate the rectangle you just made:

  1. Right click each rectangle.
  2. Select Duplicate from the menu.

It's worth renaming the rectangles so you can keep track of them as you build your effect. To do this, right-click each rectangle and select rename.

To reflect where they'll be positioned, rename:

  1. Rectangle0 — top_rectangle.
  2. Rectangle1 — bottom_rectangle.
  3. Rectangle2 — left_rectangle.
  4. Rectangle3 — right_rectangle.

Adding materials

In Meta Spark Studio materials define the appearance of objects in your scene. You can add materials and textures to rectangles to build colored filters, vignettes and frames.

In this effect you'll use the same material for each rectangle, and add a color to it.

You can create the material and add it to every rectangle at the same time. Start by selecting the rectangles. You can select them all at the same time holding down either command or control on your keyboard, and clicking each rectangle in the Scene panel.

Then, in the Inspector click + next to Materials. You'll see the new material listed in the Assets panel under Materials, as material0.

Select the material to view its properties in the Inspector. You can make all kinds of changes to the material here. For this effect, start by changing the Shader Type. Click the dropdown next to Shader Type and select Flat.

Next add a color using the Color option under Diffuse:

  1. Click in the box next to Color.
  2. Select a shade from the color palette. We're going to choose a shade of blue

Editing size

Now let's edit the size of the rectangles to start building the shape of the frame.

If you select the top_rectangle in the Inspector, you'll see Width and Height.

You're going to make two of the rectangles the same width as the canvas, and two of the rectangles the same height.

For top_rectangle, click in the first box. You'll see the Fill Width option appear which will make the rectangle fill the width of the canvas. Select this option.

Setting the rectangle to fill both height and width in the Inspector.

Do the same for bottom_rectangle:

  1. Select it in the Inspector.
  2. Select Fill Width.

For both right_rectangle and left_rectangle:

  1. Select Fill Height.

Here's how your project will look:

A blue border can be seen in the left and top edges of the Simulator.

So these rectangles completely fill the space around the texture we're going to add to the center of the effect, make a second edit to the Width and Height option.

Select top_rectangle and bottom_rectangle. Again, you can select them both at the same time by holding down command on your keyboard. Change the Height to 140 in the Inspector.

For right_rectangle and left_rectangle, change the Width to 30:

The width of the border has been changed. It now appears thinner.

Using alignment to position rectangles

To position the rectangles we're going to use alignment. Alignment moves a 2D object around within the canvas.

Each of the buttons here will move the rectangle to a different position.

Start by setting alignment for top_rectangle:

  1. Select the top_rectangle in the Scene panel.
  2. At the top of the Inspector, under right_rectangle0 click the first button from the left. This will align the rectangle to the top of the canvas.

Do the same for the other 3 rectangles. Align:

  1. bottom_rectangle to the bottom of the canvas.
  2. left_rectangle to the left of the canvas.
  3. right_rectangle to the right of the canvas.
A blue border can now be seen on all four sides of the effect. The top and bottom edge have a thicker border than the left and right.

The frame is really taking shape now. But, if you were to change the size of the device in the Simulator — for example to iPad Pro — you'd see the rectangles stay the same size and in the same position. To change this, we’ll set the Width and Height of the rectangles to Relative, and pin them to specific points within the canvas.

Setting relative width and height

Setting the Width and Height properties of a rectangle to Relative means it will scale with the height and width of its parent object — the canvas. This setting keeps 2D objects in proportion on all devices.

To set relative width and height:

  • Select top_rectangle in the Scene panel.
  • Go to the Inspector.
  • Next to Width, click the dropdown and select Relative.
  • Next to Height, click the dropdown select Relative.
Rectangle properties being adjusted in the Inspector.

The value will change to a percentage. You can test out the Relative setting by changing the device type to iPad Pro in the Simulator. The rectangle at the top of the screen, with relative width and height set, will get bigger in sync with the device screen - but the others won't.

Set the Width and Height of the remaining 3 rectangles to Relative.

Pinning rectangles

Now we've set the relative width and height properties, the rectangles will scale with the size of the device screen. However, they'll stay in the same place.

Using pinning will change this. Pinning a rectangle means it will maintain the same distance to the border of the canvas, however big or small the canvas is.

Start with the rectangle at the bottom of the scene:

  1. Select bottom_rectangle in the Scene panel.
  2. In the Inspector, go to Pinning.
  3. Deselect the top symbol.
  4. Select the bottom symbol.

This will pin the rectangle to the bottom of the canvas.

Pin the other 3 rectangles, so:

  1. Top_rectangle is pinned to the top of the canvas.
  2. Left_rectangle is pinned to the left.
  3. Right_rectangle is pinned to the right.

Pinning a rectangle to both the top and bottom at the same time, or left and right at the same time, will turn off the relative width and height setting. If you’ve done this, you might need to reset relative width and height after pinning a rectangle.

To preview how the rectangle will resize when pinned, hover your mouse over the Pinning property in the Inspector. A preview will show on the right.

Adding the texture

Now the frame shape is finished we can add the texture.

First, add another canvas:

  1. Click + in the Scene panel.
  2. Select Canvas.

Canvas1 should now be listed in the Scene panel.

Next, insert another rectangle as a child of canvas1:

  1. Right-click canvas1.
  2. Select Add Object.
  3. Select Rectangle.
  4. Rename the rectangle frame.

The next step is to add a material to the rectangle which we'll then apply the texture to. To do this:

  1. Select the frame rectangle in the Scene panel.
  2. Click + next to Materials in the Inspector.

Select Create New Material - it'll be listed as material1. Like before, set the Shader Type to Flat. Then, to add the texture:

  1. Click the dropdown under Diffuse.
  2. Select frame from the menu.
Adding a texture to the new material.

To make the black section in the center of the texture transparent, adjust the Render Options:

  1. Click the dropdown next to Blend Mode.
  2. Select Add.

This mode will make the black section in the texture appear as if it's transparent because it adds the color information in each channel together.

You should now be able to see the white frame in the scene, but it's a little smaller than we need it to be. To change this, change the size of the rectangle:

  1. Select frame in the Scene panel.
  2. In the Inspector, change both Width and Height values to 400.

This rectangle is pinned to the center of the canvas by default - which is right for this effect. Make sure both the height and width of this rectangle are set to Relative.

At the top of the Inspector, click the 2nd and 5th buttons from the left, to align the rectangle to the center of the canvas.

Creating the layers

To make sure the objects in your scene show up in this effect in the right order, you need to adjust the layers.

For this effect, the texture on the second canvas should render before the rectangles on the first, so it's at the front.

To do this, select canvas1 in the Scene panel. In the Inspector, click the dropdown next to Layer and select Create New Layer. The second canvas and all the objects underneath it have now been assigned to this layer.

If you click onto the layers panel, you'll see the new layer - Layer2 - is at the top of the list. This means objects on this layer will render first. You can change this order, by dragging the layers to a different position. For this effect, they're in the right place.

Your effect will look like this:

Learning more

Instead of using the Inspector to edit 2D objects, you can experiment with changing their position, rotation and scale directly in the Viewport:

Editing a 2D object with the Viewport set to 2D editing mode.

Learn more in this article.