Skip to content

Commit b8f0b33

Browse files
bitnenferbitnenfer
committed
Added fillTriangle and strokeTriangle to Graphics Game Object
1 parent 2966c68 commit b8f0b33

6 files changed

Lines changed: 167 additions & 12 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,6 @@ module.exports = {
99
FILL_STYLE: 7,
1010
FILL_PATH: 8,
1111
STROKE_PATH: 9,
12+
FILL_TRIANGLE: 10,
13+
STROKE_TRIANGLE: 11
1214
};

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,14 @@ var Graphics = new Class({
9696
);
9797
},
9898

99+
fillTriangle: function (x0, y0, x1, y1, x2, y2)
100+
{
101+
this.commandBuffer.push(
102+
Commands.FILL_TRIANGLE,
103+
x0, y0, x1, y1, x2, y2
104+
);
105+
},
106+
99107
strokeCircle: function (x, y, radius)
100108
{
101109
this.beginPath();
@@ -116,6 +124,14 @@ var Graphics = new Class({
116124
this.closePath();
117125
},
118126

127+
strokeTriangle: function (x0, y0, x1, y1, x2, y2)
128+
{
129+
this.commandBuffer.push(
130+
Commands.STROKE_TRIANGLE,
131+
x0, y0, x1, y1, x2, y2
132+
);
133+
},
134+
119135
lineTo: function (x, y)
120136
{
121137
this.commandBuffer.push(

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

Lines changed: 34 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -76,12 +76,23 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
7676
lineWidth = commandBuffer[index + 1];
7777
lineColor = commandBuffer[index + 2];
7878
lineAlpha = commandBuffer[index + 3];
79+
red = ((lineColor & 0xFF0000) >>> 16);
80+
green = ((lineColor & 0xFF00) >>> 8);
81+
blue = (lineColor & 0xFF);
82+
ctx.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
83+
ctx.globalAlpha = fillAlpha;
84+
ctx.lineWidth = lineWidth;
7985
index += 3;
8086
break;
8187

8288
case Commands.FILL_STYLE:
8389
fillColor = commandBuffer[index + 1];
8490
fillAlpha = commandBuffer[index + 2];
91+
red = ((fillColor & 0xFF0000) >>> 16);
92+
green = ((fillColor & 0xFF00) >>> 8);
93+
blue = (fillColor & 0xFF);
94+
ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
95+
ctx.globalAlpha = fillAlpha;
8596
index += 2;
8697
break;
8798

@@ -94,21 +105,10 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
94105
break;
95106

96107
case Commands.FILL_PATH:
97-
red = ((fillColor & 0xFF0000) >>> 16);
98-
green = ((fillColor & 0xFF00) >>> 8);
99-
blue = (fillColor & 0xFF);
100-
ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
101-
ctx.globalAlpha = fillAlpha;
102108
ctx.fill();
103109
break;
104110

105111
case Commands.STROKE_PATH:
106-
red = ((lineColor & 0xFF0000) >>> 16);
107-
green = ((lineColor & 0xFF00) >>> 8);
108-
blue = (lineColor & 0xFF);
109-
ctx.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')';
110-
ctx.globalAlpha = fillAlpha;
111-
ctx.lineWidth = lineWidth;
112112
ctx.stroke();
113113
break;
114114

@@ -121,6 +121,29 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c
121121
);
122122
index += 4;
123123
break;
124+
125+
case Commands.FILL_TRIANGLE:
126+
ctx.beginPath();
127+
ctx.moveTo(commandBuffer[index + 1], commandBuffer[index + 2]);
128+
ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]);
129+
ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]);
130+
ctx.lineTo(commandBuffer[index + 1], commandBuffer[index + 2]);
131+
ctx.closePath();
132+
ctx.fill();
133+
index += 6;
134+
break;
135+
136+
case Commands.STROKE_TRIANGLE:
137+
ctx.beginPath();
138+
ctx.moveTo(commandBuffer[index + 1], commandBuffer[index + 2]);
139+
ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]);
140+
ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]);
141+
ctx.lineTo(commandBuffer[index + 1], commandBuffer[index + 2]);
142+
ctx.closePath();
143+
ctx.stroke();
144+
index += 6;
145+
break;
146+
124147
case Commands.LINE_TO:
125148
ctx.lineTo(
126149
commandBuffer[index + 1],

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,47 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca
213213
cmdIndex += 4;
214214
break;
215215

216+
case Commands.FILL_TRIANGLE:
217+
shapeBatch.addFillTriangle(
218+
/* Graphics Game Object Properties */
219+
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
220+
/* Triangle properties */
221+
commandBuffer[cmdIndex + 1] - cameraScrollX,
222+
commandBuffer[cmdIndex + 2] - cameraScrollY,
223+
commandBuffer[cmdIndex + 3] - cameraScrollX,
224+
commandBuffer[cmdIndex + 4] - cameraScrollY,
225+
commandBuffer[cmdIndex + 5] - cameraScrollX,
226+
commandBuffer[cmdIndex + 6] - cameraScrollY,
227+
fillColor,
228+
fillAlpha,
229+
/* Transform */
230+
mva, mvb, mvc, mvd, mve, mvf
231+
);
232+
233+
cmdIndex += 6;
234+
break;
235+
236+
case Commands.STROKE_TRIANGLE:
237+
shapeBatch.addStrokeTriangle(
238+
/* Graphics Game Object Properties */
239+
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
240+
/* Triangle properties */
241+
commandBuffer[cmdIndex + 1] - cameraScrollX,
242+
commandBuffer[cmdIndex + 2] - cameraScrollY,
243+
commandBuffer[cmdIndex + 3] - cameraScrollX,
244+
commandBuffer[cmdIndex + 4] - cameraScrollY,
245+
commandBuffer[cmdIndex + 5] - cameraScrollX,
246+
commandBuffer[cmdIndex + 6] - cameraScrollY,
247+
lineWidth,
248+
lineColor,
249+
lineAlpha,
250+
/* Transform */
251+
mva, mvb, mvc, mvd, mve, mvf
252+
);
253+
254+
cmdIndex += 6;
255+
break
256+
216257
case Commands.LINE_TO:
217258
if (lastPath !== null)
218259
{

‎v3/src/renderer/webgl/batches/shape/ShapeBatch.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,12 @@ var ShapeBatch = function (game, gl, manager)
2727
this.vertexDataBuffer = null;
2828
this.vertexCount = 0;
2929
this.viewMatrixLocation = null;
30+
this.tempTriangle = [
31+
{x: 0, y: 0},
32+
{x: 0, y: 0},
33+
{x: 0, y: 0},
34+
{x: 0, y: 0}
35+
];
3036

3137
// All of these settings will be able to be controlled via the Game Config
3238
this.config = {
@@ -523,6 +529,73 @@ ShapeBatch.prototype = {
523529
vertexBufferF32[vertexOffset++] = fillAlpha;
524530

525531
this.vertexCount += 6;
532+
},
533+
534+
addFillTriangle: function (
535+
/* Graphics Game Object properties */
536+
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
537+
/* Triangle properties */
538+
x0, y0, x1, y1, x2, y2, fillColor, fillAlpha,
539+
/* transform */
540+
a, b, c, d, e, f
541+
) {
542+
if (this.vertexCount + 3 > this.maxVertices)
543+
{
544+
this.flush();
545+
}
546+
var vertexDataBuffer = this.vertexDataBuffer;
547+
var vertexBufferF32 = vertexDataBuffer.floatView;
548+
var vertexBufferU32 = vertexDataBuffer.uintView;
549+
var vertexOffset = vertexDataBuffer.allocate(12);
550+
var tx0 = x0 * a + y0 * c + e;
551+
var ty0 = x0 * b + y0 * d + f;
552+
var tx1 = x1 * a + y1 * c + e;
553+
var ty1 = x1 * b + y1 * d + f;
554+
var tx2 = x2 * a + y2 * c + e;
555+
var ty2 = x2 * b + y2 * d + f;
556+
557+
vertexBufferF32[vertexOffset++] = tx0;
558+
vertexBufferF32[vertexOffset++] = ty0;
559+
vertexBufferU32[vertexOffset++] = fillColor;
560+
vertexBufferF32[vertexOffset++] = fillAlpha;
561+
562+
vertexBufferF32[vertexOffset++] = tx1;
563+
vertexBufferF32[vertexOffset++] = ty1;
564+
vertexBufferU32[vertexOffset++] = fillColor;
565+
vertexBufferF32[vertexOffset++] = fillAlpha;
566+
567+
vertexBufferF32[vertexOffset++] = tx2;
568+
vertexBufferF32[vertexOffset++] = ty2;
569+
vertexBufferU32[vertexOffset++] = fillColor;
570+
vertexBufferF32[vertexOffset++] = fillAlpha;
571+
572+
this.vertexCount += 3;
573+
},
574+
575+
addStrokeTriangle: function (
576+
/* Graphics Game Object properties */
577+
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
578+
/* Triangle properties */
579+
x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha,
580+
/* transform */
581+
a, b, c, d, e, f
582+
) {
583+
var tempTriangle = this.tempTriangle;
584+
585+
tempTriangle[0].x = x0;
586+
tempTriangle[0].y = y0;
587+
tempTriangle[1].x = x1;
588+
tempTriangle[1].y = y1;
589+
tempTriangle[2].x = x2;
590+
tempTriangle[2].y = y2;
591+
tempTriangle[3].x = x0;
592+
tempTriangle[3].y = y0;
593+
594+
this.addStrokePath(
595+
srcX, srcY, srcScaleX, srcScaleY, srcRotation,
596+
tempTriangle, lineWidth, lineColor, lineAlpha,
597+
a, b, c, d, e, f
598+
);
526599
}
527600
};
528601

‎v3/src/renderer/webgl/batches/shape/const.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ var CONST = {
99
SHAPE_VERTEX_COMPONENT_COUNT: 4,
1010

1111
// Can't be bigger than 10,000 since index are 16-bit
12-
MAX_VERTICES: 10000,
12+
MAX_VERTICES: 16000,
1313

1414
VERTEX_SHADER_SOURCE: VertexShader,
1515
FRAGMENT_SHADER_SOURCE: FragmentShader

0 commit comments

Comments
 (0)