Advanced: Creating Visual Prefab

Creating custom visuals from scratch.

Create a GameObject on UI layer and add a pointer image to it.
Add UIPointerGraphAnimation component to the main GameObject.
In Settings field, assign settings. Create new ones via Create > Tutorial System > Pointer Graphic Settings. For full animation control, use UIPointerNone settings.
Optionally add a text element and assign it to Text Element field to display step text.
Add all pointer's images to Images To Lerp list for automatic raycast disable and fade animations possible.
For mouse-style pointers, add mouse parts to corresponding fields for animation.
Make it a prefab by dragging to your folder. You can now assign this prefab to the Pointer Prefab and Hover Prefab fields in the tutorial step.

Create a GameObject on UI layer and add required graphics to it - main composition, popup window, animations, etc.
Add UIGraphicAnimation component to the main GameObject.
In Settings field, assign settings. Create new ones via Create > Tutorial System > Graphic Settings. For full animation control, use UI Graphics None settings.
Optionally set Background color for graphics background dimming.
Choose positioning relative to canvas or use current anchors.
Optionally add text element and assign it to Text Element field to display step text.
Add all graphic's images to Images To Lerp list for automatic raycast disable and fade animations.
In Confirm Button field, assign a button that requires pressing before completing the step. Important: button click must trigger InitializeByConfirm method in UIGraphicAnimation.
In Gesture Graphic field, assign swipe animation object to reflect swipe direction without duplicating graphics.
Make it a prefab by dragging to your folder. You can now assign this prefab to the Graphic Prefab fields in the tutorial step.

Create a GameObject in world coordinates and add a pointer sprite/mesh to it.
Add WorldPointerAnimation component to the main GameObject.
In Settings field, assign settings. Create new ones via Create > Tutorial System > World Pointer Settings. For full animation control, use WorldPointerNone settings.
Optionally add a world text element and assign it to Text Element field to display step text.
Add all pointer's sprites to Sprites To Lerp list and all pointer`s meshes to Meshes To Lerp list for automatic raycast disable and fade animations possible.
For Frame-style pointers, add a Frame Corner Prefab of upper left corner.
Make it a prefab by dragging to your folder. You can now assign this prefab to the World Pointer Prefab and World Hover Prefab fields in the tutorial step.

Create a GameObject in world coordinates and add required graphics to it.
Add WorldGraphicAnimation component to the main GameObject.
In Settings field, assign settings. Create new ones via Create > Tutorial System > World Graphic Settings. For full animation control, use UI Graphics None settings. Choose positioning relative to Camera or use current position.
Optionally add text element and assign it to Text Element field to display step text.
Add all pointer's sprites to Sprites To Lerp list and all pointer`s meshes to Meshes To Lerp list for automatic raycast disable and fade animations possible.
Make it a prefab by dragging to your folder. You can now assign this prefab to the World Graphic Prefab fields in the tutorial step.

Last updated 15 days ago