We provided the prefab annotation graphics to you (in the ChangeATire-ARGraphics.unitypackage). We should take a quick look at how they were created.
The general idea was to provide graphics that somewhat mimic the annotations used in the video graphics for the original How To Change A Tire article on the wikiHow site (http://www.wikihow.com/Change-a-Tire).
One approach is to create a new scene in our Unity project that will be used to compose the graphics:
- From the main menu, select File | New Scene.
- Then File | Save Scene As; name it Composition.
- In Hierarchy, Create Empty, and name it Compose.
- Ensure its Transform is reset.
We will create a canvas with the circle on it, like the one we used in the actual scene. But this one will be in World Space, and will have to be scaled for world space coordinates.
- With Compose selected, create UI | Canvas.
- Set its Render Mode to World Space.
- As we did in Chapter 6, How to Change a Flat Tire, set its Width and Height to 480, 800.
- Set Rotation to 90, 0, 0, so it's flat on a top-down view, like in AR.
- Set Scale to 0.00135, 0.00135, 0.00135.
The seemingly magic numbers for the scale are to set the 480 x 800 canvas in world space. We don't want it 480 meters wide!
On the canvas, we can show the circle:
- With Canvas selected, create UI | Image.
- For Source Image, use the doughnut icon to select circle.
- In Rect Transform, set Width and Height to 400, 400 as we did in the main scene.
Now the scene view has a world space composition area we can use for making the AR graphic, shown as follows, with the step6-AR prefab also added to Compose:
For even more accurate rendition and registration of the graphics, you could add a backdrop image similar to what you expect the user to capture. Or, use Vuforia's built-in User Defined Target default image, as follows:
- With Compose selected, create 3D | Quad and name it UDT.
- Set Rotation to 90, 0, 0 to align with the other world space objects.
- Find the Vuforia UserDefinedTarget material (in Assets/Vuforia/Materials/) and drag it to the UDT.
Your Scene view now looks like this when composed against the UDT image:
Now that we have a composition layout area, we can work on the graphics.
To review an existing graphic, drag one of the prefabs into the hierarchy.
This graphic has an animation on it. When you press Play, you can also preview the animated graphic.
If you modified the prefab and want to save your changes, select Apply in its Inspector. The following screenshot is included to indicate where you can find the Apply button:
Some of the graphics use Unity's built-in 3D primitive objects. The step1-ar, for example, is made of three cubes, as shown here in a perspective view:
Noting that the number of the annotations requires a stylized arrow graphic, we found something that works on the Pixabay image sharing site (https://pixabay.com/).
For example, the animated graphic for step six shows a green arrow rotating counter-clockwise to indicate the direction for loosening the lug nuts on the tire. The following explanation is just a walkthrough of the existing step6-AR graphic and animation; you are not expected to make any changes.
The arrow graphic used is named curved_arrow (located in Assets/ARGraphics/Graphics/curved_arrow.png). This was imported into Unity as a Sprite texture, as shown in the following screenshot:
The step6-AR has a CurvedArrow that includes the curved arrow sprite image and a CurvedArrow2D Animator Controller. You can inspect it on your own, as follows:
We went into detail in Chapter 4, Augmented Business Cards, about using the animation editor for making animation clips in Unity. It is driven by an Animator graph with a single animation clip. Both the Animator and Animation windows are shown in the following screenshot:
When done, we saved each of our graphics as prefabs to the ARGraphics/Resources/ folder. And then we exported the whole ARGraphics/ folder as a Unity package, using main menu Assets | Export...
Before continuing with the project, save this scene and then reload the Main-AR scene.