From b8f0b3357de071fc9c33e856f91356a1ebd990fa Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Tue, 7 Mar 2017 21:51:09 -0300 Subject: [PATCH] Added fillTriangle and strokeTriangle to Graphics Game Object --- v3/src/gameobjects/graphics/Commands.js | 2 + v3/src/gameobjects/graphics/Graphics.js | 16 ++++ .../graphics/GraphicsCanvasRenderer.js | 45 +++++++++--- .../graphics/GraphicsWebGLRenderer.js | 41 +++++++++++ .../webgl/batches/shape/ShapeBatch.js | 73 +++++++++++++++++++ v3/src/renderer/webgl/batches/shape/const.js | 2 +- 6 files changed, 167 insertions(+), 12 deletions(-) diff --git a/v3/src/gameobjects/graphics/Commands.js b/v3/src/gameobjects/graphics/Commands.js index 97fe6dbb4..4197a0774 100644 --- a/v3/src/gameobjects/graphics/Commands.js +++ b/v3/src/gameobjects/graphics/Commands.js @@ -9,4 +9,6 @@ module.exports = { FILL_STYLE: 7, FILL_PATH: 8, STROKE_PATH: 9, + FILL_TRIANGLE: 10, + STROKE_TRIANGLE: 11 }; diff --git a/v3/src/gameobjects/graphics/Graphics.js b/v3/src/gameobjects/graphics/Graphics.js index 80970b24a..8b42648ae 100644 --- a/v3/src/gameobjects/graphics/Graphics.js +++ b/v3/src/gameobjects/graphics/Graphics.js @@ -96,6 +96,14 @@ var Graphics = new Class({ ); }, + fillTriangle: function (x0, y0, x1, y1, x2, y2) + { + this.commandBuffer.push( + Commands.FILL_TRIANGLE, + x0, y0, x1, y1, x2, y2 + ); + }, + strokeCircle: function (x, y, radius) { this.beginPath(); @@ -116,6 +124,14 @@ var Graphics = new Class({ this.closePath(); }, + strokeTriangle: function (x0, y0, x1, y1, x2, y2) + { + this.commandBuffer.push( + Commands.STROKE_TRIANGLE, + x0, y0, x1, y1, x2, y2 + ); + }, + lineTo: function (x, y) { this.commandBuffer.push( diff --git a/v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js b/v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js index 40af2ef5f..78ce82518 100644 --- a/v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js +++ b/v3/src/gameobjects/graphics/GraphicsCanvasRenderer.js @@ -76,12 +76,23 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c lineWidth = commandBuffer[index + 1]; lineColor = commandBuffer[index + 2]; lineAlpha = commandBuffer[index + 3]; + red = ((lineColor & 0xFF0000) >>> 16); + green = ((lineColor & 0xFF00) >>> 8); + blue = (lineColor & 0xFF); + ctx.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')'; + ctx.globalAlpha = fillAlpha; + ctx.lineWidth = lineWidth; index += 3; break; case Commands.FILL_STYLE: fillColor = commandBuffer[index + 1]; fillAlpha = commandBuffer[index + 2]; + red = ((fillColor & 0xFF0000) >>> 16); + green = ((fillColor & 0xFF00) >>> 8); + blue = (fillColor & 0xFF); + ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')'; + ctx.globalAlpha = fillAlpha; index += 2; break; @@ -94,21 +105,10 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c break; case Commands.FILL_PATH: - red = ((fillColor & 0xFF0000) >>> 16); - green = ((fillColor & 0xFF00) >>> 8); - blue = (fillColor & 0xFF); - ctx.fillStyle = 'rgb(' + red + ',' + green + ',' + blue + ')'; - ctx.globalAlpha = fillAlpha; ctx.fill(); break; case Commands.STROKE_PATH: - red = ((lineColor & 0xFF0000) >>> 16); - green = ((lineColor & 0xFF00) >>> 8); - blue = (lineColor & 0xFF); - ctx.strokeStyle = 'rgb(' + red + ',' + green + ',' + blue + ')'; - ctx.globalAlpha = fillAlpha; - ctx.lineWidth = lineWidth; ctx.stroke(); break; @@ -121,6 +121,29 @@ var GraphicsCanvasRenderer = function (renderer, src, interpolationPercentage, c ); index += 4; break; + + case Commands.FILL_TRIANGLE: + ctx.beginPath(); + ctx.moveTo(commandBuffer[index + 1], commandBuffer[index + 2]); + ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]); + ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]); + ctx.lineTo(commandBuffer[index + 1], commandBuffer[index + 2]); + ctx.closePath(); + ctx.fill(); + index += 6; + break; + + case Commands.STROKE_TRIANGLE: + ctx.beginPath(); + ctx.moveTo(commandBuffer[index + 1], commandBuffer[index + 2]); + ctx.lineTo(commandBuffer[index + 3], commandBuffer[index + 4]); + ctx.lineTo(commandBuffer[index + 5], commandBuffer[index + 6]); + ctx.lineTo(commandBuffer[index + 1], commandBuffer[index + 2]); + ctx.closePath(); + ctx.stroke(); + index += 6; + break; + case Commands.LINE_TO: ctx.lineTo( commandBuffer[index + 1], diff --git a/v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js b/v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js index 9922c37b0..4109232f9 100644 --- a/v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js +++ b/v3/src/gameobjects/graphics/GraphicsWebGLRenderer.js @@ -213,6 +213,47 @@ var GraphicsWebGLRenderer = function (renderer, src, interpolationPercentage, ca cmdIndex += 4; break; + case Commands.FILL_TRIANGLE: + shapeBatch.addFillTriangle( + /* Graphics Game Object Properties */ + srcX, srcY, srcScaleX, srcScaleY, srcRotation, + /* Triangle properties */ + commandBuffer[cmdIndex + 1] - cameraScrollX, + commandBuffer[cmdIndex + 2] - cameraScrollY, + commandBuffer[cmdIndex + 3] - cameraScrollX, + commandBuffer[cmdIndex + 4] - cameraScrollY, + commandBuffer[cmdIndex + 5] - cameraScrollX, + commandBuffer[cmdIndex + 6] - cameraScrollY, + fillColor, + fillAlpha, + /* Transform */ + mva, mvb, mvc, mvd, mve, mvf + ); + + cmdIndex += 6; + break; + + case Commands.STROKE_TRIANGLE: + shapeBatch.addStrokeTriangle( + /* Graphics Game Object Properties */ + srcX, srcY, srcScaleX, srcScaleY, srcRotation, + /* Triangle properties */ + commandBuffer[cmdIndex + 1] - cameraScrollX, + commandBuffer[cmdIndex + 2] - cameraScrollY, + commandBuffer[cmdIndex + 3] - cameraScrollX, + commandBuffer[cmdIndex + 4] - cameraScrollY, + commandBuffer[cmdIndex + 5] - cameraScrollX, + commandBuffer[cmdIndex + 6] - cameraScrollY, + lineWidth, + lineColor, + lineAlpha, + /* Transform */ + mva, mvb, mvc, mvd, mve, mvf + ); + + cmdIndex += 6; + break + case Commands.LINE_TO: if (lastPath !== null) { diff --git a/v3/src/renderer/webgl/batches/shape/ShapeBatch.js b/v3/src/renderer/webgl/batches/shape/ShapeBatch.js index f2e9729ab..eb10a633a 100644 --- a/v3/src/renderer/webgl/batches/shape/ShapeBatch.js +++ b/v3/src/renderer/webgl/batches/shape/ShapeBatch.js @@ -27,6 +27,12 @@ var ShapeBatch = function (game, gl, manager) this.vertexDataBuffer = null; this.vertexCount = 0; this.viewMatrixLocation = null; + this.tempTriangle = [ + {x: 0, y: 0}, + {x: 0, y: 0}, + {x: 0, y: 0}, + {x: 0, y: 0} + ]; // All of these settings will be able to be controlled via the Game Config this.config = { @@ -523,6 +529,73 @@ ShapeBatch.prototype = { vertexBufferF32[vertexOffset++] = fillAlpha; this.vertexCount += 6; + }, + + addFillTriangle: function ( + /* Graphics Game Object properties */ + srcX, srcY, srcScaleX, srcScaleY, srcRotation, + /* Triangle properties */ + x0, y0, x1, y1, x2, y2, fillColor, fillAlpha, + /* transform */ + a, b, c, d, e, f + ) { + if (this.vertexCount + 3 > this.maxVertices) + { + this.flush(); + } + var vertexDataBuffer = this.vertexDataBuffer; + var vertexBufferF32 = vertexDataBuffer.floatView; + var vertexBufferU32 = vertexDataBuffer.uintView; + var vertexOffset = vertexDataBuffer.allocate(12); + var tx0 = x0 * a + y0 * c + e; + var ty0 = x0 * b + y0 * d + f; + var tx1 = x1 * a + y1 * c + e; + var ty1 = x1 * b + y1 * d + f; + var tx2 = x2 * a + y2 * c + e; + var ty2 = x2 * b + y2 * d + f; + + vertexBufferF32[vertexOffset++] = tx0; + vertexBufferF32[vertexOffset++] = ty0; + vertexBufferU32[vertexOffset++] = fillColor; + vertexBufferF32[vertexOffset++] = fillAlpha; + + vertexBufferF32[vertexOffset++] = tx1; + vertexBufferF32[vertexOffset++] = ty1; + vertexBufferU32[vertexOffset++] = fillColor; + vertexBufferF32[vertexOffset++] = fillAlpha; + + vertexBufferF32[vertexOffset++] = tx2; + vertexBufferF32[vertexOffset++] = ty2; + vertexBufferU32[vertexOffset++] = fillColor; + vertexBufferF32[vertexOffset++] = fillAlpha; + + this.vertexCount += 3; + }, + + addStrokeTriangle: function ( + /* Graphics Game Object properties */ + srcX, srcY, srcScaleX, srcScaleY, srcRotation, + /* Triangle properties */ + x0, y0, x1, y1, x2, y2, lineWidth, lineColor, lineAlpha, + /* transform */ + a, b, c, d, e, f + ) { + var tempTriangle = this.tempTriangle; + + tempTriangle[0].x = x0; + tempTriangle[0].y = y0; + tempTriangle[1].x = x1; + tempTriangle[1].y = y1; + tempTriangle[2].x = x2; + tempTriangle[2].y = y2; + tempTriangle[3].x = x0; + tempTriangle[3].y = y0; + + this.addStrokePath( + srcX, srcY, srcScaleX, srcScaleY, srcRotation, + tempTriangle, lineWidth, lineColor, lineAlpha, + a, b, c, d, e, f + ); } }; diff --git a/v3/src/renderer/webgl/batches/shape/const.js b/v3/src/renderer/webgl/batches/shape/const.js index 7bacd441c..274e1fbde 100644 --- a/v3/src/renderer/webgl/batches/shape/const.js +++ b/v3/src/renderer/webgl/batches/shape/const.js @@ -9,7 +9,7 @@ var CONST = { SHAPE_VERTEX_COMPONENT_COUNT: 4, // Can't be bigger than 10,000 since index are 16-bit - MAX_VERTICES: 10000, + MAX_VERTICES: 16000, VERTEX_SHADER_SOURCE: VertexShader, FRAGMENT_SHADER_SOURCE: FragmentShader