Target Events
1. Introduction
Download the completed project.
In this tutorial we're going to look at Target Events, the events fired when a target image enters and leaves a device's camera view.
In this completed example you can see a 3D model of Zapbot, appearing and disappearing from view when the target image enters and leaves the camera view.
In a previous tutorial we looked at tracking images. This tutorial will build on that completed project, so make sure you've watched it if you haven't already.
2. Target Events
In the project we already have a 3D model tracking from a target image that we trained.
A target can fire one of two events, seen and notseen:
the
seenevent is fired when the target appears in the camera view,and the
notseenevent is fired when the target leaves the camera view.
These events are great for triggering animations or on-screen instructions when the user points the device away from a target image.
3. Target event handler functions
We can create handler functions for both events by right-clicking our target node in the Hierarchy, selecting 'New > Script' and then the 'seen' and 'notseen' events respectively.
This will give us two script nodes below the target, one for each handler event. Any code placed within these handler functions will be called when the events are fired.
4. Simple animation states
We can create two simple animations to play when these events are fired using states.
To start we create a new controller from the Controllers panel, let's call it 'target', and then create two states within the controller, let's call them 'targetSeen' and 'targetNotseen'. We've named these states to match with the target events as we will activate them from their respective event handler functions.
5. Adding controller properties
For this simple example we're going to shrink our Zapbot model when the target is not seen in the camera view, and then enlarge it back to normal when the target is seen.
To do this we start by selecting the target controller and adding the visible, enabled and scale properties of our 3D model node as these are the properties we want to change.
6. Setting Controller properties
The 'targetSeen' state can remain as it is because our model is already displayed correctly.
For the 'targetNotSeen' state we want to set Zapbot's visible property to false, enabled property to false, and scale to 0,0,0. As we want to see the animation of Zapbot shrinking we also want to pin the visible property change to the end of the overall transition.
By clicking between the two states we can see Zapbot shrinking and enlarging.
7. Activating states & previewing
Heading back to our seen and not seen event handlers we can drag in the relevant states and call activate().
If we now preview the project we can see this happen when the target enters and leaves the camera view.
8. Adding a camera group
A more advanced animation would be to have Zapbot jump from the target to the screen when the target is no longer seen. This allows the content to remain visible even when the target is not in view.
To start we add a new group from the root node of the Hierarchy, naming it 'cameraGroup' and then setting that group relativeTo Z.camera.
9. Setting Zapbot's relativeTo property
As we want Zapbot to transition between the target and the camera group, we select the Zapbot node in the Hierarchy and add both the tracking image and camera group to the relativeTo property. We can also set the relativeToProp value to be [1,0] as we want it to remain relative to the target which is the first value.
10. Advanced animation states
Creating another controller ('targetAdvanced') and two states ('targetRelative' and 'screenRelative'), we then add the relativeToProp property as this is the value we will be changing.
Like before the 'targetRelative' state can remain as it is, as Zapbot should be realtive to the target when the target is seen.
For the 'screenRelative' state we change the relativeToProp value to [0,1] so that Zapbot becomes relative to the screen when the target is no longer seen.
11. Activating advanced states & previewing
Again we return to the seen and notseen event handlers, comment out our previous states and drag in our new ones to activate them.
The camera group may need to be repositioned in order to get the Zapbot model in the desired position but once we're happy with it, we can preview the experience on a device and watch Zapbot jump from the target to the screen and back again.
12. Next steps
Download the completed project.
This project could be expanded upon by using timelines to create more complex animations for both examples, or even animating Zapbot to roll off and on screen. For more information on timelines please check out our timelines tutorial video.
This completes our video on target events, we hope this tutorial was helpful and urge you to take a look at the Tracking Images and Controllers and States articles in the Getting Started section, as well as our reference materials.
If you have any issues feel free to get in touch, we're support@zappar.com.