Added fill gradient and line gradient methods

photonstorm · photonstorm · commit 6027b655002a · 2018-07-27T02:13:58.000+01:00
diff --git a/src/gameobjects/graphics/Commands.js b/src/gameobjects/graphics/Commands.js
@@ -30,6 +30,8 @@ module.exports = {
     SCALE: 17,
     ROTATE: 18,
     SET_TEXTURE: 19,
-    CLEAR_TEXTURE: 20
+    CLEAR_TEXTURE: 20,
+    GRADIENT_FILL_STYLE: 21,
+    GRADIENT_LINE_STYLE: 22
 
 };
diff --git a/src/gameobjects/graphics/Graphics.js b/src/gameobjects/graphics/Graphics.js
@@ -314,6 +314,79 @@ var Graphics = new Class({
         return this;
     },
 
+    /**
+     * Sets a gradient fill style. This is a WebGL only feature.
+     * 
+     * The gradient color values represent the 4 corners of an untransformed rectangle.
+     * The gradient is used to color all filled shapes and paths drawn after calling this method.
+     * If you wish to turn a gradient off, call `fillStyle` and provide a new single fill color.
+     * 
+     * When filling a triangle only the first 3 color values provided are used for the 3 points of a triangle.
+     * 
+     * Note that for objects such as arcs or ellipses, or anything which is made out of triangles, each triangle used
+     * will be filled with a gradient on its own. There is no ability to gradient fill a shape or path as a single
+     * item at this time.
+     *
+     * @method Phaser.GameObjects.Graphics#fillGradientStyle
+     * @webglOnly
+     * @since 3.12.0
+     *
+     * @param {integer} topLeft - The tint being applied to the top-left of the Game Object.
+     * @param {integer} topRight - The tint being applied to the top-right of the Game Object.
+     * @param {integer} bottomLeft - The tint being applied to the bottom-left of the Game Object.
+     * @param {integer} bottomRight - The tint being applied to the bottom-right of the Game Object.
+     * @param {number} [alpha=1] - The fill alpha.
+     *
+     * @return {Phaser.GameObjects.Graphics} This Game Object.
+     */
+    fillGradientStyle: function (topLeft, topRight, bottomLeft, bottomRight, alpha)
+    {
+        if (alpha === undefined) { alpha = 1; }
+
+        this.commandBuffer.push(
+            Commands.GRADIENT_FILL_STYLE,
+            alpha, topLeft, topRight, bottomLeft, bottomRight
+        );
+
+        return this;
+    },
+
+    /**
+     * Sets a gradient line style. This is a WebGL only feature.
+     * 
+     * The gradient color values represent the 4 corners of an untransformed rectangle.
+     * The gradient is used to color all stroked shapes and paths drawn after calling this method.
+     * If you wish to turn a gradient off, call `lineStyle` and provide a new single line color.
+     * 
+     * Note that for objects such as arcs or ellipses, or anything which is made out of triangles, each triangle used
+     * will be filled with a gradient on its own. There is no ability to gradient stroke a shape or path as a single
+     * item at this time.
+     *
+     * @method Phaser.GameObjects.Graphics#lineGradientStyle
+     * @webglOnly
+     * @since 3.12.0
+     *
+     * @param {number} lineWidth - The stroke width.
+     * @param {integer} topLeft - The tint being applied to the top-left of the Game Object.
+     * @param {integer} topRight - The tint being applied to the top-right of the Game Object.
+     * @param {integer} bottomLeft - The tint being applied to the bottom-left of the Game Object.
+     * @param {integer} bottomRight - The tint being applied to the bottom-right of the Game Object.
+     * @param {number} [alpha=1] - The fill alpha.
+     *
+     * @return {Phaser.GameObjects.Graphics} This Game Object.
+     */
+    lineGradientStyle: function (lineWidth, topLeft, topRight, bottomLeft, bottomRight, alpha)
+    {
+        if (alpha === undefined) { alpha = 1; }
+
+        this.commandBuffer.push(
+            Commands.GRADIENT_LINE_STYLE,
+            lineWidth, alpha, topLeft, topRight, bottomLeft, bottomRight
+        );
+
+        return this;
+    },
+
     /**
      * Sets the texture and frame this Graphics Object will use when texturing the shapes it renders.
      *
diff --git a/src/gameobjects/graphics/GraphicsWebGLRenderer.js b/src/gameobjects/graphics/GraphicsWebGLRenderer.js
@@ -84,26 +84,24 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
 
     var commands = src.commandBuffer;
     var alpha = camera.alpha * src.alpha;
-    var lineAlpha = 1.0;
-    var fillAlpha = 1.0;
-    var lineColor = 0;
-    var fillColor = 0;
-    var lineWidth = 1.0;
-    var lastPath = null;
-    var iteration = 0;
-    var iterStep = 0.01;
+
+    var lineWidth = 1;
+    var fillTint = pipeline.fillTint;
+    var strokeTint = pipeline.strokeTint;
+
     var tx = 0;
     var ty = 0;
     var ta = 0;
-    var x = 0;
-    var y = 0;
-    var radius = 0;
-    var startAngle = 0;
-    var endAngle = 0;
+    var iterStep = 0.01;
+
     var cmd;
+
     var path = [];
     var pathIndex = 0;
     var pathOpen = false;
+    var lastPath = null;
+
+    var getTint = Utils.getTintAppendFloatAlphaAndSwap;
 
     for (var cmdIndex = 0; cmdIndex < commands.length; cmdIndex++)
     {
@@ -154,27 +152,51 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
 
             case Commands.LINE_STYLE:
                 lineWidth = commands[++cmdIndex];
-                lineColor = commands[++cmdIndex];
-                lineAlpha = commands[++cmdIndex];
-                pipeline.strokeTint = Utils.getTintAppendFloatAlphaAndSwap(lineColor, lineAlpha * alpha);
+                var strokeColor = commands[++cmdIndex];
+                var strokeAlpha = commands[++cmdIndex] * alpha;
+                var strokeTintColor = getTint(strokeColor, strokeAlpha);
+                strokeTint.TL = strokeTintColor;
+                strokeTint.TR = strokeTintColor;
+                strokeTint.BL = strokeTintColor;
+                strokeTint.BR = strokeTintColor;
                 break;
 
             case Commands.FILL_STYLE:
-                fillColor = commands[++cmdIndex];
-                fillAlpha = commands[++cmdIndex];
-                pipeline.fillTint = Utils.getTintAppendFloatAlphaAndSwap(fillColor, fillAlpha * alpha);
+                var fillColor = commands[++cmdIndex];
+                var fillAlpha = commands[++cmdIndex] * alpha;
+                var fillTintColor = getTint(fillColor, fillAlpha);
+                fillTint.TL = fillTintColor;
+                fillTint.TR = fillTintColor;
+                fillTint.BL = fillTintColor;
+                fillTint.BR = fillTintColor;
+                break;
+
+            case Commands.GRADIENT_FILL_STYLE:
+                var gradientFillAlpha = commands[++cmdIndex] * alpha;
+                fillTint.TL = getTint(commands[++cmdIndex], gradientFillAlpha);
+                fillTint.TR = getTint(commands[++cmdIndex], gradientFillAlpha);
+                fillTint.BL = getTint(commands[++cmdIndex], gradientFillAlpha);
+                fillTint.BR = getTint(commands[++cmdIndex], gradientFillAlpha);
+                break;
+
+            case Commands.GRADIENT_LINE_STYLE:
+                lineWidth = commands[++cmdIndex];
+                var gradientLineAlpha = commands[++cmdIndex] * alpha;
+                strokeTint.TL = getTint(commands[++cmdIndex], gradientLineAlpha);
+                strokeTint.TR = getTint(commands[++cmdIndex], gradientLineAlpha);
+                strokeTint.BL = getTint(commands[++cmdIndex], gradientLineAlpha);
+                strokeTint.BR = getTint(commands[++cmdIndex], gradientLineAlpha);
                 break;
 
             case Commands.ARC:
-                iteration = 0;
-                x = commands[++cmdIndex];
-                y = commands[++cmdIndex];
-                radius = commands[++cmdIndex];
-                startAngle = commands[++cmdIndex];
-                endAngle = commands[++cmdIndex];
+                var iteration = 0;
+                var x = commands[++cmdIndex];
+                var y = commands[++cmdIndex];
+                var radius = commands[++cmdIndex];
+                var startAngle = commands[++cmdIndex];
+                var endAngle = commands[++cmdIndex];
 
-                // var anticlockwise
-                cmdIndex++;
+                cmdIndex++; // anticlockwise (canvas only)
 
                 if (lastPath === null)
                 {
@@ -243,20 +265,18 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
             case Commands.LINE_TO:
                 if (lastPath !== null)
                 {
-                    lastPath.points.push(new Point(commands[cmdIndex + 1], commands[cmdIndex + 2], lineWidth));
+                    lastPath.points.push(new Point(commands[++cmdIndex], commands[++cmdIndex], lineWidth));
                 }
                 else
                 {
-                    lastPath = new Path(commands[cmdIndex + 1], commands[cmdIndex + 2], lineWidth);
+                    lastPath = new Path(commands[++cmdIndex], commands[++cmdIndex], lineWidth);
                     path.push(lastPath);
                 }
-                cmdIndex += 2;
                 break;
 
             case Commands.MOVE_TO:
-                lastPath = new Path(commands[cmdIndex + 1], commands[cmdIndex + 2], lineWidth);
+                lastPath = new Path(commands[++cmdIndex], commands[++cmdIndex], lineWidth);
                 path.push(lastPath);
-                cmdIndex += 2;
                 break;
 
             case Commands.SAVE:
@@ -280,8 +300,7 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                 break;
 
             case Commands.ROTATE:
-                var r = commands[++cmdIndex];
-                currentMatrix.rotate(r);
+                currentMatrix.rotate(commands[++cmdIndex]);
                 break;
 
             case Commands.SET_TEXTURE:
@@ -291,14 +310,12 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
                 pipeline.currentFrame = frame;
                 renderer.setTexture2D(frame.glTexture, 0);
                 pipeline.tintEffect = mode;
-
                 break;
 
             case Commands.CLEAR_TEXTURE:
                 pipeline.currentFrame = renderer.blankTexture;
                 renderer.setTexture2D(renderer.blankTexture.glTexture, 0);
                 pipeline.tintEffect = 2;
-
                 break;
 
         }
