Learn Spark AR Studio

Everything you need to know to create an interactive augmented reality experience.

Clear
Back

Using Screen Interactions to Control Position, Scale and Rotation

You can use patches in Spark AR Studio to detect people's taps, swipes and gestures on the screen of their device - and add interactivity to your effects in response.

In this guide, you'll learn about using the Patch Editor to detect screen interactions, and add logic to change the position, scale and rotation of 3D objects in your effect in response. If you don't have your own 3D object, you can follow this guide using the plane object included in Spark AR Studio, or by adding an object from the Spark AR Library.

It's a particularly good idea to add this type of interactivity to effects that use the plane tracker to place objects on surfaces in the real world - so people can make objects the right size, and move them around.

Learn about changing an object's:

  • Position - based on a panning gesture.
  • Scale - in response to a screen pinch.
  • Rotation - in response to the rotation of the device.

Using the Screen Pan patch to control position

Start by creating the patches you'll need. Right-click in the Patch Editor, and select:

  1. A Screen Pan patch.
  2. An Unpack patch.
  3. A Pack patch.
  4. A Divide patch.

You'll also need a consumer patch representing the Position property of your 3D object. You can create this by clicking the arrow next to Position in the Inspector panel.

The Screen Pan patch will detect a swipe of the finger across the device screen. This will return an X and Y value, which can't be read by the patch representing the 3D position of the object. You'll use the Pack and Unpack patches to convert the X and Y values to a Vec3 signal - which can be read by the consumer patch.

To do this, you'll need to right-click on the patches to change their Type. Change the Type of:

  1. The Unpack patch to Vector2.
  2. The Pack patch to Vector3.
  3. The Divide patch to Vector2.

The Divide patch will be used to manipulate the input from the Screen Pan patch. In this case, we've divided the input by 10. If we didn't include the Divide patch, the object would move very dramatically.

Connect the patches, so your graph looks like this:



To finish up, edit the value in the Divide patch. We found that changing both X and Y to 10 works well.

Using the Screen Pinch patch to change scale

Adding these patches to your effect will make an object get bigger or smaller when someone pinches the screen. You'll need:

  1. A Screen Pinch patch.
  2. A Pack patch.
  3. A consumer patch, representing the Scale of your 3D object.

The Scale output in the Screen Pinch patch is a number that represents the scale of the pinch, starting at one.

You'll use the Pack patch to unpack this information into X,Y and Z values, and then translate it into a single value that can be read by the consumer patch. To do this, you'll need to change the Type of the Pack patch to Vector3.

Connect the patches, so your graph looks like this:

Using the Screen Rotate patch to rotate an object

For this graph, right-click in the Patch Editor and select:

  1. A Screen Rotate patch - to detect the rotation of the screen.
  2. A Multiply patch - we'll use this to invert the direction of the rotation.
  3. A Patch patch - again to convert the signal from the Screen Rotate patch into something that can be read by the consumer patch.

In the Inspector panel, create a consumer patch representing the Rotation property of your 3D object.

Connect the patches, so your graph looks like this:



Set the value of to the Multiply patch to -1. This inverts the direction of the rotation, so the user can rotate the object in a more natural way.

Join the Spark AR Creator's community

Find inspiration, see examples, get support, and share your work with a network of creators.

Join Community

Frequently asked questions

Have a specific question? Maybe it's been answered.


Read FAQs
Was this document helpful?