Reality Augmentation

Rollick can recognise real images like a poster, a museum label, a painting or a board-game card through the player's camera. When it spots one, you can pin text, pictures, video or a 3D model onto it, or simply treat the scan as the moment your plot moves forward.

This section covers Visual Targets, the rules that react to them, the AR overlays you can attach, and how to go further with a custom WebAR app.

Three Ways to Bring the Real World In

Rollick gives you three ways to make a physical thing matter in a game. Most AR moments should use Visual Targets, which you can set up entirely in the Studio. Use a custom web app when you need interaction that overlays can't give you. Use codes when you only need a reliable trigger and the look of the marker doesn't matter.

How a Scan Plays Out

A Visual Target does nothing by itself. It becomes scannable only once a rule listens for it. You author two things in the Studio, and the player app handles the rest.

On the player's side, the Scan the World button appears in the game menu, and as an action button on map games, only when at least one target can be scanned right now. Before the camera opens, the app downloads every reference image and overlay file, showing "Preparing AR assets… (3/5)" while it does.

Before You Start

• Can't find the Visual Targets tab? AR authoring is switched on per Studio installation. If a scene has no Visual Targets tab and the trigger Player scans Visual Target isn't offered, ask your Rollick administrator to enable AR.
• Players need an AR-capable phone, meaning ARKit on iPhone or ARCore on Android, running a Rollick app build that includes AR. AR doesn't run in simulators.
• Keep the physical target at hand. You'll need its exact printed width, and you'll test with it more than once.

Step 1: Create the Visual Target

1. Open the scene where the target should be scannable, then open its Visual Targets tab.
2. Choose New Visual Target and give it a name you'll recognise in rule menus, such as "Lobby poster" or "Statue plaque".
3. Upload the Reference Image: a straight-on, tightly cropped picture of the real thing. Only image files are accepted.
4. Enter the Physical Width in metres, which is the real width of the printed or physical image. Type the exact value rather than using the stepper arrows, e.g. 0.21 for A4 portrait, 0.297 for A4 landscape, 0.594 for an A1 poster.
5. Save. Then go straight to Step 2, because a target without a scan rule is never offered to players.

Choosing a Good Reference Image

The camera matches visual detail, not meaning. A picture people find striking can still be hard to recognise if it has little texture.

Step 2: Write the Scan Rule

1. In the same scene, open Rules and create a new rule.
2. Under When, pick the trigger Player scans Visual Target and choose your target. Leave Fire once checked for a one-time moment, or uncheck it if players should be able to scan the target again (more below).
3. Under Do the following, add what should happen: give an item, attach an attribute, assign a mission, enable a scene, show a notification… If you want something to appear on the image, also add one augment action (Step 3).
4. If you like, add conditions and an Else branch to show different content to different players.

Overlay or No Overlay?

Step 3: Place the Overlay

Both actions share three transform fields: at position (x, y, z in metres, −10 to 10), with scale (0 to 1), and and rotation (degrees, −180 to 180). All three are measured from the centre of the target.

Getting the Size Right

• Images and videos fill a 1 × 1 square that's multiplied by the scale, so 0.2 gives a 20 cm square. Non-square media is stretched to fill the square, so export it square or pad it.
• Text sits in a 4 × 2 box multiplied by the scale. The default 0.03 gives a label about 12 cm wide. Text uses a fixed bright-green style you can't change, so for branded lettering make an image instead.
• 3D models keep their own units (glTF uses metres), multiplied by the scale. Check the model's real size in your 3D tool before you guess.

Starting Points

Two habits help: lift flat overlays 1 cm off the surface (y = 0.01) so they don't flicker against the print, and for standing media set y to half the scale so the bottom edge rests on the surface. Negative z moves content toward the top of the image.

How Media Behaves

• Video plays while the target is in view and the video is near the centre of the screen, and pauses when the player looks away. It plays once and doesn't loop.
• 3D models play their built-in animations while the target is in view. Rollick adds soft white ambient light.
• Everything downloads before the camera opens. Keep videos short and compressed, and keep models light. Players on mobile data will thank you.

Different Players, Different Content

Add conditions to a scan rule (But only if…) and the same poster can tell different players different things: one overlay for the Then branch, another for the Else branch. Rollick checks the conditions when the scanner opens.

Example: the dark tomb. The mural can only be seen once the player has found a lantern elsewhere in the game.

