Supported Visuals (UI)
To show 🍐
Last updated
To show 🍐
Last updated
Here, the types and capabilities of the supported visuals are described. To explore the specific prefabs for use, see Visual Prefabs.
In the ATM system, visual tips include: UI Pointers, UI Graphics, World Pointers, World Graphics. A tutorial step can display all or only some of them. Different visuals do not conflict with each other. All pointers can target to both UI targets and objects in world coordinates. Hovers are identical to pointers, but are primarily used to highlight only final target object.
Visual prefabs can be created by merging elements. However, the basic behavior of a visual is determined by its basic type.
Dynamic
Static
Is positioned relative to target objects in the scene (indicating what to interact with)
Placed somewhere on the canvas independently
Typically, this would be an arrow, a pointing hand, a mouse, or a crosshair
Typically, this would be text, an animated UI image, a popup window, or a slide
If you add graphics to this, you get a moving pointer with an attached label, for example
If you add a pointer to this, it would simply be illustrative material attached to an area
UIPointerGraphAnimation (UI Pointer)
A component that controls the behavior of each UI pointer. Not intended for manual editing. It should be attached to every prefab that acts as a UI pointer. It implements the logic for appearance, movement to the target, animation, and disappearance of this visual tip. For example, to create your own custom pointer, you create a UI Image, turn it into a prefab, and then add this component to it. Contains public fields in inspector to interact with:
Settings scriptable object (required). The Pointer animations are controlled using it. If not assigned, settings without animations will be used.
Text Element (optional). Used to display a text hint and animate it.
Images To lerp list (optional). All images inside the prefab that require color lerp should be added here.
Mouse Parts (optional). Used to animate individual parts of the pointer mouse.
If the default pointer animations don’t suit you, set UIPointerNone and add your custom animation component to the prefab.
PointerSettings (UI Pointer)
A component that allows to create scriptable objects with settings for UI pointer animations. Not intended for manual editing. It is assigned to each UI pointer prefab. For example, if the settings specify the appearance type as "Slide" the pointer will appear with a sliding animation. Contains fields to interact with:
Use Pivots. If True, then when directing the pointer, it will look for the pivot set for the object, and not its actual center.
Movement Settings. Speeds and delays for the pointer's movement between target objects are set here.
Appearance Settings, Slide Animation. Here, types for the pointer's appearance and disappearance, their speed, and special positions for the "Slide" type are assigned.
Idle Animation settings. Speeds and delays for different types of idle animations are adjusted here.
Screen Edge Settings. Here, values are set to adjust the pointer if it`s target goes beyond the screen boundaries.
UIGraphicAnimation (UI Graphics)
A script that controls the behavior of each UI graphic element. Not intended for manual editing. It should be attached to every prefab that acts as a UI graphics. The script implements the logic for the appearance, animation, and disappearance of this tip. For example, to create your own custom graphics, you create a GameObject, add your animations, text there, turn it into a prefab, and then add this component to it. The animations are controlled using Graphic Settings. Contains public fields in inspector to interact with:
Settings scriptable object (required). The Graphic animations are controlled using it. If not assigned, settings without animations will be used.
Background Color (optional). If it is not transparent, a background of this color will be created for the step with this graphic element (without raycast target).
Positioning. Allows attaching graphics to a specified corner of the canvas or using its current anchors.
Text Element (optional). Used to display a text hint and animate it.
Images To lerp list (optional). All images inside the prefab that require color lerp should be added here.
Confirm Button (optional). If is present, the step will not be completed until the player presses the confirmation button and meets the step's condition. This is a way to prevent misclicks.
Swipe Part to Rotate (optional). Here, an object with a swipe animation is assigned. The script automatically rotates and mirrors it based on the swipe type, eliminating the need for multiple separate graphics. By default, a right swipe is expected.
If the default graphic animations don’t suit you, set UIGraphicNone and add your custom animation component to the prefab.
GraphicSettings (UI Graphics)
A script that contains basic settings for UI graphic animations and allows the creation of scriptable objects with pre-configured setups. Not intended for manual editing. It is assigned to each UI graphics prefab. For example, if the settings specify the appearance type as "Slide" the graphic will appear with a sliding animation. Contains fields to interact with:
Appearance Settings, Slide Animation. Here, types for the pointer's appearance and disappearance, their speed, and special positions for the "Slide" type are assigned.
Idle Animation settings. Speeds and delays for different types of idle animations are adjusted here.
