Scan the code above to see how this project looks when completed.
In this tutorial, you are going to learn how to add a prompt that we will show to the end user when the target image is no longer in view of the phone camera. This is a common technique used in AR experiences, as often the end user will need to be taught to hold their phone in the right position. We are going to use a templated sub-symbol, although feel free to build a new one for your own projects.
This tutorial will build on the football mini-game that we created in previous tutorials. You can find links to those tutorials here:
To get started, download the project files in this folder.
Prefer to look at the completed project, you can download it here.
1. Set up your project
Open up Studio. Unzip the project files folder and import the file named ‘football_with_opening_animation.zpp’ .
2. Import LookFor symbol
In the symbol definition panel in the bottom right of your screen, upload the project file ‘Look For2.zpp’.
3. Editing the LookFor Symbol
Double click on the look for symbol in the symbol definition panel. In the Controllers Panel, click into the Main > Active controller. You will see that currently we have an empty plane as our image. We want to make it so that our target image is the material of the plane. Upload the file ‘football-target.jpg’ to the media library. In the Hierarchy, click into target graphics > cover > cover node. In the Properties panel under Object, set the material to football-target.jpg. You should see that the target image appears in the graphic. Feel free to change the size and position of the image.
4. Creating an instance of the look for symbol
Return to the parent symbol. Drag an instance of the ‘Look For2’ symbol into the Hierarchy, positioned at the bottom.
5. Setting up your seen + notseen scripts
We are now going to show the prompt when the user has moved the phone so that the target image is no longer in the camera view. Right click on the target image node and create a notseen script. Rename it to ‘targetNotSeen’
We already have an existing seen script on the target image from the previous tutorial. Rename this targetSeen for consistency.
NOTE: At this point it would be a good idea to rename your opening transition content group to ‘OpeningSequence’.
6. The targetNotSeen script
Drag the LookFor 20 node into the top of the targetNotSeen script, inserting a local variable of it.
Next, drag the ‘Content’ group from the Hierarchy into the targetNotSeen script, inserting a local variable of it.
We want to make it so that the game content disappears when not in view. Do this by calling:
Content.visible(false);
within the parent.on function
We also want to activate the look for prompt. Do this by calling:
Look_For20.nodes.code.activate();
within the parent.on function underneath the content visible.
Your targetNotSeen script should read like this:
7. TargetSeen script
Drag the ‘Look_For20’ node into the top of the targetSeen script, inserting a local variable of it.
Next, drag the ‘Content’ group from the Hierarchy into the targetSeen script, inserting a local variable of it.
We want to deactivate the Look_For20 prompt when the target image is in view. To do so, within the parent.on function add:
Look_For20.nodes.code.deactivate();
We also want to make the experience content visible again. Do this by adding:
content.visible(true);
The opening animation was already being called to play within the function, so your targetSeen script should now look like this:
8. Preview and scan
Your look for prompt should now appear correctly in your experience. Preview the code to try it out. Print out the target image for the best experience.
Let us know in the comments if you have any questions or if you manage to complete the project 