An Array of pending canvas operations which should trigger on the next re-paint
A perception manager interface for batching lighting, sight, and sound updates
A flag to indicate whether a new Scene is currently being drawn.
A promise that resolves when the canvas is first initialized and ready.
A Set of unique pending operation names to ensure operations are only performed once
An set of blur filter instances which are modified by the zoom level and the "soft shadows" setting
A reference to the MouseInteractionManager that is currently controlling pointer-based interaction, or null.
The current pixel dimensions of the displayed Scene, or null if the Canvas is blank.
Record framerate performance data.
The singleton interaction manager instance which handles mouse interaction on the Canvas.
Configured performance settings which affect the behavior of the Canvas and its renderer.
The renderer screen dimensions.
The singleton PIXI.Application instance rendered on the Canvas.
The primary stage container of the PIXI.Application.
The primary Canvas group which generally contains tangible physical objects which exist within the Scene. This group is a CachedContainer which is rendered to the Scene as a SpriteMesh. This allows the rendered result of the Primary Canvas Group to be affected by a BaseSamplerShader.
The effects Canvas group which modifies the result of the PrimaryCanvasGroup by adding special effects. This includes lighting, weather, vision, and other visual effects which modify the appearance of the Scene.
The interface Canvas group which is rendered above other groups and contains all interactive elements. The various InteractionLayer instances of the interface group provide different control sets for interacting with different types of Documents which can be represented on the Canvas.
The singleton HeadsUpDisplay container which overlays HTML rendering on top of this Canvas.
The singleton Fog of War manager instance.
The singleton color manager instance.
The DragDrop instance which handles interactivity resulting from DragTransfer events.
An object of data which caches data which should be persisted across re-draws of the game canvas.
Track the timestamp when the last mouse move event was captured
The debounce timer in milliseconds for tracking mouse movements on the Canvas.
A debounced function which tracks movements of the mouse on the game canvas.
A flag for whether the game Canvas is fully initialized and ready for additional content to be drawn.
A reference to the currently displayed Scene document, or null if the Canvas is currently blank.
A flag for whether the game Canvas is ready to be used. False if the canvas is not yet drawn, true otherwise.
The fog of war bound to this canvas
The color manager class bound to this canvas
Shortcut to get the masks container from HiddenCanvasGroup.
The id of the currently displayed Scene.
An Array of all CanvasLayer instances which are active on the Canvas board
Return a reference to the active Canvas Layer
The currently displayed darkness level, which may override the saved Scene value.
A mapping of named CanvasLayer classes which defines the layers which comprise the Scene.
Initialize the Canvas by creating the HTML element and PIXI application. This step should only ever be performed once per client session. Subsequent requests to reset the canvas should go through Canvas#draw
Configure performance settings for hte canvas application based on the selected performance mode.
When re-drawing the canvas, first tear down or discontinue some existing processes
Get the value of a GL parameter
The GL parameter to retrieve
The GL parameter value
Initialize the starting view of the canvas stage If we are re-drawing a scene which was previously rendered, restore the prior view position Otherwise set the view to the top-left corner of the scene at standard scale
Given an embedded object name, get the canvas layer for that object
Activate framerate tracking by adding an HTML element to the display and refreshing it every frame.
Deactivate framerate tracking by canceling ticker updates and removing the HTML element.
Pan the canvas to a certain {x,y} coordinate and a certain zoom level
The canvas position to pan to
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
The desired view parameters
A Promise which resolves once the animation has been completed
Recenter the canvas with a pan animation that ends in the center of the canvas rectangle.
A desired initial position from which to begin the animation
A Promise which resolves once the animation has been completed
Highlight objects on any layers which are visible
Displays a Ping both locally and on other connected client, following these rules:
Point to display Ping at
Create a BlurFilter instance and register it to the array for updates when the zoom level changes.
The desired blur strength to use for this filter
Add a filter to the blur filter list. The filter must have the blur property
The Filter instance to add
The added filter for method chaining
Convert canvas co-ordinates to the client's viewport.
The canvas coordinates.
The corresponding co-ordinates relative to the client's viewport.
Convert client viewport co-ordinates to canvas co-ordinates.
The client coordinates.
The corresponding canvas co-ordinates.
Determine whether given canvas co-ordinates are off-screen.
The canvas co-ordinates.
Is the coordinate outside the screen bounds?
Handle double left-click events occurring on the Canvas.
Handle the beginning of a left-mouse drag workflow on the Canvas stage or its active Layer.
Handle mouse movement events occurring on the Canvas.
Handle the conclusion of a left-mouse drag workflow when the mouse button is released.
Handle the cancellation of a left-mouse drag workflow
Pan the canvas view when the cursor position gets close to the edge of the frame
The originating mouse movement event
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. TODO: this should be deprecated
A unique name for the pending operation, conventionally Class.method
The unbound function to execute later
The scope to which the method should be bound when called
Arbitrary arguments to pass to the method when called
Fire all pending functions that are registered in the pending operations queue and empty it. TODO: this should be deprecated
Initialize custom pixi plugins.
Create the PIXI.Application and update references to the created app and stage.
The target canvas view element
Desired PIXI.Application configuration options
Remap premultiplied blend modes/non premultiplied blend modes to fix PIXI bug with custom BM.
Display warnings for known performance issues which may occur due to the user's hardware or browser configuration.
Initialize the group containers of the game Canvas.
TODO: Add a quality parameter Compute the blur parameters according to grid size and performance mode.
A special workflow to perform when rendering a blank Canvas with no active Scene.
Once the canvas is drawn, initialize control, visibility, and audio states
Initialize a CanvasLayer in the activation state
Initialize a token or set of tokens which should be controlled. Restore controlled and targeted tokens from before the re-draw.
Measure average framerate per second over the past 30 frames
Get the constrained zoom scale parameter which is allowed by the maxZoom parameter
The unconstrained position
The constrained position
Update the blur strength depending on the scale of the canvas stage. This number is zero if "soft shadows" are disabled
Attach event listeners to the game canvas to handle click and interaction events
Handle mouse movement on the game canvas. This handler fires on both a throttle and a debounce, ensuring that the final update is always recorded.
Handle left mouse-click events occurring on the Canvas.
Handle long press events occurring on the Canvas.
The triggering canvas interaction event.
The local canvas coordinates of the mousepress.
Handle right mouse-click events occurring on the Canvas.
Handle double right-click events occurring on the Canvas.
Handle right-mouse drag events occurring on the Canvas.
Handle the conclusion of a right-mouse drag workflow the Canvas stage.
Determine selection coordinate rectangle during a mouse-drag workflow
Handle window resizing with the dimensions of the window viewport change
The Window resize event
Handle mousewheel events which adjust the scale of the canvas
The mousewheel event that zooms the canvas
Event handler for the drop portion of a drag-and-drop event.
The drag event being dropped onto the canvas
Remove all children of the display object and call one cleaning method: clean first, then tearDown, and destroy if no cleaning method is found.
The display object to clean.
If textures should be destroyed.
Configure the usage of WebGL for the PIXI.Application that will be created.
Create the Canvas element which will be the render target for the PIXI.Application instance. Replace the template element which serves as a placeholder in the initially served HTML response.
Configure the settings used to initialize the PIXI.Application instance.
Options passed to the PIXI.Application constructor.
The virtual tabletop environment is implemented using a WebGL powered HTML 5 canvas using the powerful PIXI.js library. The canvas is comprised by an ordered sequence of layers which define rendering groups and collections of objects that are drawn on the canvas itself.
Hook Events
hookEvents.canvasConfig hookEvents.canvasInit hookEvents.canvasReady hookEvents.canvasPan hookEvents.canvasTearDown
Canvas State
Canvas Methods