Including the instructions panel in AR

Our How To Change A Tire app seems completely done. But in user testing, we found that users didn't like having to toggle back and forth between AR Mode and non-AR 2D mode to see the text instructions. We have decided to show the 2D instruction panel in world space also while in AR. Let's name it AR Canvas and scale and position it in the scene as follows:

  1. In Hierarchy root, Create | UI | Canvas and name it AR Canvas.
  2. Set its Render Mode to World Space.
  3. Set Width and Height to 100, 100.
  4. Rotation: 90, 0, 0, so it's flat on a top-down view, like in AR.
  5. Scale from pixel layout space to world space; we like 0.004, 0.004, 0.004 (or try other values, such as 0.001).
  6. Position it a bit out of the way, at Pos X, Pos Y, Pos Z: 0.0, 0.0, 0.1.
  7. Dynamic Pixels Per Unit: 2 to make the text a little crisper.

Now, we want to show basically the same content panel that we already built in the Main Canvas. The easiest thing to do is duplicate it and move the copy into the AR Canvas.

  1. In Hierarchy, in Main Canvas / Content Scroll View / Viewport / select the Content object.
  2. Duplicate it (right-click Duplicate).
  3. Drag that copy into AR Canvas, as a child.
  4. Rename it AR Content.

We just moved it from a screen space canvas to a world space one. We need to clean up its Rect Transform:

  • Scale: 0.2, 0.2, 0.2 (or try other values, such as 1.0)
  • Rotation: 0, 0, 0
  • Anchor Presets: Bottom/Stretch, and then Alt+click to position it
  • And the parameters, Left: -218.5, Pos Y: 56, Pos Z: 0

These numbers work for me. You can tweak them as needed.

Now, when you press Play and go into AR Mode after you've captured a target, the AR content will display as registered with the tire, and the instructions panel will also show in the scene, as shown in the following screenshot. It even includes any images or video!

When you toggle back to 2D view, the screen space instructions are viewed. When toggling again to AR Mode, the instructions panel is still shown, but in world space. When you go to a next or previous step, both the 2D and world space panel content gets updated simultaneously.

At this point you may really appreciate our UI Element design, where we made each content type's InstructionUpdate a registered event. We didn't have to do any extra coding to ensure that the duplicated UI elements were updated with the text and media data. It happened automatically, because the updated events are broadcast to everyone that is listening.

Congratulations! This completes our project.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset