A custom UI element that displays progress as a partially filled circular arc with a percentage label using Unity's Vector API for rendering. This element provides an alternative implementation to RadialProgress that uses the painter2D API instead of custom mesh generation for simpler rendering. More...
Public Member Functions | |
| RadialProgressVectorApi () | |
| Initializes a new instance of the RadialProgressVectorApi element, setting up the UI structure and event callbacks. Creates the internal percentage label, applies CSS classes, and registers callbacks for styling and rendering. | |
Static Public Attributes | |
| static readonly string | ussClassName = "radial-progress" |
| The primary USS class name for the radial progress control. | |
| static readonly string | ussLabelClassName = "radial-progress__label" |
| The USS class name specifically for the percentage label within the radial progress control. | |
Properties | |
| float | progress [get, set] |
| Gets or sets the progress value as a percentage between 0 and 100. Setting this value updates both the visual progress arc and the percentage label display. | |
Private Member Functions | |
| void | GenerateVisualContent (MeshGenerationContext context) |
| Generates the visual content for the radial progress element using Unity's Vector API (painter2D). Draws both the background track circle and the progress arc based on the current progress value. | |
| void | UpdateCustomStyles () |
| Processes resolved custom CSS properties and applies them to the track and progress colors. Retrieves color values from custom CSS properties and triggers repainting if any colors have changed. | |
Static Private Member Functions | |
| static void | CustomStylesResolved (CustomStyleResolvedEvent evt) |
| Static callback method invoked when custom CSS properties are resolved for this element. Triggers the UpdateCustomStyles method on the appropriate RadialProgressVectorApi instance. | |
Private Attributes | |
| Label | m_Label |
| The label that displays the progress percentage as text in the center of the circle. | |
| float | m_Progress |
| The internal progress value stored as a float. | |
| Color | m_ProgressColor = Color.red |
| The color used for rendering the progress arc. | |
| Color | m_TrackColor = Color.gray |
| The color used for rendering the background track circle. | |
Static Private Attributes | |
| static CustomStyleProperty< Color > | s_ProgressColor = new CustomStyleProperty<Color>("--progress-color") |
| Custom CSS property definition for the progress arc color. | |
| static CustomStyleProperty< Color > | s_TrackColor = new CustomStyleProperty<Color>("--track-color") |
| Custom CSS property definition for the background track color. | |
Detailed Description
A custom UI element that displays progress as a partially filled circular arc with a percentage label using Unity's Vector API for rendering. This element provides an alternative implementation to RadialProgress that uses the painter2D API instead of custom mesh generation for simpler rendering.
This element renders progress as a stroked circular arc that fills clockwise from the top position based on the progress value. Unlike the mesh-based RadialProgress, this implementation uses Unity's Vector API (painter2D) for simpler drawing operations. The element consists of two rendered components: a background track circle and a progress arc that represents the completed portion. The progress is displayed both visually through the filled arc and textually via a centered percentage label. The element supports custom CSS properties for styling the track and progress colors with fallback defaults.
Constructor & Destructor Documentation
◆ RadialProgressVectorApi()
| GWG.UsoUIElements.CustomElements.RadialProgressVectorApi.RadialProgressVectorApi | ( | ) |
Initializes a new instance of the RadialProgressVectorApi element, setting up the UI structure and event callbacks. Creates the internal percentage label, applies CSS classes, and registers callbacks for styling and rendering.
This constructor creates the percentage label and adds it to the element hierarchy with appropriate styling classes. It registers callbacks for custom style resolution and visual content generation using the Vector API. The initial progress is set to 0%, and the element is configured to use painter2D for rendering operations. The constructor sets up default colors that can be overridden by custom CSS properties.
Member Function Documentation
◆ CustomStylesResolved()
|
staticprivate |
Static callback method invoked when custom CSS properties are resolved for this element. Triggers the UpdateCustomStyles method on the appropriate RadialProgressVectorApi instance.
- Parameters
-
evt The custom style resolved event containing information about the style changes.
This method serves as a bridge between the static callback registration and the instance method that handles the actual style updates. It extracts the RadialProgressVectorApi element from the event and calls UpdateCustomStyles.
◆ GenerateVisualContent()
|
private |
Generates the visual content for the radial progress element using Unity's Vector API (painter2D). Draws both the background track circle and the progress arc based on the current progress value.
- Parameters
-
context The mesh generation context that provides access to the painter2D API for vector-based drawing.
This method uses Unity's painter2D API to draw two circular elements: a complete background track and a partial progress arc. The track is drawn as a full 360-degree circle using the track color to provide visual context. The progress arc starts from -90 degrees (top of circle) and extends clockwise based on the progress percentage. Both elements use a fixed line width of 10.0f and butt line caps for clean stroke appearance. The circles are centered within the element's content rectangle and sized to fit the available space. This approach is simpler than mesh generation but may be less performant for complex scenarios.
◆ UpdateCustomStyles()
|
private |
Processes resolved custom CSS properties and applies them to the track and progress colors. Retrieves color values from custom CSS properties and triggers repainting if any colors have changed.
This method is called after custom CSS properties are resolved and applies the "--track-color" and "--progress-color" properties to their respective color fields. If either color property is successfully resolved from CSS, the element is marked for repainting to ensure the visual changes are applied immediately. The method safely handles cases where custom properties are not defined by using TryGetValue and maintaining fallback colors.
Member Data Documentation
◆ m_Label
|
private |
The label that displays the progress percentage as text in the center of the circle.
This label is automatically updated whenever the progress value changes and shows the rounded percentage value. The label uses the ussLabelClassName for styling purposes and is positioned at the center of the element.
◆ m_Progress
|
private |
The internal progress value stored as a float.
This field stores the actual progress value and is used by the progress property getter and setter. The value represents the percentage of completion and affects both the visual arc length and label text.
◆ m_ProgressColor
|
private |
The color used for rendering the progress arc.
This field stores the resolved progress color, either from custom CSS properties or the default red fallback. The color is applied to the arc that represents the completed portion of the progress.
◆ m_TrackColor
|
private |
The color used for rendering the background track circle.
This field stores the resolved track color, either from custom CSS properties or the default gray fallback. The color is applied to the full circular track that provides visual context for the progress indicator.
◆ s_ProgressColor
|
staticprivate |
Custom CSS property definition for the progress arc color.
This property allows CSS stylesheets to specify the color of the progress arc using the "--progress-color" property. The progress color is used for the arc portion that indicates completed progress. If not specified in CSS, the element falls back to the default red color.
◆ s_TrackColor
|
staticprivate |
Custom CSS property definition for the background track color.
This property allows CSS stylesheets to specify the color of the background circular track using the "--track-color" property. The track represents the full circle background that shows the total progress range. If not specified in CSS, the element falls back to the default gray color.
◆ ussClassName
|
static |
The primary USS class name for the radial progress control.
This class name is applied to the root element and should be used in stylesheets to target the overall control styling. Shared with the RadialProgress element for consistent styling across different implementations.
◆ ussLabelClassName
|
static |
The USS class name specifically for the percentage label within the radial progress control.
This class name is applied to the internal label element and can be used to style the percentage text display. Shared with the RadialProgress element for consistent label styling across different implementations.
Property Documentation
◆ progress
|
getset |
Gets or sets the progress value as a percentage between 0 and 100. Setting this value updates both the visual progress arc and the percentage label display.
A float value representing the progress percentage. Values outside the 0-100 range are clamped when displayed in the label.
This property is exposed to UXML through the UxmlAttribute, allowing it to be set in UI layout files with the "progress" attribute. When set, the property updates the label text with the rounded, clamped percentage and triggers a visual repaint. The visual progress arc will extend clockwise from the top position based on this percentage value. The arc length is calculated as a fraction of the full 360-degree circle corresponding to the progress percentage.
