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

Add Shape rendering, using the Graphics render nodes.

Browse source
This commit is contained in:
Ben Richards 2024-06-26 15:34:11 +12:00
parent 8f34a894a7
commit 227e5f5208
15 changed files with 301 additions and 319 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/gameobjects/graphics/Graphics.js
View file

@ -53,6 +53,11 @@ var Render = require('./GraphicsRender');
* updates frequently then you should avoid doing this, as it will constantly generate new textures, which will consume
* memory.
*
* Under WebGL, Graphics uses its own shader which will batch drawing operations.
* Try to keep Graphics objects grouped together so they can be batched together.
* Avoid mixing object types where possible, as each batch will be flushed,
* costing performance.
*
* As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful
* in their complexity and quantity of them in your game.
*

53
src/gameobjects/shape/FillPathWebGL.js
View file

@ -13,44 +13,53 @@ var Utils = require('../../renderer/webgl/Utils');
* @since 3.13.0
* @private
*
* @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The WebGL Pipeline used to render this Shape.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.Renderer.WebGL.RenderNodes.SubmitterGraphics} submitter - The Submitter node to use.
* @param {Phaser.GameObjects.Components.TransformMatrix} calcMatrix - The transform matrix used to get the position values.
* @param {Phaser.GameObjects.Shape} src - The Game Object shape being rendered in this call.
* @param {number} alpha - The base alpha value.
* @param {number} dx - The source displayOriginX.
* @param {number} dy - The source displayOriginY.
*/
var FillPathWebGL = function (pipeline, calcMatrix, src, alpha, dx, dy)
var FillPathWebGL = function (drawingContext, submitter, calcMatrix, src, alpha, dx, dy)
{
// This is very similar to the FillPath RenderNode, but it already
// has access to the Earcut indexes, so it doesn't need to calculate them.
var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
var path = src.pathData;
var pathIndexes = src.pathIndexes;
for (var i = 0; i < pathIndexes.length; i += 3)
var length = path.length;
var pathIndex, pointX, pointY, x, y;
var vertices = Array(length * 2);
var colors = Array(length);
var verticesIndex = 0;
var colorsIndex = 0;
for (pathIndex = 0; pathIndex < length; pathIndex += 2)
{
var p0 = pathIndexes[i] * 2;
var p1 = pathIndexes[i + 1] * 2;
var p2 = pathIndexes[i + 2] * 2;
pointX = path[pathIndex] - dx;
pointY = path[pathIndex + 1] - dy;
var x0 = path[p0 + 0] - dx;
var y0 = path[p0 + 1] - dy;
var x1 = path[p1 + 0] - dx;
var y1 = path[p1 + 1] - dy;
var x2 = path[p2 + 0] - dx;
var y2 = path[p2 + 1] - dy;
// Transform the point.
x = calcMatrix.getX(pointX, pointY);
y = calcMatrix.getY(pointX, pointY);
var tx0 = calcMatrix.getX(x0, y0);
var ty0 = calcMatrix.getY(x0, y0);
var tx1 = calcMatrix.getX(x1, y1);
var ty1 = calcMatrix.getY(x1, y1);
var tx2 = calcMatrix.getX(x2, y2);
var ty2 = calcMatrix.getY(x2, y2);
pipeline.batchTri(src, tx0, ty0, tx1, ty1, tx2, ty2, 0, 0, 1, 1, fillTintColor, fillTintColor, fillTintColor, 2);
vertices[verticesIndex++] = x;
vertices[verticesIndex++] = y;
colors[colorsIndex++] = fillTintColor;
}
submitter.batch(
drawingContext,
pathIndexes,
vertices,
colors
);
};
module.exports = FillPathWebGL;

11
src/gameobjects/shape/Shape.js
View file

