Graphics API

Dominion includes a graphics API used for drawing isometric graphics on the HTML5 canvas. It is used in everything from drawing the grid to converting between orthographic and isometric coordinate systems.

What does orthographic/isometric mean?

Orthography or an orthographic projection refers to a 2d coordinate system where x is the horizontal coordinate and y is the vertical coordinate. Pixels on a screen are located on an orthographic coordinate system, and it is used for drawing graphics on the canvas. Orthographic coordinates will sometimes be referred to as real-world or screen coordinates.

Isometry or an isometric projection is used to represent 3d objects on a 2d grid. Objects appear tipped towards the viewer at 30º. Isometric coordinates (x, y, z) are used to represent a point in 3d space, therefore it is necessary to convert them to orthographic before drawing them on the screen.

OrthographicPoint object

Defines a point in an orthographic coordinate system.

Methods

OrthographicPoint.toIsometricPoint(OrthographicPoint origin)

Converts orthographic coordinates to isometric coordinates with given origin. Returns an IsometricPoint object.

Properties

OrthographicPoint.x (float)

Horizontal coordinate for the point.

OrthographicPoint.y (float)

Vertical coordinate for the point.

IsometricPoint object

Defines a point in an isometric coordinate system.

Methods

IsometricPoint.toOrthographicPoint(OrthographicPoint origin)

Converts isometric coordinates to orthographic coordinates with given origin. Returns an OrthographicPoint object.

Properties

IsometricPoint.x (float)

Horizontal coordinate for the point.

IsometricPoint.y (float)

Vertical coordinate for the point.

Grid object

The Grid class defines an isometric grid. When Dominion loads, it creates a new Grid object to manage the grid.

var grid = new Grid();

Methods

Properties

Grid.origin (OrthographicPoint)

Represents the orthographic point where the isometric point is (0, 0).