Creating an Effect With Dynamic Text

In this tutorial you'll add dynamic text, to personalize a 2D frame by showing the real-life location of the person using the effect, and the date.

Download the sample content to follow along. If you open the unfinished effect you’ll see the 2D frame we built in a previous tutorial.

Adding text

Like the rectangles that are already in the scene, you're going to add the text as a child of a canvas. This will make sure the text scales with the size of the device screen.

We have precise positions for the text in mind for this tutorial, so we’re going to use the Inspector to position the text. You can experiment with positioning text in the Viewport too.

To add the text:

  1. Right-click on canvas1.
  2. Click Add.
  3. 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 to place.

Adding the date

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

To add dynamic text, first delete the text that's already there. Then:

  1. Click Insert next to Dynamic Text.
  2. Select the type of text you want. There are lots of options to choose from. For this effect select Date (Short).

Next, change the Font. Spark AR Studio comes with several fonts already installed. For this effect:

  1. Select NotoSans Bold.
  2. Change the Color to white and the Font Size to 24.

Now let’s position the text in the top left of the canvas. Start by editing the text’s position. Change it to:

  1. 0 on the X axis.
  2. 63 on the Y axis.

Then:

  1. Use alignment to align the text to the left.
  2. Set both Width and Height to Relative, so the text scales with the parent object.
  3. Pin the text to the top and left of the canvas.

Adding the location

Now for the second text object. Again:

  1. Select place in the Scene panel.
  2. In the Inspector, delete the text in the Text box.
  3. 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 Spark AR Studio doesn't have access to that data through your computer, so it uses London by default. You can preview and test the dynamic text using the Spark AR Player app.

Next change:

  1. The Font to NotoSans Bold.
  2. The Color to white.
  3. The Font Size to 36.

Then:

  1. Set both Width and Height to Relative.
  2. Pin the text to the top and right.
  3. Align the text to the right of the canvas.
  4. Set the position of the X axis to 247 and the Y axis to 55.

Congratulations! You’ve now added dynamic text to an effect!

Was this tutorial helpful?