Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2025-02-17 06:28:30 +00:00
Code Issues Projects Releases Packages Wiki Activity

Internal Transform Stack for Graphics

Browse source
This commit is contained in:
Felipe Alfonso 2017-05-08 17:13:48 -03:00
parent e9eefa6314
commit 6511b4b0d5
5 changed files with 200 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
v3/src/gameobjects/graphics/Commands.js
View file

@ -12,5 +12,10 @@ module.exports = {
FILL_TRIANGLE: 10,
STROKE_TRIANGLE: 11,
LINE_FX_TO: 12,
MOVE_FX_TO: 13
MOVE_FX_TO: 13,
SAVE: 14,
RESTORE: 15,
TRANSLATE: 16,
SCALE: 17,
ROTATE: 18
};

38
v3/src/gameobjects/graphics/Graphics.js
View file

@ -315,6 +315,44 @@ var Graphics = new Class({
return this;
},
save: function () {
this.commandBuffer.push(
Commands.SAVE
);
return this;
},
restore: function () {
this.commandBuffer.push(
Commands.RESTORE
);
return this;
},
translate: function (x, y) {
this.commandBuffer.push(
Commands.TRANSLATE,
x, y
);
return this;
},
scale: function (x, y) {
this.commandBuffer.push(
Commands.SCALE,
x, y
);
return this;
},
rotate: function (radian) {
this.commandBuffer.push(
Commands.ROTATE,
radian
);
return this;
},
clear: function ()
{
this.commandBuffer.length = 0;

31
v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js
View file

@ -174,6 +174,37 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
index += 5;
break;
case Commands.SAVE:
ctx.save();
break;
case Commands.RESTORE:
ctx.restore();
break;
case Commands.TRANSLATE:
ctx.translate(
commandBuffer[index + 1],
commandBuffer[index + 2]
);
index += 2;
break;
case Commands.SCALE:
ctx.scale(
commandBuffer[index + 1],
commandBuffer[index + 2]
);
index += 2;
break;
case Commands.ROTATE:
ctx.rotate(
commandBuffer[index + 1]
);
index += 1;
break;
default:
console.error('Phaser: Invalid Graphics Command ID ' + commandID);
break;

67
v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js
View file

@ -5,6 +5,9 @@ var cos = Math.cos;
var sin = Math.sin;
var sqrt = Math.sqrt;
var tempMatrix = new TransformMatrix();
var matrixStack = new Float32Array(6 * 1000);
var matrixStackLength = 0;
var currentMatrix = new TransformMatrix();
var Point = function (x, y, width, rgb, alpha)
{
@ -175,7 +178,8 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
fillColor,
fillAlpha,
/* Transform */
mva, mvb, mvc, mvd, mve, mvf
mva, mvb, mvc, mvd, mve, mvf,
currentMatrix
);
}
break;
@ -196,7 +200,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
lineAlpha,
/* Transform */
mva, mvb, mvc, mvd, mve, mvf,
path === this._lastPath
path === this._lastPath,
currentMatrix
);
}
break;
@ -213,7 +219,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
fillColor,
fillAlpha,
/* Transform */
mva, mvb, mvc, mvd, mve, mvf
mva, mvb, mvc, mvd, mve, mvf,
currentMatrix
);
cmdIndex += 4;
@ -233,7 +241,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
fillColor,
fillAlpha,
/* Transform */
mva, mvb, mvc, mvd, mve, mvf
mva, mvb, mvc, mvd, mve, mvf,
currentMatrix
);
cmdIndex += 6;
@ -254,7 +264,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
lineColor,
lineAlpha,
/* Transform */
mva, mvb, mvc, mvd, mve, mvf
mva, mvb, mvc, mvd, mve, mvf,
currentMatrix
);
cmdIndex += 6;
@ -316,12 +328,55 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
cmdIndex += 5;
break;
case Commands.SAVE:
matrixStack[matrixStackLength + 0] = currentMatrix.matrix[0];
matrixStack[matrixStackLength + 1] = currentMatrix.matrix[1];
matrixStack[matrixStackLength + 2] = currentMatrix.matrix[2];
matrixStack[matrixStackLength + 3] = currentMatrix.matrix[3];
matrixStack[matrixStackLength + 4] = currentMatrix.matrix[4];
matrixStack[matrixStackLength + 5] = currentMatrix.matrix[5];
matrixStackLength += 6;
break;
case Commands.RESTORE:
matrixStackLength -= 6;
currentMatrix.matrix[0] = matrixStack[matrixStackLength + 0];
currentMatrix.matrix[1] = matrixStack[matrixStackLength + 1];
currentMatrix.matrix[2] = matrixStack[matrixStackLength + 2];
currentMatrix.matrix[3] = matrixStack[matrixStackLength + 3];
currentMatrix.matrix[4] = matrixStack[matrixStackLength + 4];
currentMatrix.matrix[5] = matrixStack[matrixStackLength + 5];
break;
case Commands.TRANSLATE:
currentMatrix.translate(
commandBuffer[cmdIndex + 1],
commandBuffer[cmdIndex + 2]
);
cmdIndex += 2;
break;
case Commands.SCALE:
currentMatrix.scale(
commandBuffer[cmdIndex + 1],
commandBuffer[cmdIndex + 2]
);
cmdIndex += 2;
break;
case Commands.ROTATE:
currentMatrix.rotate(
-commandBuffer[cmdIndex + 1]
);
cmdIndex += 1;
break;
default:
console.error('Phaser: Invalid Graphics Command ID ' + cmd);
break;
}
}
currentMatrix.loadIdentity();
pathArray.length = 0;
};

72
v3/src/renderer/webgl/renderers/shapebatch/ShapeBatch.js
View file

