Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-26 22:52:14 +00:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source
This commit is contained in:
Richard Davey 2019-11-28 10:43:26 +00:00
parent 352863d664
commit f126f28121
1 changed files with 284 additions and 175 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

235
src/physics/matter-js/World.js
View file

@ -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 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 opacity = body.render.opacity;
var lineStyle = strokeColor;
var fillStyle = fillColor;
@ -858,61 +844,159 @@ var World = new Class({
fillStyle = staticFillColor;
}
graphics.lineStyle(1, lineStyle, opacity);
graphics.fillStyle(fillStyle, opacity);
if (!renderFill)
{
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();
graphics.moveTo(part.vertices[0].x, part.vertices[0].y);
var vertices = part.vertices;
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.arc(start.x, start.y, pinSize, 0, 2 * Math.PI);
graphics.closePath();
graphics.strokeCircle(start.x, start.y, pinSize);
}
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();
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();
}
}
return this;
},
/**