Skip to content

Commit 6511b4b

Browse files
bitnenferbitnenfer
committed
Internal Transform Stack for Graphics
1 parent e9eefa6 commit 6511b4b

5 files changed

Lines changed: 200 additions & 15 deletions

File tree

‎v3/src/gameobjects/graphics/Commands.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,10 @@ module.exports = {
1212
FILL_TRIANGLE: 10,
1313
STROKE_TRIANGLE: 11,
1414
LINE_FX_TO: 12,
15-
MOVE_FX_TO: 13
15+
MOVE_FX_TO: 13,
16+
SAVE: 14,
17+
RESTORE: 15,
18+
TRANSLATE: 16,
19+
SCALE: 17,
20+
ROTATE: 18
1621
};

‎v3/src/gameobjects/graphics/Graphics.js‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -315,6 +315,44 @@ var Graphics = new Class({
315315
return this;
316316
},
317317

318+
save: function () {
319+
this.commandBuffer.push(
320+
Commands.SAVE
321+
);
322+
return this;
323+
},
324+
325+
restore: function () {
326+
this.commandBuffer.push(
327+
Commands.RESTORE
328+
);
329+
return this;
330+
},
331+
332+
translate: function (x, y) {
333+
this.commandBuffer.push(
334+
Commands.TRANSLATE,
335+
x, y
336+
);
337+
return this;
338+
},
339+
340+
scale: function (x, y) {
341+
this.commandBuffer.push(
342+
Commands.SCALE,
343+
x, y
344+
);
345+
return this;
346+
},
347+
348+
rotate: function (radian) {
349+
this.commandBuffer.push(
350+
Commands.ROTATE,
351+
radian
352+
);
353+
return this;
354+
},
355+
318356
clear: function ()
319357
{
320358
this.commandBuffer.length = 0;

‎v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,37 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
174174
index += 5;
175175
break;
176176

177+
case Commands.SAVE:
178+
ctx.save();
179+
break;
180+
181+
case Commands.RESTORE:
182+
ctx.restore();
183+
break;
184+
185+
case Commands.TRANSLATE:
186+
ctx.translate(
187+
commandBuffer[index + 1],
188+
commandBuffer[index + 2]
189+
);
190+
index += 2;
191+
break;
192+
193+
case Commands.SCALE:
194+
ctx.scale(
195+
commandBuffer[index + 1],
196+
commandBuffer[index + 2]
197+
);
198+
index += 2;
199+
break;
200+
201+
case Commands.ROTATE:
202+
ctx.rotate(
203+
commandBuffer[index + 1]
204+
);
205+
index += 1;
206+
break;
207+
177208
default:
178209
console.error('Phaser: Invalid Graphics Command ID ' + commandID);
179210
break;

‎v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js‎

Lines changed: 61 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ var cos = Math.cos;
55
var sin = Math.sin;
66
var sqrt = Math.sqrt;
77
var tempMatrix = new TransformMatrix();
8+
var matrixStack = new Float32Array(6 * 1000);
9+
var matrixStackLength = 0;
10+
var currentMatrix = new TransformMatrix();
811

912
var Point = function (x, y, width, rgb, alpha)
1013
{
@@ -175,7 +178,8 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
175178
fillColor,
176179
fillAlpha,
177180
/* Transform */
178-
mva, mvb, mvc, mvd, mve, mvf
181+
mva, mvb, mvc, mvd, mve, mvf,
182+
currentMatrix
179183
);
180184
}
181185
break;
@@ -196,7 +200,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
196200
lineAlpha,
197201
/* Transform */
198202
mva, mvb, mvc, mvd, mve, mvf,
199-
path === this._lastPath
203+
path === this._lastPath,
204+
currentMatrix
205+
200206
);
201207
}
202208
break;
@@ -213,7 +219,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
213219
fillColor,
214220
fillAlpha,
215221
/* Transform */
216-
mva, mvb, mvc, mvd, mve, mvf
222+
mva, mvb, mvc, mvd, mve, mvf,
223+
currentMatrix
224+
217225
);
218226

219227
cmdIndex += 4;
@@ -233,7 +241,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
233241
fillColor,
234242
fillAlpha,
235243
/* Transform */
236-
mva, mvb, mvc, mvd, mve, mvf
244+
mva, mvb, mvc, mvd, mve, mvf,
245+
currentMatrix
246+
237247
);
238248

239249
cmdIndex += 6;
@@ -254,7 +264,9 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
254264
lineColor,
255265
lineAlpha,
256266
/* Transform */
257-
mva, mvb, mvc, mvd, mve, mvf
267+
mva, mvb, mvc, mvd, mve, mvf,
268+
currentMatrix
269+
258270
);
259271

