2D Objects
Editable Text

Editable Text

An effect showing 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.

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

// Enables async/await in JS [part 2]

Find out more about the Native UI module.

Was this article helpful?