Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-22 12:43:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

Change Grid to use padding, standard fill and stroke.

Browse source
This commit is contained in:
Ben Richards 2024-06-26 18:17:09 +12:00
parent 227e5f5208
commit 7ce2d46d7c
3 changed files with 196 additions and 164 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

159
src/gameobjects/shape/grid/Grid.js
View file

@ -15,8 +15,6 @@ var GridRender = require('./GridRender');
* it for input or physics. It provides a quick and easy way for you to render this shape in your
* game without using a texture, while still taking advantage of being fully batched in WebGL.
*
* This shape supports only fill colors and cannot be stroked.
*
* A Grid Shape allows you to display a grid in your game, where you can control the size of the
* grid as well as the width and height of the grid cells. You can set a fill color for each grid
* cell as well as an alternate fill color. When the alternate fill color is set then the grid
@ -84,42 +82,6 @@ var Grid = new Class({
*/
this.cellHeight = cellHeight;
/**
* Will the grid render its cells in the `fillColor`?
*
* @name Phaser.GameObjects.Grid#showCells
* @type {boolean}
* @since 3.13.0
*/
this.showCells = true;
/**
* The color of the lines between each grid cell.
*
* @name Phaser.GameObjects.Grid#outlineFillColor
* @type {number}
* @since 3.13.0
*/
this.outlineFillColor = 0;
/**
* The alpha value for the color of the lines between each grid cell.
*
* @name Phaser.GameObjects.Grid#outlineFillAlpha
* @type {number}
* @since 3.13.0
*/
this.outlineFillAlpha = 0;
/**
* Will the grid display the lines between each cell when it renders?
*
* @name Phaser.GameObjects.Grid#showOutline
* @type {boolean}
* @since 3.13.0
*/
this.showOutline = true;
/**
* Will the grid render the alternating cells in the `altFillColor`?
*
@ -148,6 +110,42 @@ var Grid = new Class({
*/
this.altFillAlpha;
/**
* The padding around each cell. The effective gutter between cells is
* twice this value.
*
* @name Phaser.GameObjects.Grid#cellPadding
* @type {number}
* @since 3.90.0
* @default 0.5
*/
this.cellPadding = 0.5;
/**
* Whether to stroke on the outside edges of the Grid object.
*
* @name Phaser.GameObjects.Grid#strokeOutside
* @type {boolean}
* @since 3.90.0
* @default false
*/
this.strokeOutside = false;
/**
* Whether to stroke on the outside edges of the Grid object
* when the cell is incomplete, e.g. the grid size does not
* evenly fit the cell size.
*
* This only has an effect if `strokeOutside` is `true`.
* It will affect the right and bottom edges of the grid.
*
* @name Phaser.GameObjects.Grid#strokeOutsideIncomplete
* @type {boolean}
* @since 3.90.0
* @default false
*/
this.strokeOutsideIncomplete = true;
this.setPosition(x, y);
this.setSize(width, height);
@ -161,42 +159,6 @@ var Grid = new Class({
this.updateDisplayOrigin();
},
/**
* Sets the fill color and alpha level the grid cells will use when rendering.
*
* If this method is called with no values then the grid cells will not be rendered,
* however the grid lines and alternating cells may still be.
*
* Also see the `setOutlineStyle` and `setAltFillStyle` methods.
*
* This call can be chained.
*
* @method Phaser.GameObjects.Grid#setFillStyle
* @since 3.13.0
*
* @param {number} [fillColor] - The color the grid cells will be filled with, i.e. 0xff0000 for red.
* @param {number} [fillAlpha=1] - The alpha the grid cells will be filled with. You can also set the alpha of the overall Shape using its `alpha` property.
*
* @return {this} This Game Object instance.
*/
setFillStyle: function (fillColor, fillAlpha)
{
if (fillAlpha === undefined) { fillAlpha = 1; }
if (fillColor === undefined)
{
this.showCells = false;
}
else
{
this.fillColor = fillColor;
this.fillAlpha = fillAlpha;
this.showCells = true;
}
return this;
},
/**
* Sets the fill color and alpha level that the alternating grid cells will use.
*
@ -233,36 +195,43 @@ var Grid = new Class({
},
/**
* Sets the fill color and alpha level that the lines between each grid cell will use.
* Sets the cell padding for the grid.
* The cell padding is the space around each cell, between the cells.
* The effective gutter between cells is twice this value.
*
* If this method is called with no values then the grid lines will not be rendered at all, however
* the cells themselves may still be if they have colors set.
*
* Also see the `setFillStyle` and `setAltFillStyle` methods.
* If this method is called with no value then the cell padding is set to zero.
*
* This call can be chained.
*
* @method Phaser.GameObjects.Grid#setOutlineStyle
* @since 3.13.0
*
* @param {number} [fillColor] - The color the lines between the grid cells will be filled with, i.e. 0xff0000 for red.
* @param {number} [fillAlpha=1] - The alpha the lines between the grid cells will be filled with. You can also set the alpha of the overall Shape using its `alpha` property.
*
* @method Phaser.GameObjects.Grid#setCellPadding
* @since 3.90.0
* @param {number} [value] - The cell padding value.
* @return {this} This Game Object instance.
*/
setOutlineStyle: function (fillColor, fillAlpha)
setCellPadding: function (value)
{
if (fillAlpha === undefined) { fillAlpha = 1; }
this.cellPadding = value || 0;
if (fillColor === undefined)
return this;
},
/**
* Sets how to stroke the outside of the Grid object.
*
* This call can be chained.
*
* @method Phaser.GameObjects.Grid#setStrokeOutside
* @since 3.90.0
* @param {boolean} strokeOutside - Whether to stroke the outside edges of the Grid object.
* @param {boolean} [strokeOutsideIncomplete] - Whether to stroke the outside edges of the Grid object when the cell is incomplete.
*/
setStrokeOutside: function (strokeOutside, strokeOutsideIncomplete)
{
this.strokeOutside = strokeOutside;
if (strokeOutsideIncomplete !== undefined)
{
this.showOutline = false;
}
else
{
this.outlineFillColor = fillColor;
this.outlineFillAlpha = fillAlpha;
this.showOutline = true;
this.strokeOutsideIncomplete = strokeOutsideIncomplete;
}
return this;

90
src/gameobjects/shape/grid/GridCanvasRenderer.js
View file

@ -52,9 +52,14 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
var cellWidthB = cellWidth - ((gridWidth * cellWidth) - width);
var cellHeightB = cellHeight - ((gridHeight * cellHeight) - height);
var showCells = src.showCells;
var showCells = src.isFilled;
var showAltCells = src.showAltCells;
var showOutline = src.showOutline;
var showOutline = src.isStroked;
var cellPadding = src.cellPadding;
var lineWidth = src.lineWidth;
var halfLineWidth = lineWidth / 2;
var x = 0;
var y = 0;
@ -62,21 +67,14 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
var cw = 0;
var ch = 0;
if (showOutline)
if (cellPadding)
{
// To make room for the grid lines (in case alpha < 1)
cellWidthA--;
cellHeightA--;
cellWidthA -= cellPadding * 2;
cellHeightA -= cellPadding * 2;
if (cellWidthB === cellWidth)
{
cellWidthB--;
}
if (cellHeightB === cellHeight)
{
cellHeightB--;
}
cellWidthB -= cellPadding * 2;
cellHeightB -= cellPadding * 2;
}
if (showCells && src.fillAlpha > 0)
@ -103,12 +101,15 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
ctx.fillRect(
dx + x * cellWidth,
dy + y * cellHeight,
cw,
ch
);
if (cw > 0 && ch > 0)
{
ctx.fillRect(
dx + x * cellWidth + cellPadding,
dy + y * cellHeight + cellPadding,
cw,
ch
);
}
}
}
}
@ -137,21 +138,26 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
ctx.fillRect(
dx + x * cellWidth,
dy + y * cellHeight,
cw,
ch
);
if (cw > 0 && ch > 0)
{
ctx.fillRect(
dx + x * cellWidth + cellPadding,
dy + y * cellHeight + cellPadding,
cw,
ch
);
}
}
}
}
if (showOutline && src.outlineFillAlpha > 0)
if (showOutline && src.strokeAlpha > 0)
{
LineStyleCanvas(ctx, src, src.outlineFillColor, src.outlineFillAlpha * alpha);
LineStyleCanvas(ctx, src, src.strokeColor, src.strokeAlpha * alpha);
for (x = 1; x < gridWidth; x++)
var start = src.strokeOutside ? 0 : 1;
for (x = start; x < gridWidth; x++)
{
var x1 = x * cellWidth;
@ -163,7 +169,7 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
ctx.stroke();
}
for (y = 1; y < gridHeight; y++)
for (y = start; y < gridHeight; y++)
{
var y1 = y * cellHeight;
@ -174,6 +180,30 @@ var GridCanvasRenderer = function (renderer, src, camera, parentMatrix)
ctx.stroke();
}
// Render remaining outer strokes.
if (src.strokeOutside)
{
if (width > halfLineWidth)
{
ctx.beginPath();
ctx.moveTo(width + dx, dy);
ctx.lineTo(width + dx, height + dy);
ctx.stroke();
}
if (height > halfLineWidth)
{
ctx.beginPath();
ctx.moveTo(dx, height + dy);
ctx.lineTo(width + dx, height + dy);
ctx.stroke();
}
}
}
// Restore the context saved in SetTransform

