CLEAR

Editable Text

You can add both 2D Text and 3D Text to your effects in Spark AR Studio. You can also let people using your effect edit the text you've included, by adjusting the text object's properties in the Inspector panel and adding a simple script.

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

Insert a Text Object

  1. Click Insert, and select either 2D Text or 3D Text.
  2. In the Inspector Panel, 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.