Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-23 21:24:09 +00:00
Code Issues Projects Releases Packages Wiki Activity

Added fillTriangle and strokeTriangle to Graphics Game Object

Browse source
This commit is contained in:
Felipe Alfonso 2017-03-07 21:51:09 -03:00
parent 2966c687e8
commit b8f0b3357d
6 changed files with 167 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,4 +9,6 @@ module.exports = {
FILL_STYLE: 7,
FILL_PATH: 8,
STROKE_PATH: 9,
FILL_TRIANGLE: 10,
STROKE_TRIANGLE: 11
};

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

@ -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(

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

@ -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],

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

@ -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)
{

73
v3/src/renderer/webgl/batches/shape/ShapeBatch.js
View file

@ -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
);
}
};

2
v3/src/renderer/webgl/batches/shape/const.js
View file

@ -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