Tutorial System

Overview

The Tutorial Manager script controls the following three parts:

• Instruction
• Status
• Tutorial panel

Instruction

The instruction is the text floating on the top of the screen. It will stay there until the user completes the action. Use ShowInstruction() and ClearInstruction() to display and clear the instruction text.

Status

The status is the text floating at the bottom of the screen. As its name suggests, it is supposed to trigger when a state changes -- when the user clicks on a button, switches to a new visualization, etc. It will show up for a short time, and will be cleared after that. Use ShowStatus() to display the status text.

Tutorial Panel

The tutorial panel is a physical panel and will be invoked when something important needs to be addressed -- showing the user how to navigate around, explaining what each visualization means, etc. If the user is familiar with the app and wishes to skip the tutorials, she can toggle the tutorials in the settings panel.

There will be a title and some text on the tutorial panel. They will be passed in the system via the Tutorial Param.

To display a tutorial, use ShowTutorial(). It accepts a TutorialParam, a Transform to indicate its location, an optional Func<bool> as a condition, an optional callback to be called before the tutorial is shown, and an optional callback to be called after the tutorial is shown. If a condition is provided, the the tutorial will stay whenever the function returns false. A typical use case is when the user is selecting an avatar. The condition provided will return true after an avatar is selected, and thus the tutorial will disappear. If no condition is provided, then the tutorial will wait 5 seconds before it disappears.

Because the user is free to move around the scene, it might be hard to notice where the tutorial is. This is when CheckTutorialVisibility() comes in. Some linear algebra is done to determine if the tutorial is on the left or right of the camera if the panel is invisible. It will then display a little icon to the side of the screen to indicate its position. This is not perfect, and will break with some extreme camera positions (like pointing upwards). However, it should work fine in conventional use cases.