Clear
Back

As a result of the coronavirus (COVID-19) outbreak, we have a reduced capacity to review effects and delays in publishing are expected. Learn more.

Using Screen Interactions to Control Position, Scale and Rotation

Learn to use the Patch Editor to change the position, scale and rotation of 3D objects in your AR effect in response to screen interactions.

If you don't have your own 3D object, you can use an object from Spark AR Library. In this tutorial we're using the heart shaped primitive.

It's a good idea to add this type of interactivity to world 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.

Change an object's:

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

Patches you'll use

To achieve this effect you'll use 3 types of patches:

  • Interaction patches, for example Screen Tap and Screen Pan - to detect touch gestures like taps and swipes on the screen of the device.
  • Pack and Unpack patches - to convert signals created by the interaction patches to something that can be connected to the 3D object.
  • Math patches, for example the Divide and Multiply patches - to adjust the movements of the object.

Using the Screen Pan patch to control position

Creating the patches

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 patch representing the Position property of your 3D object. You can create this by clicking the arrow next to Position in the Inspector.

You'll see the following 5 patches in the Patch Editor:

Changing the data type the

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 patch representing the object's Position property.

To do this, you'll need to change their data type. Do this by selecting an option from the menu at the bottom of the patch:

Change the data type of:

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

Connecting the patches

Connect the patches, so your graph looks like this:



Editing the patches

The Divide patch manipulates the input from the Screen Pan patch, dividing the input value so the object moves more subtly.

To finish up, edit the value in the Divide patch. Change both the X and Y values to 10.

Using the Screen Pinch patch to change scale

Creating the patches

Create the following patches:

  1. A Screen Pinch patch - to detect a pinch on the device screen.
  2. A Pack patch.
  3. A patch representing the Scale property of your 3D object.

Changing the data type

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 patch representing the object's Scale. To do this, you'll need to change the Type of the Pack patch to Vector3.

Connecting the patches

Connect the patches, so your graph looks like this:

Using the Screen Rotate patch to rotate an object

Creating the patches

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

  1. A Screen Rotate patch.
  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.

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

Connecting the patches

Connect the patches, so your graph looks like this:



Editing the patches

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

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?