When      player scans Visual Target "Tomb mural"   (Fire once off)
Only if   player owns item "Lantern"
Then      augments with media "mural-restored.mp4" · attach attribute "Saw the mural"
Else      augments with text "Too dark to see. Find a light."

Scans as Plot Triggers

You don't need an overlay to make a scan meaningful. Every scan is recorded in the player's state, so you can use it in two ways:

• As an event: the trigger Player scans Visual Target fires the moment it's recognised.
• As a fact: the condition Player has scanned / has not scanned Visual Target works anywhere conditions do: other rules, milestones, missions and scene entry.

Collect-them-all trail. Five plaques around a site. Each scan hands out a stamp, and a milestone rewards the full set. Leave Fire once on so each plaque counts only once.

Each scan rule   give item "Stamp" ×1 · show notification "Stamp 3 of 5"
Milestone        player owns 5 "Stamp"  →  assign mission "Final riddle"

Unlock the next chapter. Finding the map on the noticeboard opens the next scene. There's no overlay, so the scanner closes at once.

When      player scans Visual Target "Noticeboard map"
Then      go to scene "Chapter 2"

The talking portrait. Scanning a portrait starts a conversation with the character in it.

When      player scans Visual Target "Portrait of the Admiral"
Then      start conversation "The Admiral remembers"

A gentle nudge. A player who reaches the harbour without having looked at the ledger gets a hint.

When      player enters scene "Harbour"
Only if   player has not scanned Visual Target "Ship's ledger"
Then      show notification "Did you check the ledger in the office?"

Making a Scan Count Once

The Fire once option on the scan rule decides whether a player can scan a target again. It's checked by default for new rules.

Leave Fire once on for collectables and one-time triggers. Turn it off for content players should be able to revisit, like an exhibit video, and for targets whose conditions may not be met the first time.

Reward once, keep the overlay. To pay out a reward only once but let players keep scanning, turn Fire once off and use your own flag:

1. In the Then branch, attach an attribute to the player, e.g. "Found the statue", alongside the reward.
2. Add the condition that the player doesn't have that attribute yet.
3. Give Else a text overlay such as "Already in your collection", so repeat scans still get a response.

Custom AR with an External Task

When overlays aren't enough, for example when you need surface or face tracking, several targets in one session, tapping to collect virtual objects, scoring, or custom sound and animation, host the whole experience as a web app and launch it as an Interactive External Task. Rollick pauses the game and opens the app on top of it, and the app hands a result back when the player finishes.

1. Have a developer build and host the WebAR app over HTTPS.
2. In the Studio, create an Interactive External Task with a Title (the header text), a URI (the app's address), and optional Back and Close buttons.
3. Add any extra payload parameters the app needs: a fixed string, a reference to player state, or a state expression.
4. Launch it from any rule with the action Start External Task, for example after a code is read or a place is approached.
5. Decide what to keep from the result. You can store a response data path in the player's state, and define success with a condition in the form Key Path – Operator – Value.
6. Continue the plot from the task's completion, using conditions on the returned data, e.g. score is greater or equal 3.

What the Developer Needs to Know

When the app loads, Rollick gives it window.rollick.input, containing gameId, instanceId, userId, userEmail, playerName plus your extra parameters. The app sends its result back as a JSON object through window.rollick.onComplete(…). Up to 4 KB of it is stored.

// Inside the WebAR page
const { playerName } = window.rollick.input;
showIntro(`Find the hidden relic, ${playerName}!`);
 
function onRelicFound(relic) {
  // Hands the result back to Rollick
  window.rollick.onComplete({ found: true, relic: relic.id, score: 3 });
}

In the in-game browser, window.rollick is available before the page's own scripts run. Video can play inline without a tap, and anything the page writes to the console appears in the app's logs, which helps when debugging on a device. Check camera access on both iOS and Android early.

Field-Test Checklist

• Print the target at exactly the width you entered in the Studio.
• Test on site, in the real light, from where players will actually stand.
• Try an older phone. Recognition is slower on older devices.
• Time the "Preparing AR assets" wait on mobile data, and trim media if it drags.
• Play both branches, conditions met and not met, with a test player.
• Scan twice. Make sure the second scan does what you intend.
• Put a QR or typed code beside important targets, with a rule that does the same thing, for players whose phones can't run AR.

Quick Reference