Split out the debug rendering process into single methods, so they can be called externally if required

src/physics/matter-js/World.js

@@ -214,6 +214,7 @@ var World = new Class({
 
             renderFill: GetFastValue(debugConfig, 'renderFill', true),
             renderStroke: GetFastValue(debugConfig, 'renderStroke', true),
+            lineThickness: GetFastValue(debugConfig, 'lineThickness', 1),
 
             fillColor: GetFastValue(debugConfig, 'fillColor', 0x106909),
             strokeColor: GetFastValue(debugConfig, 'strokeColor', 0x28de19),
@@ -765,7 +766,9 @@ var World = new Class({
     },
 
     /**
-     * Renders the array of bodies.
+     * Renders the given array of Bodies to the debug graphics instance.
+     * 
+     * Called automatically by the `postUpdate` method.
      *
      * @method Phaser.Physics.Matter.World#renderBodies
      * @private
@@ -790,6 +793,7 @@ var World = new Class({
 
         var fillColor = config.fillColor;
         var strokeColor = config.strokeColor;
+        var lineThickness = config.lineThickness;
 
         var staticFillColor = config.staticFillColor;
         var staticStrokeColor = config.staticStrokeColor;
@@ -800,13 +804,9 @@ var World = new Class({
 
         var hullColor = config.hullColor;
 
-        var body;
-        var part;
-        var render;
-
         for (var i = 0; i < bodies.length; i++)
         {
-            body = bodies[i];
+            var body = bodies[i];
 
             //  1) Don't show invisible bodies
             if (!body.render.visible)
@@ -821,21 +821,7 @@ var World = new Class({
                 continue;
             }
 
-            //  Handle compound parts
+            var opacity = body.render.opacity;
-            var partsLength = body.parts.length;
-
-            for (var k = (partsLength > 1) ? 1 : 0; k < partsLength; k++)
-            {
-                part = body.parts[k];
-                render = part.render;
-
-                if (!render.visible)
-                {
-                    continue;
-                }
-
-                var opacity = render.opacity;
-
             var lineStyle = strokeColor;
             var fillStyle = fillColor;
 
@@ -858,61 +844,159 @@ var World = new Class({
                 fillStyle = staticFillColor;
             }
 
-                graphics.lineStyle(1, lineStyle, opacity);
+            if (!renderFill)
-                graphics.fillStyle(fillStyle, opacity);
+            {
+                fillStyle = null;
+            }
+
+            if (!renderStroke)
+            {
+                lineStyle = null;
+            }
+
+            this.renderBody(body, graphics, showInternalEdges, lineStyle, fillStyle, opacity, lineThickness);
+
+            var partsLength = body.parts.length;
+
+            if (showConvexHulls && partsLength > 1)
+            {
+                this.renderConvexHull(body, graphics, hullColor, lineThickness);
+            }
+        }
+    },
+
+    /**
+     * Renders a single Matter Body to the given Phaser Graphics Game Object.
+     * 
+     * This method is used internally by the Matter Debug Renderer, but is also exposed publically should
+     * you wish to render a Body to your own Graphics instance.
+     * 
+     * @method Phaser.Physics.Matter.World#renderBody
+     * @since 3.22.0
+     * 
+     * @param {MatterJS.Body} body - The Matter Body to be rendered.
+     * @param {Phaser.GameObjects.Graphics} graphics - The Graphics object to render to.
+     * @param {boolean} showInternalEdges - Render internal edges of the polygon?
+     * @param {number} [lineColor] - The stroke color. Set to `null` if you don't want to render a stroke.
+     * @param {number} [fillColor] - The fill color. Set to `null` if you don't want to render a fill.
+     * @param {number} [opacity] - The opacity, between 0 and 1. Set to `null` if you want to use the opacity defined in the Body render object.
+     * @param {number} [lineThickness=1] - The stroke line thickness.
+     * 
+     * @return {this} This Matter World instance for method chaining.
+     */
+    renderBody: function (body, graphics, showInternalEdges, lineColor, fillColor, opacity, lineThickness)
+    {
+        if (lineColor === undefined) { lineColor = null; }
+        if (fillColor === undefined) { fillColor = null; }
+        if (opacity === undefined) { opacity = null; }
+        if (lineThickness === undefined) { lineThickness = 1; }
+
+        var usePartOpacity = !opacity;
+
+        //  Handle compound parts
+        var parts = body.parts;
+        var partsLength = parts.length;
+
+        for (var k = (partsLength > 1) ? 1 : 0; k < partsLength; k++)
+        {
+            var part = parts[k];
+            var render = part.render;
+
+            if (usePartOpacity)
+            {
+                opacity = render.opacity;
+            }
+
+            if (!render.visible || opacity === 0)
+            {
+                continue;
+            }
 
             //  Part polygon
-                if (part.circleRadius)
+            var circleRadius = part.circleRadius;
+
+            if (circleRadius)
             {
                 graphics.beginPath();
-                    graphics.arc(part.position.x, part.position.y, part.circleRadius, 0, 2 * Math.PI);
+                graphics.arc(part.position.x, part.position.y, circleRadius, 0, 2 * Math.PI);
             }
             else
             {
-                    graphics.beginPath();
+                var vertices = part.vertices;
-                    graphics.moveTo(part.vertices[0].x, part.vertices[0].y);
+                var vertLength = vertices.length;
 
-                    var vertLength = part.vertices.length;
+                graphics.beginPath();
+                graphics.moveTo(vertices[0].x, vertices[0].y);
 
                 for (var j = 1; j < vertLength; j++)
                 {
-                        if (!part.vertices[j - 1].isInternal || showInternalEdges)
+                    var vert = vertices[j];
+
+                    if (!vertices[j - 1].isInternal || showInternalEdges)
                     {
-                            graphics.lineTo(part.vertices[j].x, part.vertices[j].y);
+                        graphics.lineTo(vert.x, vert.y);
                     }
                     else
                     {
-                            graphics.moveTo(part.vertices[j].x, part.vertices[j].y);
+                        graphics.moveTo(vert.x, vert.y);
                     }
 
-                        if (part.vertices[j].isInternal && !showInternalEdges)
+                    if (vert.isInternal && !showInternalEdges)
                     {
-                            graphics.moveTo(part.vertices[(j + 1) % part.vertices.length].x, part.vertices[(j + 1) % part.vertices.length].y);
+                        var nextIndex = (j + 1) % vertLength;
-                        }
-                    }
 
-                    graphics.lineTo(part.vertices[0].x, part.vertices[0].y);
+                        graphics.moveTo(vertices[nextIndex].x, vertices[nextIndex].y);
+                    }
+                }
                 
                 graphics.closePath();
             }
 
-                if (renderFill)
+            if (fillColor !== null)
             {
+                graphics.fillStyle(fillColor, opacity);
                 graphics.fillPath();
             }
 
-                if (renderStroke)
+            if (lineColor !== null)
             {
+                graphics.lineStyle(lineThickness, lineColor, opacity);
                 graphics.strokePath();
             }
         }
 
+        return this;
+    },
+
+    /**
+     * Renders the Convex Hull for a single Matter Body to the given Phaser Graphics Game Object.
+     * 
+     * This method is used internally by the Matter Debug Renderer, but is also exposed publically should
+     * you wish to render a Body hull to your own Graphics instance.
+     * 
+     * @method Phaser.Physics.Matter.World#renderConvexHull
+     * @since 3.22.0
+     * 
+     * @param {MatterJS.Body} body - The Matter Body to be rendered.
+     * @param {Phaser.GameObjects.Graphics} graphics - The Graphics object to render to.
+     * @param {number} hullColor - The stroke color used to render the hull.
+     * @param {number} [lineThickness=1] - The stroke line thickness.
+     * 
+     * @return {this} This Matter World instance for method chaining.
+     */
+    renderConvexHull: function (body, graphics, hullColor, lineThickness)
+    {
+        if (lineThickness === undefined) { lineThickness = 1; }
+
+        var parts = body.parts;
+        var partsLength = parts.length;
+
         //  Render Convex Hulls
-            if (showConvexHulls && partsLength > 1)
+        if (partsLength > 1)
         {
             var verts = body.vertices;
 
-                graphics.lineStyle(1, hullColor);
+            graphics.lineStyle(lineThickness, hullColor);
 
             graphics.beginPath();
 
@@ -927,11 +1011,14 @@ var World = new Class({
 
             graphics.strokePath();
         }
-        }
+
+        return this;
     },
 
     /**
-     * Renders world constraints.
+     * Renders all of the constraints in the world (unless they are specifically set to invisible).
+     * 
+     * Called automatically by the `postUpdate` method.
      *
      * @method Phaser.Physics.Matter.World#renderJoints
      * @private
@@ -955,22 +1042,49 @@ var World = new Class({
 
         for (var i = 0; i < constraints.length; i++)
         {
-            var constraint = constraints[i];
+            this.renderConstraint(constraints[i], graphics, jointColor, jointLineThickness, springColor, pinColor, pinSize, anchorColor, anchorSize);
+        }
+    },
 
-            if (!constraint.render.visible || !constraint.pointA || !constraint.pointB)
+    /**
+     * Renders a single Matter Constraint, such as a Pin or a Spring, to the given Phaser Graphics Game Object.
+     * 
+     * This method is used internally by the Matter Debug Renderer, but is also exposed publically should
+     * you wish to render a Constraint to your own Graphics instance.
+     * 
+     * @method Phaser.Physics.Matter.World#renderConstraint
+     * @since 3.22.0
+     * 
+     * @param {MatterJS.Constraint} constraint - The Matter Constraint to render.
+     * @param {Phaser.GameObjects.Graphics} graphics - The Graphics object to render to.
+     * @param {number} lineColor - The line color used when rendering this constraint.
+     * @param {number} lineThickness - The line thickness.
+     * @param {number} springColor - The color used when rendering, if this constraint is a spring.
+     * @param {number} pinColor - The color used when rendering, if this constraint is a pin.
+     * @param {number} pinSize - If this constraint is a pin, this sets the size of the pin circle.
+     * @param {number} anchorColor - The color used when rendering this constraints anchors. Set to `null` to not render anchors.
+     * @param {number} anchorSize - The size of the anchor circle, if this constraint has anchors and is rendering them.
+     * 
+     * @return {this} This Matter World instance for method chaining.
+     */
+    renderConstraint: function (constraint, graphics, lineColor, lineThickness, springColor, pinColor, pinSize, anchorColor, anchorSize)
     {
-                continue;
+        var render = constraint.render;
+
+        if (!render.visible || !constraint.pointA || !constraint.pointB)
+        {
+            return this;
         }
 
-            var custom = constraint.render.custom;
+        var custom = render.custom;
 
         if (custom)
         {
-                graphics.lineStyle(constraint.render.lineWidth, Common.colorToNumber(constraint.render.strokeStyle));
+            graphics.lineStyle(render.lineWidth, Common.colorToNumber(render.strokeStyle));
         }
         else
         {
-                graphics.lineStyle(jointLineThickness, jointColor);
+            graphics.lineStyle(lineThickness, lineColor);
         }
 
         var bodyA = constraint.bodyA;
@@ -987,16 +1101,14 @@ var World = new Class({
             start = constraint.pointA;
         }
 
-            if (constraint.render.type === 'pin')
+        if (render.type === 'pin')
         {
             if (!custom)
             {
-                    graphics.lineStyle(jointLineThickness, pinColor);
+                graphics.lineStyle(lineThickness, pinColor);
             }
 
-                graphics.beginPath();
+            graphics.strokeCircle(start.x, start.y, pinSize);
-                graphics.arc(start.x, start.y, pinSize, 0, 2 * Math.PI);
-                graphics.closePath();
         }
         else
         {
@@ -1012,11 +1124,11 @@ var World = new Class({
             graphics.beginPath();
             graphics.moveTo(start.x, start.y);
 
-                if (constraint.render.type === 'spring')
+            if (render.type === 'spring')
             {
                 if (!custom)
                 {
-                        graphics.lineStyle(jointLineThickness, springColor);
+                    graphics.lineStyle(lineThickness, springColor);
                 }
 
                 var delta = Vector.sub(end, start);
@@ -1040,17 +1152,14 @@ var World = new Class({
 
         graphics.strokePath();
 
-            if (constraint.render.anchors)
+        if (render.anchors && anchorSize > 0)
         {
             graphics.fillStyle(anchorColor);
+            graphics.fillCircle(start.x, start.y, anchorSize);
+            graphics.fillCircle(end.x, end.y, anchorSize);
+        }
 
-                graphics.beginPath();
+        return this;
-                graphics.arc(start.x, start.y, anchorSize, 0, 2 * Math.PI);
-                graphics.arc(end.x, end.y, anchorSize, 0, 2 * Math.PI);
-                graphics.closePath();
-                graphics.fillPath();
-            }
-        }
     },
 
     /**