Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

There may be differences between your version of Spark AR Studio and this tutorial because the product is currently in beta and we update it regularly.

Tutorial: Text, 2D Objects and Layers

In this tutorial you'll create a 2D frame, using 2 objects included in Spark AR Studio - the canvas, and rectangles:

In this tutorial you'll learn how to:

  1. Add a canvas to your effect - the first step for building 2D effects.
  2. Build a background using rectangles and a texture.
  3. Add text and dynamic text to your projects, and edit its properties.
  4. Add layers.

Download the sample content to follow along. If you open the unfinished effect 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 the end, you'll have an effect that looks like this:

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 and text you're going to add to this effect.

To do this:

  1. Click Add Object.
  2. Select the Canvas from the menu.

You'll see canvas0 listed in the Scene tab.

If you look at the canvas's 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 can 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 3D space. You can follow this tutorial to use a canvas in world space

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

Adding rectangles

In this effect, you'll use 4 rectangles to create a frame that will scale proportionally to the user's device screen size.

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 on canvas0.
  2. Select Add.
  3. Select Rectangle from the menu.

You'll see the rectangle in the center of the Viewport.



To add 3 more rectangles, you can either repeat these steps, or copy and paste the rectangle you just made. To do this, just:

  1. Select each rectangle.
  2. Press command c, then command v on your keyboard - if you're using a mac. Hit control instead if you're using a windows machine.

It's worth renaming the rectangles so you can keep track of them as you build your effect. To do this, right-click on 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. and Rectangle3 - right_rectangle.

Adding materials

In Spark AR 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 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 in the here. For this effect, start by changing the Shader Type. Click the dropdown, and select Flat. The flat material is the best option for materials applied to 2D objects, because it doesn't emit or respond to light. This means it has less impact on the performance of your effect.

You can add a color using the Color option under Diffuse. Click in the box next to Color and 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 2 options next to Size. Use the first option to change the Width of the rectangle, and the second option to change the Height.

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

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



Do the same for bottom_rectangle:

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

For both right_rectangle and left_rectangle:

  1. Click in the second box next to Size.
  2. Select Fill Height.

Here's how your project should be looking once you're done:



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 Size option.

Select top_rectange and bottom_rectange. 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:

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 rectangle in the Scene Panel.
  2. Under Alignment, click the first button from the left - for top alignment.

The rectangle should have moved 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 he left of the canvas.
  3. right_rectangle to the right of the canvas.


The frame is really taking shape now. But, if you were to change the size of the device in the Simulator - for example to change to iPad pro - you'll see the rectangles stay the same size, and in the same position. We can use the flexibility and pinning features to change this.

Setting flexibility

Flexibility scales the height and width of each rectangle in relation to the canvas. This means objects will stay in proportion on all devices.

To test this out, select top_rectangle in the Scene Panel. Click the arrows next to Flexibility in the Inspector.

If you change the device type to iPad pro in the Simulator, you'll see the top rectangle has scaled in proportion to the device screen - but the others haven't.

Set Flexibility for the remaining 3 Rectangles:

Pinning rectangles

So now we've set flexibility the rectangles will scale with the size of the device screen, but they'll still say in the same place.

Using pinning will change this. Pinning a rectangle means it will maintain the same distance 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, select the bottom symbol next to Pinning.

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.

Adding the texture

Now the frame is finished, we're going add the texture to the middle of the scene.

First, insert another canvas, to group the texture and text that completes the effect:

  1. Click Add Object.
  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.
  3. Select Rectangle.
  4. Rename the rectangle frame.

The next step is to add a material to the rectangle, apply the texture to. To do this:

  1. Click + next to Materials - in the frame rectangle's properties.
  2. Select Create New Material.

Select the 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.


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 Panel.
  2. In the Inspector, change both Size values to 400.

This rectangle is pinned to the center of the canvas by default - which is right for this effect. Make sure flexibility is set for both the height and width of this rectangle, by clicking the arrows next to Flexibility.

As the rectangle is supposed to stay in the middle of the scene, there's no need to set alignment.

Adding text

Like the rectangles, the text should be a child of the canvas in the scene tab. Right-click on canvas1, and select 2D Text. You'll see an object called 2dText0 listed in the Scene Panel.

Do this one more time, so you have 2 text objects in the Scene Panel as children of canvas1.



To help you keep track, change the name of the first text object to date, and the second the place.

Select date in the Scene Panel. Over in the Inspector you'll see a text box under Typography. You can edit the text here, to add your own text to the effect. For this effect though, we're going to use the Dynamic Text option.

To add dynamic text:

  1. Delete the text that's already there.
  2. Click Insert next to Dynamic Text.
  3. Select the type of text you want to insert from the menu.

There are lot of options to choose from - for this effect select Date (Short).

Editing text

Next, change the Font. Spark AR Studio comes with several fonts already installed. You can choose whichever one you like, but for this effect, select NotoSans Bold. Change the Color to white and the Font Size to 24.

Once you've done that, Under Transformations set the Position of the text to:

  1. -120 on the X axis.
  2. 220 on the Y axis.

Make sure Flexibility is set for both width and height, then pin the text to the top and left of the canvas.

To edit the properties of the second text object, select it in the Scene Panel and go to the Inspector:

  1. Delete the text that's in the Text box.
  2. Click Insert next to Dynamic Text.
  3. Select Current City - you should see the text in the scene change.

Current City is represented in the scene as London. You might be in another location, but Spark AR Studio doesn't have access to that data through your computer, so it uses London as a default. You can preview and test the dynamic text using the AR Studio Player app to see this working properly.

Next, change the Font to NotoSans Bold and the Color to white. Change the Font Size to 36.

Then:

  1. Set the position on the X axis to -120 and the Y axis to 220.
  2. Set Flexibility for both width and height.
  3. Pin the text to the bottom and right.
  4. Align the text to the right 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 objects on the second canvas should render after the objects on the first, so they're at the front of the effect.

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

Learn more

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?