Tutorial: 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.

Something Went Wrong

We're having trouble playing this video.

Learn More

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.

To add the text:

1. Right-click on canvas1.
2. Click Add Object.
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 lot 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. - 120 on the X axis.
2. 220 on the Y axis.

Then:

1. Use alignment to align the text to the left.
2. Make sure Flexibility is set for both width and height.
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 Flexibility for both width and height.
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 120 and the Y axis to -220.

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

Learn more

• Create an effect with 2D objects and interactivity.
• Learn about 2D texture animation.
• Add particle systems to your effects.