World Effects
Target Markers

Target Markers

A target tracking effect, showing a green start above a Spark AR poster.

If your effect includes target tracking, it's a good idea to show a target marker in the effect until the target image is detected. This will help people using the effect know what target to look for in the real world. When the correct target is detected the target marker can be set to disappear, revealing the effect.

The target marker is made of two textures:

  • A semi-transparent preview of the target image.
  • A texture provided by Spark AR Studio that looks like a frame - download the image file here. The file is called target-marker-texture.png.

You’ll set up your scene so the frame appears to surround the preview of the target image.

A simple combination of patches in the Patch Editor can make the target marker disappear when the target is found.

Download the sample content to get:

  • The target marker texture.
  • A complete target tracking effect that includes the target marker.
  • An unfinished project with the target tracking already set up.

Follow the tutorial on this page to add the target marker to the unfinished project yourself.

Before you start

Open the unfinished project in the sample content folder or create a new project with target tracking set up.

In the unfinished project the target is a poster. When the camera detects the target, a green star will appear on top of the poster.

Adding the target maker

Each of these textures will be added to the scene using an object included in Spark AR Studio called a rectangle.

First add a rectangle:

  1. Click add object.
  2. Select rectangle.
  3. Rename the rectangle targetMarker.

The rectangle will automatically be added as a child of a canvas. This will ensure it resizes in sync with the device screen. The canvas will also be used to group the target marker texture and the preview image, so changes can be made to both of them at the same time.

In the Inspector:

  1. Change the Width and Height values to 260.
  2. To the right of Position, set X to 57 and Y to 200.

It's important to make sure the target marker doesn't show when the effect is being captured on someone's device. To do this, make a change to the canvas:

  1. Select canvas0 in the Scene panel.
  2. In the Inspector, click the arrow to the left of Enable For.
  3. To the right of Capture, clear the box.

Next we will add the target marker texture to our rectangle:

  1. In the Scene panel, click the targetMarker rectangle.
  2. In the Inspector, click + next to Materials.
  3. In the Assets panel, select the new material.
  4. Go to the Inspector.
  5. Under Diffuse, click the dropdown to the right of Texture.
  6. Select target_marker_texture from the menu.
  7. Under Render Options, set Opacity to 30.

You'll see the texture in the Simulator:

A white square can be seen obscuring the tracked target.

Adding the target image preview

The target image preview should be the same image that triggers the target tracking effect. In this project, it's listed as SparkPoster in the Assets panel.

To render it in the scene, start by adding another rectangle

  1. In the Scene panel, right-click canvas0.
  2. Select Add, then Rectangle.
  3. Rename the rectangle targetPreview.

Edit the size of the rectangle, using the Width and Height options in the Inspector. The values you’ll enter here will depend on the size and proportions of your target texture, but make sure:

  • One of the size values is always set to 220, for the longest side of your texture.
  • The other size value is set to account for the aspect ratio of the texture.

For this effect, set

  • The Width to 155.
  • The Height to 220.
  • For Position, set X to 113 and Y position to 219

You’ll now have 2 rectangles in the Scene panel as children of the canvas. Here’s your project will look if you're using the sample content:

The white square obscuring the target now contains a checkerboard pattern.

Next add the target preview image to the rectangle:

  1. Select your targetPreview rectangle.
  2. Go the the Inspector
  3. Select + to the right of Materials, then Create New Material.
  4. Add the same texture that’s used to trigger the target to this new material. In the sample project, it’s called SparkTargetPoster.
  5. In the Inspector, change the Opacity of the material to 65%. This will allow people to see the real world through the texture when they’re looking for the target.

In the Viewport and Simulator you’ll see the target marker covering the target and effect:

The checkerboard pattern has been replaced with a picture of our target.

Adding the patches

To complete the effect, use the Patch Editor to make the target marker disappear when the target is found.

The graph will use a signal from the target tracker to detect whether the target has been detected by the camera, or not.

This information will be passed to a patch controlling whether both the target marker rectangles show in the scene, through the Visibility property of the canvas they’re grouped under.

To add this patch:

  1. Select canvas0 in the Scene panel.
  2. Click the arrow to the left of Visible in the Inspector.

The Patch Editor will open, and a yellow patch will be added:

A screenshot from Spark AR Studio, showing the canvas0 patch has been added to the patch editor.

Next create a patch for the target tracker:

  1. Select the target tracker in the Scene panel.
  2. Drag it into the Patch Editor.

The final patch you’ll need is the Not patch. This will tell the texture not to appear when the target is detected. To add this patch:

  1. Right-click in the Patch Editor.
  2. Select the Not patch.

Now connect the patches. Connect:

  1. The Found output in the targetTracker0 patch to the input in the Not patch.
  2. The output of the Not patch to the Visible port in the patch representing the Visibility of the canvas.

Your graph will look like this:

A patch graph that removes your target marker once the user has found the target image.

You'll longer see the target marker. That’s because in the Viewport the camera is pointed at the target texture, so the texture has been found.

Testing target tracking

Use Spark AR Player to preview your target tracking effect on a device

Was this article helpful?