Add alpha support for circular progress colors

Introduces `barAlpha`, `trackAlpha`, and `centerAlpha` options to CircularProgress, allowing control over the alpha (opacity) of bar, track, and center colors. Updates documentation, type definitions, and rendering logic to support these new properties.

Author: rexrainbow

docs/docs/shape-circularprogress.md

@@ -96,9 +96,13 @@ var game = new Phaser.Game(config);
 ### Create instance
 
 ```javascript
-var circularProgress = scene.add.rexCircularProgress(x, y, radius, barColor, value, {    
+var circularProgress = scene.add.rexCircularProgress(x, y, radius, barColor, value, {
+    barAlpha: 1,
     trackColor: undefined,
+    trackAlpha: 1,
     centerColor: undefined,
+    centerAlpha: 1,
+
     thickness: 0.2,
     startAngle: Phaser.Math.DegToRad(270),
     anticlockwise: false,
@@ -122,8 +126,12 @@ var circularProgress = scene.add.rexCircularProgress({
     radius: 1,
 
     barColor: undefined,
+    barAlpha: 1,
     trackColor: undefined,
+    trackAlpha: 1,
     centerColor: undefined,
+    centerAlpha: 1,
+
     thickness: 0.2,
     startAngle: Phaser.Math.DegToRad(270),
     anticlockwise: false,
@@ -141,9 +149,9 @@ var circularProgress = scene.add.rexCircularProgress({
 
 - `x`, `y` : Position of this object.
 - `radius` : Radius of this circle. Size will be `(radius*2, radius*2)`.
-- `barColor` : Color of circular bar, in number or css string value.
-- `trackColor` : Color of circular track, in number or css string value.
-- `centerColor` : Color of center circle, in number or css string value.
+- `barColor`, `barAlpha` : Color/alpha of circular bar, in number or css string value.
+- `trackColor`, `trackAlpha` : Color/alpha of circular track, in number or css string value.
+- `centerColor`, `centerAlpha` : Color/alpha of center circle, in number or css string value.
 - `thickness` : `0` ~ `1`, thickness of circular bar. Default value is `0.2` (`0.2*radius`)
 - `startAngle` : Start angle of circular bar, in radians. Default value is 270 degrees.
 - `anticlockwise` : Set `true` to put anticlockwise circular bar. Default value is `false`.

plugins/gameobjects/shape/circularprogress/CircularProgress.d.ts

@@ -16,8 +16,11 @@ declare namespace CircularProgress {
         radius?: number,
 
         barColor?: string | number,
+        barAlpha?: number,
         trackColor?: string | number,
+        trackAlpha?: number,
         centerColor?: string | number,
+        centerAlpha?: number,
         thickness?: number,
         startAngle?: number,
         anticlockwise?: boolean,

plugins/gameobjects/shape/circularprogress/CircularProgress.js

@@ -10,6 +10,9 @@ const DefaultStartAngle = Phaser.Math.DegToRad(270);
 
 class CircularProgress extends ProgressBase(BaseShapes) {
     constructor(scene, x, y, radius, barColor, value, config) {
+        var barAlpha;
+        var trackColor, trackAlpha;
+        var centerColor, centerAlpha;
         if (IsPlainObject(x)) {
             config = x;
             x = GetValue(config, 'x', 0);
@@ -19,6 +22,12 @@ class CircularProgress extends ProgressBase(BaseShapes) {
             value = GetValue(config, 'value', 0);
         }
 
+        barAlpha = GetValue(config, 'barAlpha', 1);
+        trackColor = GetValue(config, 'trackColor', undefined);
+        trackAlpha = GetValue(config, 'trackAlpha', 1);
+        centerColor = GetValue(config, 'centerColor', undefined);
+        centerAlpha = GetValue(config, 'centerAlpha', 1);
+
         if (radius === undefined) { radius = 1; }
 
         var width = radius * 2;
@@ -28,9 +37,9 @@ class CircularProgress extends ProgressBase(BaseShapes) {
         this.bootProgressBase(config);
 
         this.setRadius(radius);
-        this.setTrackColor(GetValue(config, 'trackColor', undefined));
-        this.setBarColor(barColor);
-        this.setCenterColor(GetValue(config, 'centerColor', undefined));
+        this.setTrackColor(trackColor, trackAlpha);
+        this.setBarColor(barColor, barAlpha);
+        this.setCenterColor(centerColor, centerAlpha);
 
         this.setThickness(GetValue(config, 'thickness', 0.2));
         this.setStartAngle(GetValue(config, 'startAngle', DefaultStartAngle));
@@ -79,8 +88,23 @@ class CircularProgress extends ProgressBase(BaseShapes) {
         this._trackColor = value;
     }
 
-    setTrackColor(color) {
+    get trackAlpha() {
+        return this._trackColor;
+    }
+
+    set trackAlpha(value) {
+        this.dirty = this.dirty || (this._trackAlpha != value);
+        this._trackAlpha = value;
+    }
+
+
+    setTrackColor(color, alpha) {
+        if (alpha === undefined) {
+            alpha = 1;
+        }
+
         this.trackColor = color;
+        this.trackAlpha = alpha;
         return this;
     }
 
@@ -93,8 +117,22 @@ class CircularProgress extends ProgressBase(BaseShapes) {
         this._barColor = value;
     }
 
-    setBarColor(color) {
+    get barAlpha() {
+        return this._barAlpha;
+    }
+
+    set barAlpha(value) {
+        this.dirty = this.dirty || (this._barAlpha != value);
+        this._barAlpha = value;
+    }
+
+    setBarColor(color, alpha) {
+        if (alpha === undefined) {
+            alpha = 1;
+        }
+
         this.barColor = color;
+        this.barAlpha = alpha;
         return this;
     }
 
@@ -153,8 +191,22 @@ class CircularProgress extends ProgressBase(BaseShapes) {
         this._centerColor = value;
     }
 
-    setCenterColor(color) {
+    get centerAlpha() {
+        return this._centerAlpha;
+    }
+
+    set centerAlpha(value) {
+        this.dirty = this.dirty || (this._centerAlpha != value);
+        this._centerAlpha = value;
+    }
+
+    setCenterColor(color, alpha) {
+        if (alpha === undefined) {
+            alpha = 1;
+        }
+
         this.centerColor = color;
+        this.centerAlpha = alpha;
         return this;
     }
 

plugins/gameobjects/shape/circularprogress/ShapesUpdateMethods.js

@@ -48,7 +48,7 @@ export default {
         // Track shape
         var trackShape = this.getShape('track');
         if ((this.trackColor != null) && (this.thickness > 0)) {
-            trackShape.fillStyle(this.trackColor);
+            trackShape.fillStyle(this.trackColor, this.trackAlpha);
             FillArc(trackShape, x, x, barOuterRadius, barInnerRadius, 0, 360, false);
         } else {
             trackShape.reset();
@@ -69,7 +69,7 @@ export default {
                 endAngle = deltaAngle + startAngle;
             }
 
-            barShape.fillStyle(this.barColor);
+            barShape.fillStyle(this.barColor, this.barAlpha);
             FillArc(barShape, x, x, barOuterRadius + 1, barInnerRadius - 1, startAngle, endAngle, false);
 
         } else {
@@ -82,7 +82,7 @@ export default {
             centerShape
                 .setCenterPosition(x, x)
                 .setRadius(barInnerRadius)
-                .fillStyle(this.centerColor);
+                .fillStyle(this.centerColor, this.centerAlpha);
         } else {
             centerShape.reset();
         }