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.

Add text

To add text object:

  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 after being added inserted as an object.

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 + to add additional capabilities.
  3. From the menu select Touch Gestures>Tap Gesture, and Native UI Control.

Script setup

In the Asset panel, select Create New Script.

You can use this script as a guide:

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

// Create a variable to store the name of our text object
const textNodeName  = 'text0';

// Access the text object in our scene
const text = Scene.root.find(textNodeName);

// Register a tap gesture on the text node
TouchGestures.onTap(text).subscribe(function() {
// Edit the text through the NativeUI module
NativeUI.enterTextEditMode(textNodeName);
});
        

Find out more about the Native UI module.

Was this article helpful?