A custom UI element that displays progress as a partially filled circular ring with a percentage label. The element renders two concentric circles: a background track and a progress indicator that fills clockwise based on the progress value. More...
Public Member Functions | |
| RadialProgress () | |
| Initializes a new instance of the RadialProgress element, setting up the UI structure and callbacks. Creates the internal label, initializes the mesh objects, and registers necessary event 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 indicator and the percentage label. | |
Private Member Functions | |
| void | DrawMeshes (MeshGenerationContext context) |
| Generates and renders the track and progress meshes based on the current element size and progress value. Creates the circular geometry for both the background track and the progress indicator, with the progress mesh showing only a partial circle based on the progress percentage. | |
| void | UpdateCustomStyles () |
| Processes resolved custom CSS properties and applies them to the mesh colors. Retrieves the track and progress colors from custom CSS properties and updates the corresponding meshes. | |
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 RadialProgress instance. | |
| static void | GenerateVisualContent (MeshGenerationContext context) |
| Static callback method for the generateVisualContent event that delegates to the DrawMeshes method. Extracts the RadialProgress element from the mesh generation context and calls its DrawMeshes method. | |
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. | |
| EllipseMesh | m_ProgressMesh |
| The mesh used to render the progress indicator portion of the circle. | |
| EllipseMesh | m_TrackMesh |
| The mesh used to render the background track circle. | |
Static Private Attributes | |
| const int | k_NumSteps = 200 |
| The number of angular steps used to approximate the circular shape. | |
| static CustomStyleProperty< Color > | s_ProgressColor = new CustomStyleProperty<Color>("--progress-color") |
| Custom CSS property definition for the progress indicator 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 ring with a percentage label. The element renders two concentric circles: a background track and a progress indicator that fills clockwise based on the progress value.
This element uses custom mesh generation to create smooth circular progress visualization. The progress is displayed both visually through the filled portion of the circle and textually via a centered label. The element supports custom CSS properties for styling the track and progress colors. The circular approximation uses 200 steps for smooth rendering, and the border thickness is fixed at 10 units.
Constructor & Destructor Documentation
◆ RadialProgress()
| GWG.UsoUIElements.CustomElements.RadialProgress.RadialProgress | ( | ) |
Initializes a new instance of the RadialProgress element, setting up the UI structure and callbacks. Creates the internal label, initializes the mesh objects, and registers necessary event callbacks for styling and rendering.
This constructor creates all internal components including the percentage label and both track and progress meshes. It registers callbacks for custom style resolution and visual content generation, ensuring the element responds to CSS changes and renders correctly. The initial progress is set to 0%, and all necessary USS class names are applied. The meshes are configured to use k_NumSteps for smooth circular approximation.
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 RadialProgress 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 RadialProgress element from the event and calls UpdateCustomStyles.
◆ DrawMeshes()
|
private |
Generates and renders the track and progress meshes based on the current element size and progress value. Creates the circular geometry for both the background track and the progress indicator, with the progress mesh showing only a partial circle based on the progress percentage.
- Parameters
-
context The mesh generation context that provides methods for allocating and setting mesh data.
This method calculates the element's dimensions and configures both meshes with appropriate sizes and border thickness (10 units). The track mesh is rendered as a complete circle, while the progress mesh uses only a subset of indices to create a partial fill effect. The progress visualization starts from the top and fills clockwise. The method handles cases where the element is too small to render and ensures that progress values are properly clamped between 0 and 100. Index slicing is used to achieve the partial fill effect by calculating how many triangular segments to render based on the progress percentage.
◆ GenerateVisualContent()
|
staticprivate |
Static callback method for the generateVisualContent event that delegates to the DrawMeshes method. Extracts the RadialProgress element from the mesh generation context and calls its DrawMeshes method.
- Parameters
-
context The mesh generation context provided by Unity's UI system for rendering custom visual content.
This method serves as the entry point for custom mesh generation during the UI rendering pipeline. It acts as a bridge between Unity's static callback system and the instance-based DrawMeshes implementation.
◆ UpdateCustomStyles()
|
private |
Processes resolved custom CSS properties and applies them to the mesh colors. Retrieves the track and progress colors from custom CSS properties and updates the corresponding meshes.
This method is called after custom CSS properties are resolved and applies the "--track-color" and "--progress-color" properties to their respective meshes. If either mesh becomes dirty due to color changes, the element is marked for repainting to ensure the visual changes are applied. The method safely handles cases where custom properties are not defined by using TryGetValue.
Member Data Documentation
◆ k_NumSteps
|
staticprivate |
The number of angular steps used to approximate the circular shape.
This constant determines the smoothness of the circular approximation. Higher values create smoother circles but require more vertices and triangles. 200 steps provides a good balance between visual quality and performance.
◆ 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.
◆ 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 should be between 0 and 100 representing the percentage of completion.
◆ m_ProgressMesh
|
private |
The mesh used to render the progress indicator portion of the circle.
This mesh uses a subset of indices to render only the filled portion of the circle based on the current progress value. The number of rendered triangles corresponds directly to the progress percentage.
◆ m_TrackMesh
|
private |
The mesh used to render the background track circle.
This mesh represents the full circular background that shows the complete progress range. It is rendered behind the progress mesh to provide visual context for the progress indicator.
◆ s_ProgressColor
|
staticprivate |
Custom CSS property definition for the progress indicator color.
This property allows CSS stylesheets to specify the color of the progress fill using the "--progress-color" property. The progress color is used for the portion of the circle that indicates completed progress.
◆ 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.
◆ 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.
◆ 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.
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 indicator and the percentage label.
A float value representing the progress percentage. Values outside the 0-100 range are clamped when displayed.
This property is exposed to UXML through the UxmlAttribute, allowing it to be set in UI layout files. When set, the property updates the label text with the rounded, clamped percentage and triggers a visual repaint. The visual progress indicator will fill clockwise from the top position based on this percentage.
