Add RoundRectangleProgress game object

rexrainbow · Oct 3, 2024 · f88a028 · f88a028
1 parent df2882c
commit f88a028
Show file tree

Hide file tree

Showing 27 changed files with 1,138 additions and 43 deletions.
diff --git a/examples/roundrectangleprogress/roundrectangleprogress.bat b/examples/roundrectangleprogress/roundrectangleprogress.bat
@@ -0,0 +1,4 @@
+set main=./examples/roundrectangleprogress/roundrectangleprogress.js
+cd ..
+cd ..
+npm run watch
diff --git a/examples/roundrectangleprogress/roundrectangleprogress.js b/examples/roundrectangleprogress/roundrectangleprogress.js
@@ -0,0 +1,94 @@
+import phaser from 'phaser/src/phaser.js';
+import RoundrRctangleProgressPlugin from '../../plugins/roundrectangleprogress-plugin.js';
+import Dat from '../../plugins/utils/dat.gui/dat.gui.min.js';
+
+const COLOR_MAIN = 0x4e342e;
+const COLOR_LIGHT = 0x7b5e57;
+const COLOR_DARK = 0x260e04;
+
+class Demo extends Phaser.Scene {
+    constructor() {
+        super({
+            key: 'examples'
+        })
+    }
+
+    preload() { }
+
+    create() {
+        //var radius = 30;
+        var radius = { tl: 0, tr: 0, bl: 30, br: 30 };
+
+        var bar0 = this.add.rexRoundRectangleProgress({
+            x: 200, y: 150,
+            width: 200, height: 90,
+            radius: radius,
+            barColor: COLOR_MAIN,
+            trackColor: COLOR_DARK,
+            trackStrokeColor: COLOR_LIGHT,
+            value: 0.5
+        })
+
+        var bar1 = this.add.rexRoundRectangleProgress({
+            x: 500, y: 150,
+            width: 200, height: 90,
+            radius: radius,
+            rtl: true,
+            barColor: COLOR_MAIN,
+            trackColor: COLOR_DARK,
+            trackStrokeColor: COLOR_LIGHT,
+            value: 0.5
+        })
+
+        var bar2 = this.add.rexRoundRectangleProgress({
+            x: 200, y: 400,
+            width: 90, height: 200,
+            radius: radius,
+            orientation: 1,
+            barColor: COLOR_MAIN,
+            trackColor: COLOR_DARK,
+            trackStrokeColor: COLOR_LIGHT,
+            value: 0.5
+        })
+
+        var bar3 = this.add.rexRoundRectangleProgress({
+            x: 500, y: 400,
+            width: 90, height: 200,
+            radius: radius,
+            rtl: true, orientation: 1,
+            barColor: COLOR_MAIN,
+            trackColor: COLOR_DARK,
+            trackStrokeColor: COLOR_LIGHT,
+            value: 0.5
+        })
+
+        var gui = new Dat.GUI();
+        gui.add(bar0, 'value', 0, 1);
+        gui.add(bar1, 'value', 0, 1);
+        gui.add(bar2, 'value', 0, 1);
+        gui.add(bar3, 'value', 0, 1);
+    }
+
+    update() { }
+}
+
+var config = {
+    type: Phaser.AUTO,
+    parent: 'phaser-example',
+    width: 800,
+    height: 600,
+    scale: {
+        mode: Phaser.Scale.FIT,
+        autoCenter: Phaser.Scale.CENTER_BOTH,
+    },
+    scene: Demo,
+    plugins: {
+        global: [{
+            key: 'rexRoundrRctangleProgress',
+            plugin: RoundrRctangleProgressPlugin,
+            start: true
+        }]
+    }
+};
+
+var game = new Phaser.Game(config);
diff --git a/plugin-list.js b/plugin-list.js
@@ -19,6 +19,7 @@ module.exports = {
     'customshapesplugin': './plugins/customshapes-plugin.js',
     'circularprogressplugin': './plugins/circularprogress-plugin.js',
     'lineprogressplugin': './plugins/lineprogress-plugin.js',
+    'roundrectangleprogressplugin': './plugins/roundrectangleprogress-plugin.js',
     'customprogressplugin': './plugins/customprogress-plugin.js',
     'checkboxplugin': './plugins/checkbox-plugin.js',
     'toggleswitchplugin': './plugins/toggleswitch-plugin.js',
@@ -258,7 +259,8 @@ module.exports = {
     'circularprogress': './templates/ui/circularprogress/CircularProgress.js',
     'circularprogresscanvas': './templates/ui/circularprogresscanvas/CircularProgressCanvas.js',
     'lineprogress': './templates/ui/lineprogress/LineProgress.js',
-    'lineprogresscanvas': './templates/ui/lineprogresscanvas/LineProgressCanvas.js',
+    'roundrectangleprogress': './templates/ui/roundrectangleprogress/RoundRectangleProgress.js',
+    'lineprogresscanvas': './templates/ui/lineprogresscanvas/LineProgressCanvas.js',    
     'knob': './templates/ui/knob/Knob.js',
     'customshapes': './templates/ui/customshapes/CustomShapes.js',
     'customprogress': './templates/ui/customprogress/CustomProgress.js',

diff --git a/plugins/gameobjects/shape/lineprogress/LineProgress.js b/plugins/gameobjects/shape/lineprogress/LineProgress.js
@@ -10,24 +10,33 @@ class LineProgress extends ProgressBase(BaseShapes) {
     constructor(scene, x, y, width, height, barColor, value, config) {
         if (IsPlainObject(x)) {
             config = x;
-            x = GetValue(config, 'x', 0);
-            y = GetValue(config, 'y', 0);
-            width = GetValue(config, 'width', 2);
-            height = GetValue(config, 'height', 2);
-            barColor = GetValue(config, 'barColor', undefined);
-            value = GetValue(config, 'value', 0);
+
+            x = config.x;
+            y = config.y;
+            width = config.width;
+            height = config.height;
+            barColor = config.barColor;
+            value = config.value;
         } else if (IsPlainObject(width)) {
             config = width;
-            width = GetValue(config, 'width', 2);
-            height = GetValue(config, 'height', 2);
-            barColor = GetValue(config, 'barColor', undefined);
-            value = GetValue(config, 'value', 0);
+
+            width = config.width;
+            height = config.height;
+            barColor = config.barColor;
+            value = config.value;
         } else if (IsPlainObject(barColor)) {
             config = barColor;
-            barColor = GetValue(config, 'barColor', undefined);
-            value = GetValue(config, 'value', 0);
+
+            barColor = config.barColor;
+            value = config.value;
         }
 
+        if (x === undefined) { x = 0; }
+        if (y === undefined) { y = 0; }
+        if (width === undefined) { width = 2; }
+        if (height === undefined) { height = width; }
+        if (value === undefined) { value = 0; }
+
         super(scene, x, y, width, height, config);
         this.type = 'rexLineProgress';
 

diff --git a/plugins/gameobjects/shape/lineprogress/UpdateShapes.js b/plugins/gameobjects/shape/lineprogress/UpdateShapes.js
@@ -2,6 +2,7 @@ var UpdateShapes = function () {
     var skewX = this.skewX;
     var width = this.width - Math.abs(skewX);
     var height = this.height;
+
     var trackFill = this.getShape('trackFill');
     trackFill.fillStyle(this.trackColor);
     if (trackFill.isFilled) {
@@ -11,7 +12,6 @@ var UpdateShapes = function () {
             width, height,  // x1, y1
             skewX           // skewX
         )
-            .close()
     }
 
     var bar = this.getShape('bar');
@@ -32,7 +32,6 @@ var UpdateShapes = function () {
             barX1, height,  // x1, y1
             skewX           // skew
         )
-            .close()
     }
 
     var trackStroke = this.getShape('trackStroke');
@@ -44,7 +43,6 @@ var UpdateShapes = function () {
             width, height,  // x1, y1
             skewX           // skewX
         )
-            .end()
     }
 }
 
@@ -64,6 +62,8 @@ var BuildRectangle = function (lines, x0, y0, x1, y1, skewX) {
             .lineTo(x0, y0).lineTo(startX, y0)
     }
 
+    lines.close();
+
     return lines;
 }
 

diff --git a/plugins/gameobjects/shape/roundrectangle/RoundRectangle.d.ts b/plugins/gameobjects/shape/roundrectangle/RoundRectangle.d.ts
@@ -25,9 +25,9 @@ declare namespace RoundRectangle {
         y?: number,
         width?: number,
         height?: number,
-        radius?: number | RoundRectangle.IRadiusConfig |
+        radius?: number | IRadiusConfig |
         ({
-            radius?: (number | RoundRectangle.IRadiusConfig),
+            radius?: (number | IRadiusConfig),
             iteration?: number
         }),
 

diff --git a/plugins/gameobjects/shape/roundrectangle/RoundRectangle.js b/plugins/gameobjects/shape/roundrectangle/RoundRectangle.js
@@ -1,5 +1,6 @@
 import PolygnBase from './PolygnBase.js';
 import RoundRectangleGeom from '../../../geom/roundrectangle/RoundRectangle.js';
+import IsArcCorner from '../utils/IsArcCorner.js';
 import LineTo from '../../../geom/pathdata/LineTo.js';
 import ArcTo from '../../../geom/pathdata/ArcTo.js';
 
@@ -48,8 +49,7 @@ class RoundRectangle extends PolygnBase {
             geom.setTo(0, 0, width, height, radius);
         }
 
-        var iteration = GetValue(radiusConfig, 'iteration', undefined);
-        this.setIteration(iteration);
+        this.setIteration(GetValue(radiusConfig, 'iteration', undefined));
         this.setPosition(x, y);
 
         this.setFillStyle(fillColor, fillAlpha);
@@ -302,10 +302,6 @@ class RoundRectangle extends PolygnBase {
 
 }
 
-var IsArcCorner = function (radius) {
-    return ((radius.x > 0) && (radius.y > 0));
-}
-
 const ShapeTypeMap = {
     rectangle: 0,
     circle: 1

diff --git a/plugins/gameobjects/shape/roundrectangleprogress/Creator.d.ts b/plugins/gameobjects/shape/roundrectangleprogress/Creator.d.ts
@@ -0,0 +1,12 @@
+import RoundRectangleProgress from './RoundRectangleProgress';
+
+export default Creator;
+
+declare namespace Creator {
+    interface IConfig extends Phaser.Types.GameObjects.GameObjectConfig { }
+}
+
+declare function Creator(
+    config?: Creator.IConfig,
+    addToScene?: boolean,
+): RoundRectangleProgress;
diff --git a/plugins/gameobjects/shape/roundrectangleprogress/Creator.js b/plugins/gameobjects/shape/roundrectangleprogress/Creator.js
@@ -0,0 +1,13 @@
+import RoundRectangleProgress from './RoundRectangleProgress.js';
+
+const BuildGameObject = Phaser.GameObjects.BuildGameObject;
+
+export default function (config, addToScene) {
+    if (config === undefined) { config = {}; }
+    if (addToScene !== undefined) {
+        config.add = addToScene;
+    }
+    var gameObject = new RoundRectangleProgress(this.scene, config);
+    BuildGameObject(this.scene, gameObject, config);
+    return gameObject;
+};
diff --git a/plugins/gameobjects/shape/roundrectangleprogress/Factory.d.ts b/plugins/gameobjects/shape/roundrectangleprogress/Factory.d.ts
@@ -0,0 +1,19 @@
+import RoundRectangleProgress from './RoundRectangleProgress';
+
+export default function (
+    config?: RoundRectangleProgress.IConfig
+): RoundRectangleProgress;
+
+export default function (
+    x?: number, y?: number,
+    width?: number, height?: number,
+    config?: RoundRectangleProgress.IConfig
+): RoundRectangleProgress;
+
+export default function (
+    x?: number, y?: number,
+    width?: number, height?: number,
+    barColor?: string | number,
+    value?: number,
+    config?: RoundRectangleProgress.IConfig
+): RoundRectangleProgress;
diff --git a/plugins/gameobjects/shape/roundrectangleprogress/Factory.js b/plugins/gameobjects/shape/roundrectangleprogress/Factory.js
@@ -0,0 +1,7 @@
+import RoundRectangleProgress from './RoundRectangleProgress.js';
+
+export default function (x, y, width, height, barColor, value, config) {
+    var gameObject = new RoundRectangleProgress(this.scene, x, y, width, height, barColor, value, config);
+    this.scene.add.existing(gameObject);
+    return gameObject;
+};