260272
cmdIndex += 6;
@@ -316,12 +328,55 @@ var GraphicsWebGLRenderer = function (renderer, gameObject, interpolationPercent
316328
cmdIndex += 5;
317329
break;
318330

331+
case Commands.SAVE:
332+
matrixStack[matrixStackLength + 0] = currentMatrix.matrix[0];
333+
matrixStack[matrixStackLength + 1] = currentMatrix.matrix[1];
334+
matrixStack[matrixStackLength + 2] = currentMatrix.matrix[2];
335+
matrixStack[matrixStackLength + 3] = currentMatrix.matrix[3];
336+
matrixStack[matrixStackLength + 4] = currentMatrix.matrix[4];
337+
matrixStack[matrixStackLength + 5] = currentMatrix.matrix[5];
338+
matrixStackLength += 6;
339+
break;
340+
341+
case Commands.RESTORE:
342+
matrixStackLength -= 6;
343+
currentMatrix.matrix[0] = matrixStack[matrixStackLength + 0];
344+
currentMatrix.matrix[1] = matrixStack[matrixStackLength + 1];
345+
currentMatrix.matrix[2] = matrixStack[matrixStackLength + 2];
346+
currentMatrix.matrix[3] = matrixStack[matrixStackLength + 3];
347+
currentMatrix.matrix[4] = matrixStack[matrixStackLength + 4];
348+
currentMatrix.matrix[5] = matrixStack[matrixStackLength + 5];
349+
break;
350+
351+
case Commands.TRANSLATE:
352+
currentMatrix.translate(
353+
commandBuffer[cmdIndex + 1],
354+
commandBuffer[cmdIndex + 2]
355+
);
356+
cmdIndex += 2;
357+
break;
358+
359+
case Commands.SCALE:
360+
currentMatrix.scale(
361+
commandBuffer[cmdIndex + 1],
362+
commandBuffer[cmdIndex + 2]
363+
);
364+
cmdIndex += 2;
365+
break;
366+
367+
case Commands.ROTATE:
368+
currentMatrix.rotate(
369+
-commandBuffer[cmdIndex + 1]
370+
);
371+
cmdIndex += 1;
372+
break;
373+
319374
default:
320375
console.error('Phaser: Invalid Graphics Command ID ' + cmd);
321376
break;
322377
}
323378
}
324-
379+
currentMatrix.loadIdentity();
325380
pathArray.length = 0;
326381
};
327382

‎v3/src/renderer/webgl/renderers/shapebatch/ShapeBatch.js‎

