Phaser API Documentation

grid([x], [y], [width], [height], [cellWidth], [cellHeight], [fillColor], [fillAlpha], [outlineFillColor], [outlineFillAlpha])


Creates a new Grid Shape Game Object and adds it to the Scene.

Note: This method will only be available if the Grid Game Object has been built into Phaser.

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.

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 cells will alternate the fill colors as they render, creating a chess-board effect. You can also optionally have an outline fill color. If set, this draws lines between the grid cells in the given color. If you specify an outline color with an alpha of zero, then it will draw the cells spaced out, but without the lines between them.


name type arguments Default description
x number <optional> 0

The horizontal position of this Game Object in the world.

y number <optional> 0

The vertical position of this Game Object in the world.

width number <optional> 128

The width of the grid.

height number <optional> 128

The height of the grid.

cellWidth number <optional> 32

The width of one cell in the grid.

cellHeight number <optional> 32

The height of one cell in the grid.

fillColor number <optional>

The color the grid cells will be filled with, i.e. 0xff0000 for red.

fillAlpha number <optional>

The alpha the grid cells will be filled with. You can also set the alpha of the overall Shape using its alpha property.

outlineFillColor number <optional>

The color of the lines between the grid cells.

outlineFillAlpha number <optional>

The alpha of the lines between the grid cells.


The Game Object that was created.

Since: 3.13.0