@ -146,7 +146,8 @@ ShapeBatch.prototype = {
/* line properties */
ax, ay, bx, by, aLineWidth, bLineWidth, aLineColor, bLineColor, lineAlpha,
/* transform */
a, b, c, d, e, f
a1, b1, c1, d1, e1, f1,
currentMatrix
) {
if (this.vertexCount + 6 > this.maxVertices)
{
@ -155,6 +156,18 @@ ShapeBatch.prototype = {
this.vertexCount += 6;
var a0 = currentMatrix.matrix[0];
var b0 = currentMatrix.matrix[1];
var c0 = currentMatrix.matrix[2];
var d0 = currentMatrix.matrix[3];
var e0 = currentMatrix.matrix[4];
var f0 = currentMatrix.matrix[5];
var a = a1 * a0 + b1 * c0;
var b = a1 * b0 + b1 * d0;
var c = c1 * a0 + d1 * c0;
var d = c1 * b0 + d1 * d0;
var e = e1 * a0 + f1 * c0 + e0;
var f = e1 * b0 + f1 * d0 + f0;
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
@ -225,7 +238,8 @@ ShapeBatch.prototype = {
/* transform */
a, b, c, d, e, f,
/* is last connection */
isLastPath
isLastPath,
currentMatrix
) {
var point0, point1;
var pathLength = path.length;
@ -249,7 +263,8 @@ ShapeBatch.prototype = {
point1.x, point1.y,
point0.width / 2, point1.width / 2,
point0.rgb, point1.rgb, lineAlpha,
a, b, c, d, e, f
a, b, c, d, e, f,
currentMatrix
);
polylines.push(line);
}
@ -309,7 +324,8 @@ ShapeBatch.prototype = {
/* Path properties */
path, fillColor, fillAlpha,
/* transform */
a, b, c, d, e, f
a1, b1, c1, d1, e1, f1,
currentMatrix
) {
var length = path.length;
var polygonCache = this.polygonCache;
@ -324,6 +340,18 @@ ShapeBatch.prototype = {
var vertexBufferU32 = vertexDataBuffer.uintView;
var x0, y0, x1, y1, x2, y2;
var tx0, ty0, tx1, ty1, tx2, ty2;
var a0 = currentMatrix.matrix[0];
var b0 = currentMatrix.matrix[1];
var c0 = currentMatrix.matrix[2];
var d0 = currentMatrix.matrix[3];
var e0 = currentMatrix.matrix[4];
var f0 = currentMatrix.matrix[5];
var a = a1 * a0 + b1 * c0;
var b = a1 * b0 + b1 * d0;
var c = c1 * a0 + d1 * c0;
var d = c1 * b0 + d1 * d0;
var e = e1 * a0 + f1 * c0 + e0;
var f = e1 * b0 + f1 * d0 + f0;
for (var pathIndex = 0; pathIndex < length; ++pathIndex)
{
@ -388,7 +416,8 @@ ShapeBatch.prototype = {
/* Rectangle properties */
x, y, width, height, fillColor, fillAlpha,
/* transform */
a, b, c, d, e, f
a1, b1, c1, d1, e1, f1,
currentMatrix
) {
if (this.vertexCount + 6 > this.maxVertices)
{
@ -400,6 +429,18 @@ ShapeBatch.prototype = {
var vertexOffset = vertexDataBuffer.allocate(24);
var xw = x + width;
var yh = y + height;
var a0 = currentMatrix.matrix[0];
var b0 = currentMatrix.matrix[1];
var c0 = currentMatrix.matrix[2];
var d0 = currentMatrix.matrix[3];
var e0 = currentMatrix.matrix[4];
var f0 = currentMatrix.matrix[5];
var a = a1 * a0 + b1 * c0;
var b = a1 * b0 + b1 * d0;
var c = c1 * a0 + d1 * c0;
var d = c1 * b0 + d1 * d0;
var e = e1 * a0 + f1 * c0 + e0;
var f = e1 * b0 + f1 * d0 + f0;
var tx0 = x * a + y * c + e;
var ty0 = x * b + y * d + f;
var tx1 = x * a + yh * c + e;
@ -448,12 +489,25 @@ ShapeBatch.prototype = {
/* Triangle properties */
x0, y0, x1, y1, x2, y2, fillColor, fillAlpha,
/* transform */
a, b, c, d, e, f
a1, b1, c1, d1, e1, f1,
currentMatrix
) {
if (this.vertexCount + 3 > this.maxVertices)
{
this.flush();
}
var a0 = currentMatrix.matrix[0];
var b0 = currentMatrix.matrix[1];
var c0 = currentMatrix.matrix[2];
var d0 = currentMatrix.matrix[3];
var e0 = currentMatrix.matrix[4];
var f0 = currentMatrix.matrix[5];
var a = a1 * a0 + b1 * c0;
var b = a1 * b0 + b1 * d0;
var c = c1 * a0 + d1 * c0;
var d = c1 * b0 + d1 * d0;
var e = e1 * a0 + f1 * c0 + e0;
var f = e1 * b0 + f1 * d0 + f0;
var vertexDataBuffer = this.vertexDataBuffer;
var vertexBufferF32 = vertexDataBuffer.floatView;
var vertexBufferU32 = vertexDataBuffer.uintView;
@ -489,7 +543,8 @@ ShapeBatch.prototype = {
/* Triangle properties */
x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha,
/* transform */
a, b, c, d, e, f
a, b, c, d, e, f,
currentMatrix
) {
var tempTriangle = this.tempTriangle;
@ -517,7 +572,8 @@ ShapeBatch.prototype = {
this.addStrokePath(
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
tempTriangle, lineWidth, lineColor, lineAlpha,
a, b, c, d, e, f
a, b, c, d, e, f,
currentMatrix
);
}
};