Canvas

Canvas

The virtual tabletop environment is implemented using a WebGL powered HTML 5 canvas using the powerful PIXI.js library. The canvas is comprised of an ordered sequence of layers which define rendering groups and collections of objects that are drawn on the canvas itself.

Constructor

new Canvas()

Source:
See:
  • CanvasLayer An abstract class for all Canvas layers.
  • PlaceablesLayer An abstract class for Canvas Layers which contain Placeable Objects.
  • PlaceableObject An abstract class for objects which are placed into the Scene and drawn on the canvas.
Example

Example Canvas commands

canvas.ready; // Is the canvas ready for use?
canvas.scene; // The currently viewed Scene entity.
canvas.dimensions; // The dimensions of the current Scene.
canvas.draw(); // Completely re-draw the game canvas (this is usually unnecessary).
canvas.pan(x, y, zoom); // Pan the canvas to new coordinates and scale.
canvas.recenter(); // Re-center the canvas on the currently controlled Token.

Members

_pendingOperationNames :Set.<string>

Source:

A Set of unique pending operation names to ensure operations are only performed once

Type:
  • Set.<string>

activeLayer :CanvasLayer

Source:

Return a reference to the active Canvas Layer

Type:

layers :Array.<CanvasLayer>

Source:

An Array of all CanvasLayer instances which are active on the Canvas board

Type:

mouseInteractionManager :MouseInteractionManager

Source:

The singleton interaction manager instance which handles mouse workflows on the Canvas

Type:

pendingOperations :Array.<object>

Source:

An Array of pending canvas operations which should trigger on the next re-paint

Type:

ready :boolean

Source:

A flag for whether the game Canvas is ready to be used. False if the canvas is not yet drawn, true otherwise.

Type:
  • boolean

Methods

(static) getDimensions(data)

Source:

Get the canvas active dimensions based on the size of the scene's map. We expand the image size by a factor of 1.5 and round to the nearest 2x grid size. The rounding accomplishes that the padding buffer around the map always contains whole grid spaces.

Parameters:
Name Type Description
data Object

The scene dimensions data being established

(async) _initialize() → {Promise.<void>}

Source:

Once the canvas is drawn, initialize control, visibility, and audio states

Returns:
Type
Promise.<void>

_onClickLeft2(event)

Source:
See:
  • {MouseInteractionManager#_handleClickLeft2}

Handle double left-click events occurring on the Canvas stage.

Parameters:
Name Type Description
event PIXI.interaction.InteractionEvent

addPendingOperation(name, fn, scope, …args)

Source:

Add a pending canvas operation that should fire once the socket handling workflow concludes. This registers operations by a unique string name into a queue - avoiding repeating the same work multiple times. This is especially helpful for multi-object updates to avoid costly and redundant refresh operations.

Parameters:
Name Type Attributes Description
name string

A unique name for the pending operation, conventionally Class.method

fn function

The unbound function to execute later

scope *

The scope to which the method should be bound when called

args * <repeatable>

Arbitrary arguments to pass to the method when called

(async) animatePan(x, y, scale, duration, speed) → {Promise.<void>}

Source:

Animate panning the canvas to a certain destination coordinate and zoom scale Customize the animation speed with additional options Returns a Promise which is resolved once the animation has completed

Parameters:
Name Type Description
x number

The destination x-coordinate

y number

The destination y-coordinate

scale number

The destination zoom scale

duration number

The total duration of the animation in milliseconds; used if speed is not set

speed number

The speed of animation in pixels per second; overrides duration if set

Returns:

A Promise which resolves once the animation has been completed

Type
Promise.<void>

(async) draw() → {Promise.<Canvas>}

Source:

Draw the game canvas.

Returns:

A Promise which resolves once the Canvas is fully drawn

Type
Promise.<Canvas>

getLayer(layerName) → {CanvasLayer}

Source:

Get a reference to the a specific CanvasLayer by it's name

Parameters:
Name Type Description
layerName string

The name of the canvas layer to get

Returns:
Type
CanvasLayer

pan(x, y, scale)

Source:

Pan the canvas to a certain {x,y} coordinate and a certain zoom level

Parameters:
Name Type Description
x number | null

The x-coordinate of the pan destination

y number | null

The y-coordinate of the pan destination

scale number | null

The zoom level (max of CONFIG.Canvas.maxZoom) of the action

recenter()

Source:

Recenter the canvas Otherwise, pan the stage to put the top-left corner of the map in the top-left corner of the window

(async) tearDown() → {Promise.<void>}

Source:

When re-drawing the canvas, first tear down or discontinue some existing processes

Returns:
Type
Promise.<void>

triggerPendingOperations()

Source:

Fire all pending functions that are registered in the pending operations queue and empty it.