@ -14,6 +14,10 @@ var Line = require('../../geom/line/Line');
* The Shape Game Object is a base class for the various different shapes, such as the Arc, Star or Polygon.
* You cannot add a Shape directly to your Scene, it is meant as a base for your own custom Shape classes.
*
* Shape objects use the same batch as the Graphics Game Object to render in WebGL.
* They do not support gradients, path detail threshold, or other advanced Graphics features.
* In return, they have precomputed internal data for quick rendering of the geometry.
*
* @class Shape
* @extends Phaser.GameObjects.GameObject
* @memberof Phaser.GameObjects
@ -26,8 +30,8 @@ var Line = require('../../geom/line/Line');
* @extends Phaser.GameObjects.Components.GetBounds
* @extends Phaser.GameObjects.Components.Mask
* @extends Phaser.GameObjects.Components.Origin
* @extends Phaser.GameObjects.Components.Pipeline
* @extends Phaser.GameObjects.Components.PostPipeline
* @extends Phaser.GameObjects.Components.RenderNode
* @extends Phaser.GameObjects.Components.ScrollFactor
* @extends Phaser.GameObjects.Components.Transform
* @extends Phaser.GameObjects.Components.Visible
@ -45,10 +49,11 @@ var Shape = new Class({
Components.BlendMode,
Components.Depth,
Components.GetBounds,
Components.Lighting,
Components.Mask,
Components.Origin,
Components.Pipeline,
Components.PostPipeline,
Components.RenderNode,
Components.ScrollFactor,
Components.Transform,
Components.Visible
@ -205,7 +210,7 @@ var Shape = new Class({
*/
this.height = 0;
this.initPipeline();
this.initRenderNodes('Graphics');
this.initPostPipeline();
},

66
src/gameobjects/shape/StrokePathWebGL.js
View file

@ -13,55 +13,61 @@ var Utils = require('../../renderer/webgl/Utils');
* @since 3.13.0
* @private
*
* @param {Phaser.Renderer.WebGL.WebGLPipeline} pipeline - The WebGL Pipeline used to render this Shape.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.Renderer.WebGL.RenderNodes.SubmitterGraphics} submitter - The Submitter node to use.
* @param {Phaser.GameObjects.Components.TransformMatrix} matrix - The current transform matrix.
* @param {Phaser.GameObjects.Shape} src - The Game Object shape being rendered in this call.
* @param {number} alpha - The base alpha value.
* @param {number} dx - The source displayOriginX.
* @param {number} dy - The source displayOriginY.
*/
var StrokePathWebGL = function (pipeline, src, alpha, dx, dy)
var StrokePathWebGL = function (drawingContext, submitter, matrix, src, alpha, dx, dy)
{
var strokeTint = pipeline.strokeTint;
var strokeTintColor = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
strokeTint.TL = strokeTintColor;
strokeTint.TR = strokeTintColor;
strokeTint.BL = strokeTintColor;
strokeTint.BR = strokeTintColor;
var path = src.pathData;
var pathLength = path.length - 1;
var lineWidth = src.lineWidth;
var halfLineWidth = lineWidth / 2;
var openPath = !src.closePath;
var px1 = path[0] - dx;
var py1 = path[1] - dy;
var strokePath = src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath;
if (!src.closePath)
var pointPath = [];
// Don't add the last point to open paths.
if (openPath)
{
pathLength -= 2;
}
for (var i = 2; i < pathLength; i += 2)
for (var i = 0; i < pathLength; i += 2)
{
var px2 = path[i] - dx;
var py2 = path[i + 1] - dy;
pipeline.batchLine(
px1,
py1,
px2,
py2,
halfLineWidth,
halfLineWidth,
lineWidth,
i - 2,
(src.closePath) ? (i === pathLength - 1) : false
);
px1 = px2;
py1 = py2;
var x = path[i] - dx;
var y = path[i + 1] - dy;
if (i > 0)
{
if (x === path[i - 2] && y === path[i - 1])
{
// Duplicate point, skip it
continue;
}
}
pointPath.push({
x: x,
y: y,
width: lineWidth
});
}
strokePath.run(
drawingContext,
submitter,
pointPath,
lineWidth,
openPath,
matrix,
strokeTintColor, strokeTintColor, strokeTintColor, strokeTintColor
);
};
module.exports = StrokePathWebGL;

19
src/gameobjects/shape/arc/ArcWebGLRenderer.js
View file

@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Arc} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var ArcWebGLRenderer = function (renderer, src, camera, parentMatrix)
var ArcWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
if (src.isFilled)
{
FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = ArcWebGLRenderer;

20
src/gameobjects/shape/curve/CurveWebGLRenderer.js
View file

@ -19,37 +19,33 @@ var StrokePathWebGL = require('../StrokePathWebGL');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Curve} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var CurveWebGLRenderer = function (renderer, src, camera, parentMatrix)
var CurveWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
// Note use of _curveBounds, unlike other path-based Shape objects.
var dx = src._displayOriginX + src._curveBounds.x;
var dy = src._displayOriginY + src._curveBounds.y;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
if (src.isFilled)
{
FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = CurveWebGLRenderer;

19
src/gameobjects/shape/ellipse/EllipseWebGLRenderer.js
View file

@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Ellipse} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var EllipseWebGLRenderer = function (renderer, src, camera, parentMatrix)
var EllipseWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
if (src.isFilled)
{
FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = EllipseWebGLRenderer;

81
src/gameobjects/shape/grid/GridWebGLRenderer.js
View file

@ -18,18 +18,18 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Grid} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var fillRectNode = src.customRenderNodes.FillRect || src.defaultRenderNodes.FillRect;
var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
calcMatrix.translate(-src._displayOriginX, -src._displayOriginY);
@ -52,7 +52,6 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
var cellWidthB = cellWidth - ((gridWidth * cellWidth) - width);
var cellHeightB = cellHeight - ((gridHeight * cellHeight) - height);
var fillTint;
var fillTintColor;
var showCells = src.showCells;
@ -82,18 +81,10 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
}
}
renderer.pipelines.preBatch(src);
if (showCells && src.fillAlpha > 0)
{
fillTint = pipeline.fillTint;
fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
fillTint.TL = fillTintColor;
fillTint.TR = fillTintColor;
fillTint.BL = fillTintColor;
fillTint.BR = fillTintColor;
for (y = 0; y < gridHeight; y++)
{
if (showAltCells)
@ -114,11 +105,13 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
pipeline.batchFillRect(
x * cellWidth,
y * cellHeight,
cw,
ch
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth, y * cellHeight,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
}
}
@ -126,14 +119,8 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
if (showAltCells && src.altFillAlpha > 0)
{
fillTint = pipeline.fillTint;
fillTintColor = Utils.getTintAppendFloatAlpha(src.altFillColor, src.altFillAlpha * alpha);
fillTint.TL = fillTintColor;
fillTint.TR = fillTintColor;
fillTint.BL = fillTintColor;
fillTint.BR = fillTintColor;
for (y = 0; y < gridHeight; y++)
{
if (showAltCells)
@ -154,11 +141,13 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
pipeline.batchFillRect(
x * cellWidth,
y * cellHeight,
cw,
ch
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth, y * cellHeight,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
}
}
@ -166,30 +155,36 @@ var GridWebGLRenderer = function (renderer, src, camera, parentMatrix)
if (showOutline && src.outlineFillAlpha > 0)
{
var strokeTint = pipeline.strokeTint;
var color = Utils.getTintAppendFloatAlpha(src.outlineFillColor, src.outlineFillAlpha * alpha);
strokeTint.TL = color;
strokeTint.TR = color;
strokeTint.BL = color;
strokeTint.BR = color;
for (x = 1; x < gridWidth; x++)
{
var x1 = x * cellWidth;
var x1 = x * cellWidth - 1;
pipeline.batchLine(x1, 0, x1, height, 1, 1, 1, 0, false);
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x1, 0,
2, height,
color, color, color, color
);
}
for (y = 1; y < gridHeight; y++)
{
var y1 = y * cellHeight;
var y1 = y * cellHeight - 1;
pipeline.batchLine(0, y1, width, y1, 1, 1, 1, 0, false);
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
0, y1,
width, 2,
color, color, color, color
);
}
}
renderer.pipelines.postBatch(src);
};
module.exports = GridWebGLRenderer;

