Move and Resize an Object in the World

A 3d model of a boombox is moved and resized when the user pinches the screen.

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 use the Patch Editor to detect screen interactions and change the position, scale and rotation of a 3D object 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.

Using the Screen Pan patch to control position

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

  • A Screen Pan patch.
  • An Unpack patch.
  • A Pack patch.
  • A Divide patch.

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

What are consumer patches?

The final patch in a graph will represent the property of the object in your scene that you want the graph to affect.

These patches are known as 'consumer' patches, because they consume signals created by other patches in the graph, changing the property as a result.

To create this type of patch, select the object in the Scene panel and click the arrow next to the property in the Inspector.

A yellow patch will be created:

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 click on the patches and change their data type in the dropdown at the bottom of the patch. Change the Type of:

  • The Unpack patch to Vector2.
  • The Pack patch to Vector3.
  • 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:

A patch graph containing five patches.

To finish up, edit the values in the Divide patch. We found that changing both of the bottom X and Y inputs to 1000 works well. The final graph will look like this:

Clicking in the Simulator will now simulate the object moving with the user's touch on a device screen, like this:

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:

  • A Screen Pinch patch.
  • A Pack patch.
  • 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 data type of the Pack patch to Vector3.

Connect the patches, so your graph looks like this:

A patch graph containing three patches.

Similating pinching the screen in the Simulator will now change the object's scale, 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 Pack patch - again to convert the signal from the Screen Rotate patch into something that can be read by the consumer patch.

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

Connect the patches, so your graph looks like this:

A patch graph containing four patches.

Set the bottom input 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.

Similating rotating the screen in the Simulator will now rotate the object, like this:

Was this article helpful?