Articles
2D Objects
Editable Text

Editable Text

You can let people using your effect edit the text you've included, by adjusting the text object's properties in the Inspector and adding a simple script.

Editable text won't be shown in the Simulator, but you can try it out on your device using Spark AR Player.

This functionality can be added to both 2D Text and 3D Text.

Spark AR Policies for text

There are specific policies for text. It's worth taking a look at these before submitting an effect that includes editable text, to make sure it's accepted first time.

Spark AR Policies for text

If your effect includes text that's not integrated into the scene, it won't be accepted. See our policy on visual text, for more information.

This is because simply placing text on the screen tends to cover up and interfere with the AR experience instead of appearing naturally in the scene. Remember that people often prefer to add their own text and stickers to effects when they share them in their Instagram or Facebook stories. The only type of static text we accept is a timestamp or a few numbers on a film strip that don’t block the experience for users.

If you need to include text that’s not a timestamp, use a face tracker or plane tracker to track the text to the face or moving object.

For example, if you want to use a score counter in your gaming effect, track it to the user’s head using a face tracker, as in the example below.

For an example of how to integrate text into an effect, learn how to create a 2D photo effect with a dynamic timestamp.

Add text

Start by adding a text object to the Scene panel in Spark AR Studio:

  1. Click Add Object, and select either 2D Text or 3D Text.
  2. In the Inspector, check the box next to Editable.
  3. Change the Placeholder text to something that lets the user know they can edit the text, e.g. Tap to change me.
  4. Edit the text's other properties, like color or size, if you want to.

Add capabilities

Text will have been added as a capability automatically.

You'll need to add the Touch Gestures and Native UI Control capabilities yourself.

To do this:

  1. Go to Project in the menu bar, then Edit Properties....
  2. Select Capabilities, and click +.
  3. From the menu select Touch Gestures > Tap Gesture, and Native UI Control.

Script setup

In the Assets panel, select Create New Script.

You can use this script as a guide:

// Load in the required modules
const Scene = require('Scene');
const NativeUI = require('NativeUI');
const TouchGestures = require('TouchGestures');

// Enables async/await in JS [part 1]
(async function() {

    // Create a variable to store the name of our text object, in this example '2dText0'
    const textNodeName = '2dText0';

    // Create a reference to the text object in our Scene
    const textObject = await Scene.root.findFirst(textNodeName);

    // Change the initial text displayed
    NativeUI.setText(textNodeName, 'Tap to edit');

    // Register a tap gesture on the text object
    TouchGestures.onTap(textObject).subscribe( () => {
          
        // Use the NativeUI module to edit the text displayed based on user input
        NativeUI.enterTextEditMode(textNodeName);
    });

// Enables async/await in JS [part 2]
})();
        

Find out more about the Native UI module.

Was this article helpful?