84
src/gameobjects/shape/isobox/IsoBoxWebGLRenderer.js
View file

@ -18,18 +18,23 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.IsoBox} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
var IsoBoxWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
if (!src.isFilled)
{
return;
}
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var fillTriNode = src.customRenderNodes.FillTri || src.defaultRenderNodes.FillTri;
var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var size = src.width;
var height = src.height;
@ -39,11 +44,6 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
var alpha = camera.alpha * src.alpha;
if (!src.isFilled)
{
return;
}
var tint;
var x0;
@ -58,28 +58,26 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
var x3;
var y3;
renderer.pipelines.preBatch(src);
// Top Face
if (src.showTop)
{
tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
x0 = calcMatrix.getX(-sizeA, -height);
y0 = calcMatrix.getY(-sizeA, -height);
x0 = -sizeA;
y0 = -height;
x1 = calcMatrix.getX(0, -sizeB - height);
y1 = calcMatrix.getY(0, -sizeB - height);
x1 = 0;
y1 = -sizeB - height;
x2 = calcMatrix.getX(sizeA, -height);
y2 = calcMatrix.getY(sizeA, -height);
x2 = sizeA;
y2 = -height;
x3 = calcMatrix.getX(0, sizeB - height);
y3 = calcMatrix.getY(0, sizeB - height);
x3 = 0;
y3 = sizeB - height;
pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
}
// Left Face
@ -88,19 +86,20 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
{
tint = Utils.getTintAppendFloatAlpha(src.fillLeft, alpha);
x0 = calcMatrix.getX(-sizeA, 0);
y0 = calcMatrix.getY(-sizeA, 0);
x0 = -sizeA;
y0 = 0;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
x3 = calcMatrix.getX(-sizeA, -height);
y3 = calcMatrix.getY(-sizeA, -height);
x3 = -sizeA;
y3 = -height;
pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
}
// Right Face
@ -109,22 +108,21 @@ var IsoBoxWebGLRenderer = function (renderer, src, camera, parentMatrix)
{
tint = Utils.getTintAppendFloatAlpha(src.fillRight, alpha);
x0 = calcMatrix.getX(sizeA, 0);
y0 = calcMatrix.getY(sizeA, 0);
x0 = sizeA;
y0 = 0;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
x3 = calcMatrix.getX(sizeA, -height);
y3 = calcMatrix.getY(sizeA, -height);
x3 = sizeA;
y3 = -height;
pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
}
renderer.pipelines.postBatch(src);
};
module.exports = IsoBoxWebGLRenderer;

