The Grid Layer

The Grid Layer is positioned 2nd from bottom in the layers of the Canvas. The Grid Layer is responsible for orienting and segmenting the game space into grid spaces. Currently only a square grid is supported but hex grid support is flagged as a feature for work during Beta development.

The Grid provides convenience tools for measuring distance, restricting token movement, and providing guide lines for anchoring wall segments or other canvas features.

Scene Configuration

When configuring a Scene, there are a number of fields underneath the Grid section which controls how the grid is measured and rendered.

../../_images/scene-configuration.jpg

Each Grid option is described below:

Grid Size
The pixel dimensions of each grid square.
Grid Distance
The amount of in-game distance each grid square represents.
Grid Units
The units of measure for the grid distance.
Grid Color
The color with which the grid lines are displayed.
Grid Opacity
The level of transparency of the grid lines. Less opacity results in a more transparent grid.

In the Thieves’ Den scene we use a 70 pixel grid (for compatibility with Roll20). This results in a 28 by 30 grid which overlays the map image. The grid lines are drawn in white color, but with a low opacity making them only faintly rendered against the background image.

Grid Layer API

Mod developers may wish to interact with or manipulate this layer and can do so using the singleton instance of the GridLayer() class which is accessible from within the client as canvas.grid.

class GridLayer()

A CanvasLayer responsible for drawing a square grid

GridLayer.draw()

Draw square grid lines

GridLayer.getNearestCenter(x, y)

Given a pair of coordinates (x, y), return the center of the grid square which contains that point

Returns:Array – An Array [x, y] of the central point of the square which contains (x, y)
GridLayer.getNearestVertex(x, y)

Given a pair of coordinates (x0,y0) return the closest grid vertex (x1, y1)

GridLayer.getSnappedPosition(x, y)

Given a pair of coordinates (x1,y1), return the grid coordinates (x2,y2) which represent the snapped position

GridLayer.getTopLeft(x, y)

Given a pair of coordinates (x, y) - return the top-left of the grid square which contains that point

Returns:Array – An Array [x, y] of the top-left coordinate of the square which contains (x, y)