Grid
The Grid Shape is a Game Object that can be added to a Scene, Group or Container. You can treat it like any other Game Object in your game, such as tweening it, scaling it, or enabling 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.
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 cells will alternate the fill colors as they render, creating a chess-board effect. You can also optionally have a stroke fill color. If set, this draws lines between the grid cells in the given color. If you specify a stroke color with an alpha of zero, then it will draw the cells spaced out, but without the lines between them.
Constructor
new Grid(scene, [x], [y], [width], [height], [cellWidth], [cellHeight], [fillColor], [fillAlpha], [strokeFillColor], [strokeFillAlpha])
Parameters
| name | type | optional | default | description |
|---|---|---|---|---|
| scene | Phaser.Scene | No | The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time. | |
| x | number | Yes | 0 | The horizontal position of this Game Object in the world. |
| y | number | Yes | 0 | The vertical position of this Game Object in the world. |
| width | number | Yes | 128 | The width of the grid. |
| height | number | Yes | 128 | The height of the grid. |
| cellWidth | number | Yes | 32 | The width of one cell in the grid. |
| cellHeight | number | Yes | 32 | The height of one cell in the grid. |
| fillColor | number | Yes | The color the grid cells will be filled with, i.e. 0xff0000 for red. | |
| fillAlpha | number | Yes | The alpha the grid cells will be filled with. You can also set the alpha of the overall Shape using its alpha property. | |
| strokeFillColor | number | Yes | The color of the lines between the grid cells. See the setStrokeStyle method. | |
| strokeFillAlpha | number | Yes | The alpha of the lines between the grid cells. |
Scope: static
Extends
Source: src/gameobjects/shape/grid/Grid.js#L11
Since: 3.13.0
Inherited Members
From Phaser.GameObjects.Components.AlphaSingle:
From Phaser.GameObjects.Components.BlendMode:
From Phaser.GameObjects.Components.Depth:
From Phaser.GameObjects.Components.Filters:
- filterCamera
- filters
- filtersAutoFocus
- filtersFocusContext
- filtersForceComposite
- maxFilterSize
- renderFilters
From Phaser.GameObjects.Components.Mask:
From Phaser.GameObjects.Components.Origin:
From Phaser.GameObjects.Components.RenderNodes:
From Phaser.GameObjects.Components.ScrollFactor:
From Phaser.GameObjects.Components.Transform:
From Phaser.GameObjects.Components.Visible:
From Phaser.GameObjects.GameObject:
- active
- body
- cameraFilter
- data
- displayList
- ignoreDestroy
- input
- isDestroyed
- name
- parentContainer
- renderFlags
- scene
- state
- tabIndex
- type
- vertexRoundMode
From Phaser.GameObjects.Shape:
- closePath
- displayHeight
- displayWidth
- fillAlpha
- fillColor
- geom
- height
- isFilled
- isStroked
- lineWidth
- pathData
- pathIndexes
- strokeAlpha
- strokeColor
- width
Public Members
altFillAlpha
altFillAlpha: number
Description:
The alpha the alternating grid cells will be filled with. You can also set the alpha of the overall Shape using its alpha property.
Source: src/gameobjects/shape/grid/Grid.js#L104
Since: 3.13.0
altFillColor
altFillColor: number
Description:
The color the alternating grid cells will be filled with, i.e. 0xff0000 for red.
Source: src/gameobjects/shape/grid/Grid.js#L95
Since: 3.13.0
cellHeight
cellHeight: number
Description:
The height of each grid cell. Must be a positive value.
Source: src/gameobjects/shape/grid/Grid.js#L75
Since: 3.13.0
cellPadding
cellPadding: number
Description:
The padding around each cell. The effective gutter between cells is twice this value.
Source: src/gameobjects/shape/grid/Grid.js#L114
Since: 4.0.0
cellWidth
cellWidth: number
Description:
The width of each grid cell. Must be a positive value.
Source: src/gameobjects/shape/grid/Grid.js#L65
Since: 3.13.0
showAltCells
showAltCells: boolean
Description:
Controls whether the grid renders alternating cells using the altFillColor and altFillAlpha values. Set this via the setAltFillStyle method.
Source: src/gameobjects/shape/grid/Grid.js#L85
Since: 3.13.0
strokeOutside
strokeOutside: boolean
Description:
Whether to stroke on the outside edges of the Grid object.
Source: src/gameobjects/shape/grid/Grid.js#L125
Since: 4.0.0
strokeOutsideIncomplete
strokeOutsideIncomplete: boolean
Description:
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.
Source: src/gameobjects/shape/grid/Grid.js#L135
Since: 4.0.0
Inherited Methods
From Phaser.Events.EventEmitter:
- addListener
- emit
- eventNames
- listenerCount
- listeners
- off
- on
- once
- removeAllListeners
- removeListener
- shutdown
From Phaser.GameObjects.Components.AlphaSingle:
From Phaser.GameObjects.Components.BlendMode:
From Phaser.GameObjects.Components.Depth:
From Phaser.GameObjects.Components.Filters:
- enableFilters
- focusFilters
- focusFiltersOnCamera
- focusFiltersOverride
- renderWebGLFilters
- setFiltersAutoFocus
- setFiltersFocusContext
- setFiltersForceComposite
- setFilterSize
- setRenderFilters
- willRenderFilters
From Phaser.GameObjects.Components.GetBounds:
- getBottomCenter
- getBottomLeft
- getBottomRight
- getBounds
- getCenter
- getLeftCenter
- getRightCenter
- getTopCenter
- getTopLeft
- getTopRight
From Phaser.GameObjects.Components.Mask:
From Phaser.GameObjects.Components.Origin:
From Phaser.GameObjects.Components.RenderNodes:
From Phaser.GameObjects.Components.RenderSteps:
From Phaser.GameObjects.Components.ScrollFactor:
From Phaser.GameObjects.Components.Transform:
- copyPosition
- getLocalPoint
- getLocalTransformMatrix
- getParentRotation
- getWorldPoint
- getWorldTransformMatrix
- setAngle
- setPosition
- setRandomPosition
- setRotation
- setScale
- setW
- setX
- setY
- setZ
From Phaser.GameObjects.Components.Visible:
From Phaser.GameObjects.GameObject:
- addedToScene
- addToDisplayList
- addToUpdateList
- destroy
- disableInteractive
- getData
- getDisplayList
- getIndexList
- incData
- removedFromScene
- removeFromDisplayList
- removeFromUpdateList
- removeInteractive
- setActive
- setData
- setDataEnabled
- setInteractive
- setName
- setState
- setVertexRoundMode
- toggleData
- toJSON
- update
- willRender
- willRoundVertices
From Phaser.GameObjects.Shape:
Public Methods
setAltFillStyle
<instance> setAltFillStyle([fillColor], [fillAlpha])
Description:
Sets the fill color and alpha level that the alternating grid cells will use.
If this method is called with no values then alternating grid cells will not be rendered in a different color.
Also see the setStrokeStyle and setFillStyle methods.
This call can be chained.
Parameters:
| name | type | optional | default | description |
|---|---|---|---|---|
| fillColor | number | Yes | The color the alternating grid cells will be filled with, i.e. 0xff0000 for red. | |
| fillAlpha | number | Yes | 1 | The alpha the alternating grid cells will be filled with. You can also set the alpha of the overall Shape using its alpha property. |
Returns: Phaser.GameObjects.Grid - This Game Object instance.
Source: src/gameobjects/shape/grid/Grid.js#L163
Since: 3.13.0
setCellPadding
<instance> setCellPadding([value])
Description:
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 value then the cell padding is set to zero.
This call can be chained.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| value | number | Yes | The cell padding value. |
Returns: Phaser.GameObjects.Grid - This Game Object instance.
Source: src/gameobjects/shape/grid/Grid.js#L198
Since: 4.0.0
setStrokeOutside
<instance> setStrokeOutside(strokeOutside, [strokeOutsideIncomplete])
Description:
Controls whether a stroke is drawn around the outer perimeter of the entire Grid object, in addition to the lines drawn between cells. Optionally, you can also control whether the outer edge is stroked on partial cells, i.e. where the grid dimensions do not divide evenly by the cell dimensions, leaving an incomplete cell on the right or bottom edge.
This call can be chained.
Parameters:
| name | type | optional | description |
|---|---|---|---|
| strokeOutside | boolean | No | Whether to stroke the outside edges of the Grid object. |
| strokeOutsideIncomplete | boolean | Yes | Whether to stroke the outside edges of the Grid object when the cell is incomplete. |
Source: src/gameobjects/shape/grid/Grid.js#L219
Since: 4.0.0