97
src/gameobjects/shape/isotriangle/IsoTriangleWebGLRenderer.js
View file

@ -18,18 +18,23 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.IsoTriangle} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
var IsoTriangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
if (!src.isFilled)
{
return;
}
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var fillTriNode = src.customRenderNodes.FillTri || src.defaultRenderNodes.FillTri;
var submitterNode = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var size = src.width;
var height = src.height;
@ -41,13 +46,6 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
var alpha = camera.alpha * src.alpha;
if (!src.isFilled)
{
return;
}
renderer.pipelines.preBatch(src);
var tint;
var x0;
@ -65,19 +63,20 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
{
tint = Utils.getTintAppendFloatAlpha(src.fillTop, alpha);
x0 = calcMatrix.getX(-sizeA, -height);
y0 = calcMatrix.getY(-sizeA, -height);
x0 = -sizeA;
y0 = -height;
x1 = calcMatrix.getX(0, -sizeB - height);
y1 = calcMatrix.getY(0, -sizeB - height);
x1 = 0;
y1 = -sizeB - height;
x2 = calcMatrix.getX(sizeA, -height);
y2 = calcMatrix.getY(sizeA, -height);
x2 = sizeA;
y2 = -height;
var x3 = calcMatrix.getX(0, sizeB - height);
var y3 = calcMatrix.getY(0, sizeB - height);
var x3 = 0;
var y3 = sizeB - height;
pipeline.batchQuad(src, x0, y0, x1, y1, x2, y2, x3, y3, 0, 0, 1, 1, tint, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x2, y2, x3, y3, x0, y0, tint, tint, tint);
}
// Left Face
@ -88,28 +87,28 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
if (reversed)
{
x0 = calcMatrix.getX(-sizeA, -height);
y0 = calcMatrix.getY(-sizeA, -height);
x0 = -sizeA;
y0 = -height;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
}
else
{
x0 = calcMatrix.getX(-sizeA, 0);
y0 = calcMatrix.getY(-sizeA, 0);
x0 = -sizeA;
y0 = 0;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
}
pipeline.batchTri(src, x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
}
// Right Face
@ -120,31 +119,29 @@ var IsoTriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
if (reversed)
{
x0 = calcMatrix.getX(sizeA, -height);
y0 = calcMatrix.getY(sizeA, -height);
x0 = sizeA;
y0 = -height;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
}
else
{
x0 = calcMatrix.getX(sizeA, 0);
y0 = calcMatrix.getY(sizeA, 0);
x0 = sizeA;
y0 = 0;
x1 = calcMatrix.getX(0, sizeB);
y1 = calcMatrix.getY(0, sizeB);
x1 = 0;
y1 = sizeB;
x2 = calcMatrix.getX(0, sizeB - height);
y2 = calcMatrix.getY(0, sizeB - height);
x2 = 0;
y2 = sizeB - height;
}
pipeline.batchTri(src, x0, y0, x1, y1, x2, y2, 0, 0, 1, 1, tint, tint, tint, 2);
fillTriNode.run(drawingContext, calcMatrix, submitterNode, x0, y0, x1, y1, x2, y2, tint, tint, tint);
}
renderer.pipelines.postBatch(src);
};
module.exports = IsoTriangleWebGLRenderer;