Lines changed: 64 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,8 @@ ShapeBatch.prototype = {
146146
/* line properties */
147147
ax, ay, bx, by, aLineWidth, bLineWidth, aLineColor, bLineColor, lineAlpha,
148148
/* transform */
149-
a, b, c, d, e, f
149+
a1, b1, c1, d1, e1, f1,
150+
currentMatrix
150151
) {
151152
if (this.vertexCount + 6 > this.maxVertices)
152153
{
@@ -155,6 +156,18 @@ ShapeBatch.prototype = {
155156

156157
this.vertexCount += 6;
157158

159+
var a0 = currentMatrix.matrix[0];
160+
var b0 = currentMatrix.matrix[1];
161+
var c0 = currentMatrix.matrix[2];
162+
var d0 = currentMatrix.matrix[3];
163+
var e0 = currentMatrix.matrix[4];
164+
var f0 = currentMatrix.matrix[5];
165+
var a = a1 * a0 + b1 * c0;
166+
var b = a1 * b0 + b1 * d0;
167+
var c = c1 * a0 + d1 * c0;
168+
var d = c1 * b0 + d1 * d0;
169+
var e = e1 * a0 + f1 * c0 + e0;
170+
var f = e1 * b0 + f1 * d0 + f0;
158171
var vertexDataBuffer = this.vertexDataBuffer;
159172
var vertexBufferF32 = vertexDataBuffer.floatView;
160173
var vertexBufferU32 = vertexDataBuffer.uintView;
@@ -225,7 +238,8 @@ ShapeBatch.prototype = {
225238
/* transform */
226239
a, b, c, d, e, f,
227240
/* is last connection */
228-
isLastPath
241+
isLastPath,
242+
currentMatrix
229243
) {
230244
var point0, point1;
231245
var pathLength = path.length;
@@ -249,7 +263,8 @@ ShapeBatch.prototype = {
249263
point1.x, point1.y,
250264
point0.width / 2, point1.width / 2,
251265
point0.rgb, point1.rgb, lineAlpha,
252-
a, b, c, d, e, f
266+
a, b, c, d, e, f,
267+
currentMatrix
253268
);
254269
polylines.push(line);
255270
}
@@ -309,7 +324,8 @@ ShapeBatch.prototype = {
309324
/* Path properties */
310325
path, fillColor, fillAlpha,
311326
/* transform */
312-
a, b, c, d, e, f
327+
a1, b1, c1, d1, e1, f1,
328+
currentMatrix
313329
) {
314330
var length = path.length;
315331
var polygonCache = this.polygonCache;
@@ -324,6 +340,18 @@ ShapeBatch.prototype = {
324340
var vertexBufferU32 = vertexDataBuffer.uintView;
325341
var x0, y0, x1, y1, x2, y2;
326342
var tx0, ty0, tx1, ty1, tx2, ty2;
343+
var a0 = currentMatrix.matrix[0];
344+
var b0 = currentMatrix.matrix[1];
345+
var c0 = currentMatrix.matrix[2];
346+
var d0 = currentMatrix.matrix[3];
347+
var e0 = currentMatrix.matrix[4];
348+
var f0 = currentMatrix.matrix[5];
349+
var a = a1 * a0 + b1 * c0;
350+
var b = a1 * b0 + b1 * d0;
351+
var c = c1 * a0 + d1 * c0;
352+
var d = c1 * b0 + d1 * d0;
353+
var e = e1 * a0 + f1 * c0 + e0;
354+
var f = e1 * b0 + f1 * d0 + f0;
327355

328356
for (var pathIndex = 0; pathIndex < length; ++pathIndex)
329357
{
@@ -388,7 +416,8 @@ ShapeBatch.prototype = {
388416
/* Rectangle properties */
389417
x, y, width, height, fillColor, fillAlpha,
390418
/* transform */
391-
a, b, c, d, e, f
419+
a1, b1, c1, d1, e1, f1,
420+
currentMatrix
392421
) {
393422
if (this.vertexCount + 6 > this.maxVertices)
394423
{
@@ -400,6 +429,18 @@ ShapeBatch.prototype = {
400429
var vertexOffset = vertexDataBuffer.allocate(24);
401430
var xw = x + width;
402431
var yh = y + height;
432+
var a0 = currentMatrix.matrix[0];
433+
var b0 = currentMatrix.matrix[1];
434+
var c0 = currentMatrix.matrix[2];
435+
var d0 = currentMatrix.matrix[3];
436+
var e0 = currentMatrix.matrix[4];
437+
var f0 = currentMatrix.matrix[5];
438+
var a = a1 * a0 + b1 * c0;
439+
var b = a1 * b0 + b1 * d0;
440+
var c = c1 * a0 + d1 * c0;
441+
var d = c1 * b0 + d1 * d0;
442+
var e = e1 * a0 + f1 * c0 + e0;
443+
var f = e1 * b0 + f1 * d0 + f0;
403444
var tx0 = x * a + y * c + e;
404445
var ty0 = x * b + y * d + f;
405446
var tx1 = x * a + yh * c + e;
@@ -448,12 +489,25 @@ ShapeBatch.prototype = {
448489
/* Triangle properties */
449490
x0, y0, x1, y1, x2, y2, fillColor, fillAlpha,
450491
/* transform */
451-
a, b, c, d, e, f
492+
a1, b1, c1, d1, e1, f1,
493+
currentMatrix
452494
) {
453495
if (this.vertexCount + 3 > this.maxVertices)
454496
{
455497
this.flush();
456498
}
499+
var a0 = currentMatrix.matrix[0];
500+
var b0 = currentMatrix.matrix[1];
501+
var c0 = currentMatrix.matrix[2];
502+
var d0 = currentMatrix.matrix[3];
503+
var e0 = currentMatrix.matrix[4];
504+
var f0 = currentMatrix.matrix[5];
505+
var a = a1 * a0 + b1 * c0;
506+
var b = a1 * b0 + b1 * d0;
507+
var c = c1 * a0 + d1 * c0;
508+
var d = c1 * b0 + d1 * d0;
509+
var e = e1 * a0 + f1 * c0 + e0;
510+
var f = e1 * b0 + f1 * d0 + f0;
457511
var vertexDataBuffer = this.vertexDataBuffer;
458512
var vertexBufferF32 = vertexDataBuffer.floatView;
459513
var vertexBufferU32 = vertexDataBuffer.uintView;
@@ -489,7 +543,8 @@ ShapeBatch.prototype = {
489543
/* Triangle properties */
490544
x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha,
491545
/* transform */
492-
a, b, c, d, e, f
546+
a, b, c, d, e, f,
547+
currentMatrix
493548
) {
494549
var tempTriangle = this.tempTriangle;
495550

@@ -517,7 +572,8 @@ ShapeBatch.prototype = {
517572
this.addStrokePath(
518573
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
519574
tempTriangle, lineWidth, lineColor, lineAlpha,
520-
a, b, c, d, e, f
575+
a, b, c, d, e, f,
576+
currentMatrix
521577
);
522578
}
523579
};

0 commit comments

Comments
 (0)