111
src/gameobjects/shape/grid/GridWebGLRenderer.js
View file

@ -54,9 +54,14 @@ var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
var fillTintColor;
var showCells = src.showCells;
var showCells = src.isFilled;
var showAltCells = src.showAltCells;
var showOutline = src.showOutline;
var showOutline = src.isStroked;
var cellPadding = src.cellPadding;
var lineWidth = src.lineWidth;
var halfLineWidth = lineWidth / 2;
var x = 0;
var y = 0;
@ -64,21 +69,13 @@ var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
var cw = 0;
var ch = 0;
if (showOutline)
if (cellPadding)
{
// To make room for the grid lines (in case alpha < 1)
cellWidthA--;
cellHeightA--;
cellWidthA -= cellPadding * 2;
cellHeightA -= cellPadding * 2;
if (cellWidthB === cellWidth)
{
cellWidthB--;
}
if (cellHeightB === cellHeight)
{
cellHeightB--;
}
cellWidthB -= cellPadding * 2;
cellHeightB -= cellPadding * 2;
}
if (showCells && src.fillAlpha > 0)
@ -105,14 +102,17 @@ var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth, y * cellHeight,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
if (cw > 0 && ch > 0)
{
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth + cellPadding, y * cellHeight + cellPadding,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
}
}
}
}
@ -141,49 +141,82 @@ var GridWebGLRenderer = function (renderer, src, drawingContext, parentMatrix)
cw = (x < gridWidth - 1) ? cellWidthA : cellWidthB;
ch = (y < gridHeight - 1) ? cellHeightA : cellHeightB;
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth, y * cellHeight,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
if (cw > 0 && ch > 0)
{
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x * cellWidth + cellPadding, y * cellHeight + cellPadding,
cw, ch,
fillTintColor, fillTintColor, fillTintColor, fillTintColor
);
}
}
}
}
if (showOutline && src.outlineFillAlpha > 0)
if (showOutline && src.strokeAlpha > 0)
{
var color = Utils.getTintAppendFloatAlpha(src.outlineFillColor, src.outlineFillAlpha * alpha);
var color = Utils.getTintAppendFloatAlpha(src.strokeColor, src.strokeAlpha * alpha);
for (x = 1; x < gridWidth; x++)
var start = src.strokeOutside ? 0 : 1;
for (x = start; x < gridWidth; x++)
{
var x1 = x * cellWidth - 1;
var x1 = x * cellWidth - halfLineWidth;
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
x1, 0,
2, height,
lineWidth, height,
color, color, color, color
);
}
for (y = 1; y < gridHeight; y++)
for (y = start; y < gridHeight; y++)
{
var y1 = y * cellHeight - 1;
var y1 = y * cellHeight - halfLineWidth;
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
0, y1,
width, 2,
width, lineWidth,
color, color, color, color
);
}
// Render remaining outer strokes.
if (src.strokeOutside && src.strokeOutsideIncomplete)
{
if (width > halfLineWidth)
{
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
width - halfLineWidth, 0,
lineWidth, height,
color, color, color, color
);
}
if (height > halfLineWidth)
{
fillRectNode.run(
drawingContext,
calcMatrix,
submitterNode,
0, height - halfLineWidth,
width, lineWidth,
color, color, color, color
);
}
}
}
};