We will assume you have the project built from the previous chapter, Chapter 6, How to Change a Flat Tire. If not, you can download it with the files provided with this book. That will be the starting point for this chapter.

The initial scene Hierarchy should look like this:

We have a Main Canvas that contains a Nav Panel and Content panel (within a Scroll View Viewport). The Nav Panel has buttons for next and previous steps through the instructions data. The Content panel has elements for title, body text, image, and video content. The Game Controller has an InstructionsController component that manages the state of the application. In the Assets/HowToChangeATire/Scripts/ folder, we have our InstructionModel and InstructionStep classes. The following screenshot shows the Project window with the project Scripts files:

And in the UIElements/ folder, we have scripts for each content type, as shown in the following screenshot:

Let's begin by setting up the Unity project for AR with the Vuforia toolkit. This may be familiar to you by now, so we'll go through the steps quickly. If you require more detail, please refer to the relevant sections in Chapters 2, Setting Up Your System and Chapter 3, Building Your App:

1. Choose Assets | Import Package | Custom Package... to import vuforia-unity-xxxx.
2. Choose Assets | Import Package | Custom Package... to import VuforiaSamples-xxxx.
3. Browse to the Vuforia Dev Portal (https://developer.vuforia.com/targetmanager/licenseManager/licenseListing) and choose or create a license key. Copy the license key to your clipboard.
4. Back in Unity, choose main menu Vuforia | Configuration, and paste it into App License Key.

​Now we will modify the scene as needed for AR. You may choose to do a File | Save Scene As so the AR one is separate from the non-AR. We will call our scene Main-AR (in your HowToChangeATire/Scenes/ folder). It would be a good idea to now go into File | Build Settings... and make this scene the only Scenes to Build for the next time you build for your mobile device.

Then:

1. Delete the Main Camera object from the Hierarchy.
2. Locate the ARCamera prefab in the Project Assets/Vuforia/Prefabs folder, select, and drag it into the Hierarchy list.
3. Use Add Component to add the Camera Settings component to ARCamera.
4. Save the scene and save the project.

Although we replaced the camera, the app should still work as it did with the default camera. Press Play and verify.

One more thing to make sure things are set up OK. If you disable the content panel you should see the camera video feed instead.

5. In Hierarchy, disable the Main Canvas' Content Scroll View object (by un-checking its enabled checkbox in the upper left of Inspector).

Press Play. You should see the video feed in the UI, such as the following view of a wall in my room:

Good. Now re-enable the Content Scroll View and we can get started.