Adding 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 the Spark AR Player app.

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

Add a text object to your scene

  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

Find out more about the Native UI module.