CLEAR

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: Adding Text to Effects

In this tutorial you'll learn the basics of text in Spark AR Studio. We'll discuss how to add text to your projects, how to use dynamic text and how to edit the properties of text.

In this tutorial you'll learn:

  1. How to add text and dynamic text to your projects, and how to edit its properties.
  2. How to build a background using rectangles and a texture.

Download the sample content to follow along. If you open the finished effect you'll see we're going to build a simple frame with 2 dynamic text elements.

Inserting Rectangles

To start, open Spark AR Studio and create a new project.

Click Insert, select Canvs and then click Insert. You'll see canvas0 listed in the Scene tab.

The canvas will group the rectangles you'll insert to build your background. To insert the rectangles, right-click canvas0, select Insert and then select Rectangle from the menu.

Repeat this step 3 more times. You should now be able to see 4 rectangles in the Scene tab as children of the canvas and one square in the center of your scene.

It's worth renaming the rectangles so you can keep track of them as you build your effect.

Change the name of:

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

As you can see, the rectangles in your scene don't have a material yet. Because we want them to look the same, they'll all use the same color material.

To create it, go to the Assets panel, click the plus sign and select Create New Material. The properties for this new material should open automatically. Below 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.

To apply this material to the first rectangle, select the object in the Scene tab, go to the Inspector panel, click the plus sign next to Material and select the material you just created from the menu. Do the same for the 3 other rectangles.

Editing rectangles

To move the rectangles into the correct position and make them the correct size, you'll need to edit their properties.

First select top_rectangle and go to Transformations in the Inspector panel. Go to Size and:

  1. Change the width to 375, to match the width of the canvas.
  2. Change the height to 140, to match the height of the canvas.

To position the rectangle, first we're going to use Alignment. We're going to align this rectangle to the top of the canvas.

Then, we'll use Pinning. Pin the rectangle to the top of the canvas.

Next, click bottom_rectangle in the Scene tab:

  1. Set the width to 375, and height to 140.
  2. Click bottom alignment - the 3rd button from the left.
  3. Pin the rectangle to the bottom of the canvas.

For the left_rectangle:

  1. Set the width to 30 and the height to 667.
  2. Click left alignment - the 4th button from the left.
  3. pin the rectangle to the left of the canvas.

Then, for the right_rectangle:

  1. Set the width to 30 and height to 667
  2. Click right alignment - the 6th button from the left
  3. pin the rectangle to the right of the canvas.

Finally, you'll need to set Flexibility. This will make sure your effect stays on proportion on all devices.

You can set Flexibility to all 4 rectangles at the same time by holding down command on your keyboard, and clicking each rectangle in the Scene tab.

Then, in the Inspector panel click both sets of arrows next to Flexibility, to set both vertical and horizontal flexibility.

You should now see the rectangles covering most of the scene.

Inserting a texture

Now the background is finished, we're going to create the white frame in the middle of the scene. We'll do this by inserting a texture, which we've provided in the sample content.

First, insert another canvas. Click Insert, select Canvas and click Insert. Canvas1 should now be listed in the Scene tab. This canvas will group the rectangle and text you'll insert to build your foreground and complete your effect.

Next, insert another rectangle as a child of canvas1. Right click canvas1, select Insert and select Rectangle. Rename the rectangle frame.

To import the texture, go to the Assets panel, click the plus sign, select Import Assets... and then open the frame.png in the sample content folder.

You should now see frame.png in the Assets panel. The next step is to create a material to apply the texture to. To do this, click the plus sign again and select Create New Material. The new material's properties should open automatically in the Inspector panel. Then, go to Diffuse, click the arrow next to Texture and select the texture you just imported from the menu.

Once you've done that, go down to Render Options and change Blend Mode to Add. This mode will make the black section on the texture you've inserted transparent, because it adds the color information in each channel together.

To apply the material to canvas, select canvas1 in the Scene tab, go to the Inspector panel, click the plus sign next to Material and select the material you've just created.

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 for this effect, so go to Properties and change both Size values to 400. The frame should now be the correct size.

Again, make sure Flexibility is set for both the height and width for your rectangle by clicking the arrows next to Flexibility.

Inserting Text

To add the location and date text, you need to add text objects to your scene. We want to position these text objects relative to the position of the white frame, so they need to be inserted as children of canvas1.

To do this, right-click on canvas1 in the Scene tab, select Insert and then select Text. Do this one more time, so you have 2 text objects in the Scene tab as children of canvas1.

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

Next, you'll need to edit the properties of these text objects. Select date in the Scene tab and go to its properties in the Inspector panel. Below Typography, in the Text box, you'll see that the text in your scene just says 'Text'. We want to make a frame that takes data from people's mobile devices and represents it as text in the scene. To do this, we need Dynamic Text.

To insert a dynamic text token, delete the text that's already there, then click Insert next to Dynamic Text. Select the token you want to insert from the menu, in this case Date (Short). The text in your scene should now be showing the date.

Editing Text

Next, you'll need to change the Font. Spark AR Studio comes with several fonts already installed. You can choose whichever one you like, but for this effect, we're going to choose NotoSans Bold. Change the Color to white and the Font Size to 30.

Once you've done that, under Transformations set the position of the X axis to -1.2 and the Y axis to 2.2.

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

To edit the properties of the second text object, select it in the Scene tab and go to the Inspector panel. Delete the text that's in the Text box, click Insert next to Dynamic Text and 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 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.

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

Then:

  1. Set the position of the X axis to 1.2 and the Y axis to -2.2
  2. Set Flexibility for both width and height.
  3. Pin the text to the bottom and right.

Creating the Layers

To make sure that the objects in your scene are rendered in the correct order, you need to adjust the layers. Go to the Layers tab and click the plus sign to create another layer.

There should now be 2 layers in the tab. All of the objects in your scene are assigned to the bottom layer in the list by default.

You can assign objects to new layers by selecting each one in the Scene tab and choosing a new layer from the dropdown menu at the top of the Inspector panel. For this effect, leave the children of canvas0 on layer0 and assign the children of the canvas1 to layer1.