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 then be cleared. 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.

A special note on the callbacks: To maintain code clarity, please only put tutorial-related functions in the two callbacks. The tutorials should not guide the app flow. You can use the pre-callback to set up condition variables, or use the post-callback to form a tutorial chain. However, if you remove the ShowTutorial() calls completely, the app should still be fully functional, with the normal state transitions.

Because the user is free to move around the scene, it might be hard to notice where the tutorial is. Therefore, the method would accept an additional TutorialRemindMode parameter. This is to specify what action needs to be taken if the tutorial is out of sight. Icon will show a tutorial icon at the edge of the screen, pointing towards the direction of the tutorial. Follow will cause the tutorial to gradually fly into view when the panel gets out of sight.

There is also a "pop" mode toggle. When the user discovers something that is outside the main tutorial flow, we want to enable this mode to tempoaraily block all ongoing tutorials, and show the tutorials related to this new discovery. After the user finishes the tutorials, we will then turn pop mode off and resume the regular tutorials.