54
src/gameobjects/shape/line/LineWebGLRenderer.js
View file

@ -7,6 +7,15 @@
var GetCalcMatrix = require('../../GetCalcMatrix');
var Utils = require('../../../renderer/webgl/Utils');
var tempPath = [
{
x: 0, y: 0, width: 0
},
{
x: 0, y: 0, width: 0
}
];
/**
* Renders this Game Object with the WebGL Renderer to the given Camera.
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@ -18,51 +27,42 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Line} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var LineWebGLRenderer = function (renderer, src, camera, parentMatrix)
var LineWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
if (src.isStroked)
{
var strokeTint = pipeline.strokeTint;
var color = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
strokeTint.TL = color;
strokeTint.TR = color;
strokeTint.BL = color;
strokeTint.BR = color;
tempPath[0].x = src.geom.x1 - dx;
tempPath[0].y = src.geom.y1 - dy;
tempPath[0].width = src._startWidth;
pipeline.batchLine(
src.geom.x1 - dx,
src.geom.y1 - dy,
src.geom.x2 - dx,
src.geom.y2 - dy,
src._startWidth / 2,
src._endWidth / 2,
tempPath[1].x = src.geom.x2 - dx;
tempPath[1].y = src.geom.y2 - dy;
tempPath[1].width = src._endWidth;
(src.customRenderNodes.StrokePath || src.defaultRenderNodes.StrokePath).run(
drawingContext,
src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter,
tempPath,
1,
0,
false,
result.sprite,
result.camera
true,
calcMatrix,
color, color, color, color
);
}
renderer.pipelines.postBatch(src);
};
module.exports = LineWebGLRenderer;

17
src/gameobjects/shape/polygon/PolygonWebGLRenderer.js
View file

@ -22,34 +22,29 @@ var StrokePathWebGL = require('../StrokePathWebGL');
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var PolygonWebGLRenderer = function (renderer, src, camera, parentMatrix)
var PolygonWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
if (src.isFilled)
{
FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = PolygonWebGLRenderer;

40
src/gameobjects/shape/rectangle/RectangleWebGLRenderer.js
View file

@ -19,49 +19,45 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Rectangle} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var RectangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
var RectangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var customRenderNodes = this.customRenderNodes;
var defaultRenderNodes = this.defaultRenderNodes;
var submitter = customRenderNodes.Submitter || defaultRenderNodes.Submitter;
if (src.isFilled)
{
var fillTint = pipeline.fillTint;
var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
fillTint.TL = fillTintColor;
fillTint.TR = fillTintColor;
fillTint.BL = fillTintColor;
fillTint.BR = fillTintColor;
pipeline.batchFillRect(
-dx,
-dy,
src.width,
src.height
(customRenderNodes.FillRect || defaultRenderNodes.FillRect).run(
drawingContext,
calcMatrix,
submitter,
-dx, -dy,
src.width, src.height,
fillTintColor,
fillTintColor,
fillTintColor,
fillTintColor
);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = RectangleWebGLRenderer;

19
src/gameobjects/shape/star/StarWebGLRenderer.js
View file

@ -19,37 +19,32 @@ var StrokePathWebGL = require('../StrokePathWebGL');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Star} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var StarWebGLRenderer = function (renderer, src, camera, parentMatrix)
var StarWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
var calcMatrix = pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var submitter = src.customRenderNodes.Submitter || src.defaultRenderNodes.Submitter;
if (src.isFilled)
{
FillPathWebGL(pipeline, calcMatrix, src, alpha, dx, dy);
FillPathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = StarWebGLRenderer;

35
src/gameobjects/shape/triangle/TriangleWebGLRenderer.js
View file

@ -19,35 +19,28 @@ var Utils = require('../../../renderer/webgl/Utils');
*
* @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
* @param {Phaser.GameObjects.Triangle} src - The Game Object being rendered in this call.
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
* @param {Phaser.Renderer.WebGL.DrawingContext} drawingContext - The current drawing context.
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
*/
var TriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
var TriangleWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
{
var camera = drawingContext.camera;
camera.addToRenderList(src);
var pipeline = renderer.pipelines.set(src.pipeline);
var result = GetCalcMatrix(src, camera, parentMatrix);
pipeline.calcMatrix.copyFrom(result.calc);
var calcMatrix = GetCalcMatrix(src, camera, parentMatrix).calc;
var dx = src._displayOriginX;
var dy = src._displayOriginY;
var alpha = camera.alpha * src.alpha;
renderer.pipelines.preBatch(src);
var customRenderNodes = this.customRenderNodes;
var defaultRenderNodes = this.defaultRenderNodes;
var submitter = customRenderNodes.Submitter || defaultRenderNodes.Submitter;
if (src.isFilled)
{
var fillTint = pipeline.fillTint;
var fillTintColor = Utils.getTintAppendFloatAlpha(src.fillColor, src.fillAlpha * alpha);
fillTint.TL = fillTintColor;
fillTint.TR = fillTintColor;
fillTint.BL = fillTintColor;
fillTint.BR = fillTintColor;
var x1 = src.geom.x1 - dx;
var y1 = src.geom.y1 - dy;
var x2 = src.geom.x2 - dx;
@ -55,24 +48,26 @@ var TriangleWebGLRenderer = function (renderer, src, camera, parentMatrix)
var x3 = src.geom.x3 - dx;
var y3 = src.geom.y3 - dy;
pipeline.batchFillTriangle(
(customRenderNodes.FillTri || defaultRenderNodes.FillTri).run(
drawingContext,
calcMatrix,
submitter,
x1,
y1,
x2,
y2,
x3,
y3,
result.sprite,
result.camera
fillTintColor,
fillTintColor,
fillTintColor
);
}
if (src.isStroked)
{
StrokePathWebGL(pipeline, src, alpha, dx, dy);
StrokePathWebGL(drawingContext, submitter, calcMatrix, src, alpha, dx, dy);
}
renderer.pipelines.postBatch(src);
};
module.exports = TriangleWebGLRenderer;