import Renderer from 'WTF-Adventure/WTF-Adventure/client/renderer/renderer.js'

public class | source

Renderer

Handles all canvas-based rendering for the game world

Constructor Summary

Public Constructor
public	constructor(backgroundCanvas: HTMLCanvasElement, entitiesCanvas: HTMLCanvasElement, foregroundCanvas: HTMLCanvasElement, textCanvas: HTMLCanvasElement, cursorCanvas: HTMLCanvasElement, game: Game) Default constructor

Member Summary

Public Members
public	animateTiles: Boolean Whether tile animations are enabled
public	animatedTiles: Tile[] List of tiles that are currently animated
public	autoCentre: Boolean Whether to automatically centre the camera on the player
public	backContext: CanvasRenderingContext2D The 2D rendering context for the background
public	backgroundCanvas: HTMLCanvasElement The background tile canvas element
public	brightness: Number The current brightness level (0-100)
public	camera: Camera The camera used to determine visible area
public	canvases: HTMLCanvasElement[] Array of all canvas elements managed by the renderer
public	context: CanvasRenderingContext2D The 2D rendering context for entities
public	contexts: CanvasRenderingContext2D[] Array of all drawing contexts used for tile and entity rendering
public	cursorCanvas: HTMLCanvasElement The cursor canvas element
public	cursorContext: CanvasRenderingContext2D The 2D rendering context for the cursor
public	debugging: Boolean Whether to render debug information
public	drawLevels: Boolean Whether to draw entity levels above characters
public	drawNames: Boolean Whether to draw entity names above characters
public	drawTarget: Boolean Whether to draw the target cell indicator
public	drawingScale: Number
public	entities: Entities The entities controller
public	entitiesCanvas: HTMLCanvasElement The entities canvas element
public	firefox: Boolean Whether the client is running in Firefox
public	fontSize: Number The base font size for rendered text
public	forceRendering: Boolean When true the next frame will be rendered even if the camera has not moved
public	foreContext: CanvasRenderingContext2D The 2D rendering context for the foreground
public	foregroundCanvas: HTMLCanvasElement The foreground tile canvas element
public	fps: Number The current frames per second value
public	frameCount: Number Number of frames rendered in the current second
public	game: Game Reference to the main game instance
public	input: Input The input handler
public	lastTarget: Number[] The last target cell position [x, y]
public	map: Map
public	mobile: Boolean Whether the client is running on a mobile device
public	realFPS: Number
public	renderedFrame: Number[] The last rendered camera position [x, y]
public	resizeTimeout: number Timeout handle used to debounce resize events
public	scale: Number The current rendering scale factor
public	screenHeight: Number The screen height in pixels
public	screenWidth: Number The screen width in pixels
public	selectedCellVisible: Boolean Whether the selected cell highlight is currently visible
public	shadowSprite: Sprite
public	sparksSprite: Sprite
public	stopRendering: Boolean When true the render loop is paused
public	tablet: Boolean Whether the client is running on a tablet device
public	targetRect: Object
public	textCanvas: HTMLCanvasElement The text canvas element
public	textContext: CanvasRenderingContext2D The 2D rendering context for text
public	tileSize: Number The size of a single tile in pixels
public	tileset: Object
public	time: Date Timestamp used for FPS calculation

Method Summary

Public Methods
public	adjustBrightness(level: Number) Adjusts the canvas overlay opacity to achieve the desired brightness level
public	checkDevice() Detects whether the current device is mobile, tablet or Firefox and caches the result
public	checkDirty(rectOne: Object, source: Object, x: Number, y: Number) Checks whether a bounding rectangle overlaps with nearby entities or tiles and marks them dirty
public	clearAll() Clears every tracked rendering context
public	clearContext() Clears the entities canvas context
public	clearDrawing() Clears only the background and foreground drawing contexts
public	clearScreen(context: CanvasRenderingContext2D) Clears the full area of the given context
public	clearText() Clears the entire text canvas context
public	clearTile(context: CanvasRenderingContext2D, gridWidth: Number, cellId: Number) Clears the pixel area occupied by a single tile cell on the given context
public	draw() Draws all static (non-animated) visible tiles onto the background and foreground contexts
public	drawAnimatedTiles() Draws all animated tiles onto the entities context each frame
public	drawCellHighlight(x: Number, y: Number, colour: String) Draws a coloured highlight rectangle over a grid cell at the given grid coordinates
public	drawCellRect(x: Number, y: Number, colour: String) Draws a hollow coloured rectangle outline around a single grid cell
public	drawCursor() Draws the custom mouse cursor sprite on the cursor canvas
public	drawDebugging() Draws debug overlays such as FPS, player position and the pathing grid
public	drawEntities() Iterates over all visible entities and draws each one that has a loaded sprite
public	drawEntity(entity: Entity) Renders a single entity including its shadow, weapon overlay, item sparks and status effects
public	drawEntityBack(entity: *) Function used to draw special effects prior to rendering the entity.
public	drawEntityFore(entity: Entity) Draws active status-effect sprite overlays on top of the entity after it has been rendered
public	drawFPS() Calculates and draws the current frames-per-second counter on screen
public	drawHealth(entity: Entity) Draws a health bar above an entity when its health bar is visible
public	drawInfos() Draws floating damage and status info text above entities
public	drawName(entity: Entity) Draws the username and/or level label above an entity
public	drawPathing() Highlights all non-zero cells in the pathing grid for debugging
public	drawPosition() Draws the player's current grid position to the screen for debugging
public	drawScaledImage(context: CanvasRenderingContext2D, image: HTMLImageElement, x: Number, y: Number, width: Number, height: Number, dx: Number, dy: Number) Draws a portion of an image scaled to the current drawing scale factor
public	drawSelectedCell() Draws a highlight over the cell the player has selected when it is not adjacent
public	drawTargetCell() Draws a highlight over the cell currently under the mouse cursor
public	drawText(text: String, x: Number, y: Number, centered: Boolean, colour: String, strokeColour: String) Draws a string of text at the specified canvas coordinates
public	drawTile(context: CanvasRenderingContext2D, tileId: Number, tileset: HTMLImageElement, setWidth: Number, gridWidth: Number, cellId: Number) Draws a single tile from the tileset onto the given context at the correct grid position
public	focus() Focuses every tracked rendering context
public	forEachAnimatedTile(callback: Function) Iterates over all currently tracked animated tiles and invokes a callback for each
public	forEachCanvas(callback: Function) Iterates over every tracked canvas element and invokes a callback for each
public	forEachContext(callback: Function) Iterates over every tracked rendering context and invokes a callback for each
public	forEachDrawingContext(callback: Function) Iterates over drawing contexts (background and foreground) skipping the entities context
public	forEachVisibleEntity(callback: Function) Iterates over all entities occupying visible grid cells and invokes a callback for each
public	forEachVisibleIndex(callback: Function, offset: Number) Iterates over every map index currently visible to the camera and invokes a callback
public	forEachVisibleTile(callback: Function, offset: Number) Iterates over all tile IDs in the visible area and invokes a callback for each
public	getDrawingScale(): Number Returns the drawing scale factor, clamped to 2 on mobile devices
public	getEntityBounds(entity: Entity): Object Calculates and returns the bounding rectangle for an entity in screen space
public	getScale(): Number Returns the current rendering scale factor from the game
public	getTargetBounds(x: Number, y: Number): Object Calculates and returns the bounding rectangle for the current target cell in screen space
public	getTileBounds(tile: Tile): Object Calculates and returns the bounding rectangle for an animated tile in screen space
public	getTileset(): HTMLImageElement Returns the currently active tileset image
public	getUpscale(): Number Returns the upscale factor capped at a maximum of 2
public	hasRenderedFrame(): Boolean Returns true if the current camera position matches the last rendered frame position
public	isPortableDevice(): Boolean Returns true if the current device is a mobile or tablet
public	isVisiblePosition(x: Number, y: Number): Boolean Returns true when the given grid position falls within the camera viewport
public	loadCamera() Creates a new Camera and adjusts centring settings based on device capabilities
public	loadRenderer() Initialises scale and drawing scale values and disables image smoothing on all contexts
public	loadSizes() Recalculates screen dimensions based on the camera grid size and resizes all canvases
public	loadStaticSprites() Loads the shadow and sparks static sprites from the entity sprite store
public	render() Main render function called each frame to draw the full game scene
public	resize() Handles window resize events by debouncing a full renderer refresh
public	restore() Calls restore on every tracked rendering context
public	restoreAll() Restores the state of every tracked rendering context
public	saveAll() Saves the state of every tracked rendering context
public	saveFrame() Stores the current camera position as the last rendered frame
public	setCameraView(context: CanvasRenderingContext2D) Translates a context so that the camera position maps to the top-left of the canvas
public	setEntities(entities: Entities) Sets the entities controller used during rendering
public	setInput(input: Input) Sets the input handler used during rendering
public	setMap(map: Map) Sets the map instance used during rendering
public	setTileset(tileset: HTMLImageElement) Sets the tileset image used for tile rendering
public	stop() Stops all rendering and fills each canvas with the background colour
public	updateAnimatedTiles() Rebuilds the list of animated tiles that are currently within the visible camera area
public	updateDrawingView() Applies the camera translation to all drawing (non-entity) contexts
public	updateView() Applies the camera translation to every tracked rendering context
public	verifyCentration() Updates forceRendering based on whether the device is portable and the camera is centred

Public Constructors

public constructor(backgroundCanvas: HTMLCanvasElement, entitiesCanvas: HTMLCanvasElement, foregroundCanvas: HTMLCanvasElement, textCanvas: HTMLCanvasElement, cursorCanvas: HTMLCanvasElement, game: Game) source

Default constructor

Params:

Name	Type	Attribute	Description
backgroundCanvas	HTMLCanvasElement		the canvas for background tiles
entitiesCanvas	HTMLCanvasElement		the canvas for entities
foregroundCanvas	HTMLCanvasElement		the canvas for foreground tiles
textCanvas	HTMLCanvasElement		the canvas for text and UI labels
cursorCanvas	HTMLCanvasElement		the canvas for the cursor
game	Game		an instance of the game

Public Members

public animateTiles: Boolean source

Whether tile animations are enabled

public animatedTiles: Tile[] source

List of tiles that are currently animated

public autoCentre: Boolean source

Whether to automatically centre the camera on the player

public backContext: CanvasRenderingContext2D source

The 2D rendering context for the background

public backgroundCanvas: HTMLCanvasElement source

The background tile canvas element

public brightness: Number source

The current brightness level (0-100)

public camera: Camera source

The camera used to determine visible area

public canvases: HTMLCanvasElement[] source

Array of all canvas elements managed by the renderer

public context: CanvasRenderingContext2D source

The 2D rendering context for entities

public contexts: CanvasRenderingContext2D[] source

Array of all drawing contexts used for tile and entity rendering

public cursorCanvas: HTMLCanvasElement source

The cursor canvas element

public cursorContext: CanvasRenderingContext2D source

The 2D rendering context for the cursor

public debugging: Boolean source

Whether to render debug information

public drawLevels: Boolean source

Whether to draw entity levels above characters

public drawNames: Boolean source

Whether to draw entity names above characters

public drawTarget: Boolean source

Whether to draw the target cell indicator

public drawingScale: Number source

public entities: Entities source

The entities controller

public entitiesCanvas: HTMLCanvasElement source

The entities canvas element

public firefox: Boolean source

Whether the client is running in Firefox

public fontSize: Number source

The base font size for rendered text

public forceRendering: Boolean source

When true the next frame will be rendered even if the camera has not moved

public foreContext: CanvasRenderingContext2D source

The 2D rendering context for the foreground

public foregroundCanvas: HTMLCanvasElement source

The foreground tile canvas element

public fps: Number source

The current frames per second value

public frameCount: Number source

Number of frames rendered in the current second

public game: Game source

Reference to the main game instance

public input: Input source

The input handler

public lastTarget: Number[] source

The last target cell position [x, y]

public map: Map source

public mobile: Boolean source

Whether the client is running on a mobile device

public realFPS: Number source

public renderedFrame: Number[] source

The last rendered camera position [x, y]

public resizeTimeout: number source

Timeout handle used to debounce resize events

public scale: Number source

The current rendering scale factor

public screenHeight: Number source

The screen height in pixels

public screenWidth: Number source

The screen width in pixels

public selectedCellVisible: Boolean source

Whether the selected cell highlight is currently visible

public shadowSprite: Sprite source

public sparksSprite: Sprite source

public stopRendering: Boolean source

When true the render loop is paused

public tablet: Boolean source

Whether the client is running on a tablet device

public targetRect: Object source

public textCanvas: HTMLCanvasElement source

The text canvas element

public textContext: CanvasRenderingContext2D source

The 2D rendering context for text

public tileSize: Number source

The size of a single tile in pixels

public tileset: Object source

public time: Date source

Timestamp used for FPS calculation

Public Methods

public adjustBrightness(level: Number) source

Adjusts the canvas overlay opacity to achieve the desired brightness level

Params:

Name	Type	Attribute	Description
level	Number		the brightness level between 0 and 100

public checkDevice() source

Detects whether the current device is mobile, tablet or Firefox and caches the result

public checkDirty(rectOne: Object, source: Object, x: Number, y: Number) source

Checks whether a bounding rectangle overlaps with nearby entities or tiles and marks them dirty

Params:

Name	Type	Attribute	Description
rectOne	Object		the bounding rectangle to test against
source	Object		the source entity or tile that caused the check
x	Number		the grid x-coordinate around which to search
y	Number		the grid y-coordinate around which to search

public clearAll() source

Clears every tracked rendering context

public clearContext() source

Clears the entities canvas context

public clearDrawing() source

Clears only the background and foreground drawing contexts

public clearScreen(context: CanvasRenderingContext2D) source

Clears the full area of the given context

Params:

Name	Type	Attribute	Description
context	CanvasRenderingContext2D		the context to clear

public clearText() source

Clears the entire text canvas context

public clearTile(context: CanvasRenderingContext2D, gridWidth: Number, cellId: Number) source

Clears the pixel area occupied by a single tile cell on the given context

Params:

Name	Type	Attribute	Description
context	CanvasRenderingContext2D		the context to clear on
gridWidth	Number		the width of the map in tiles
cellId	Number		the flat index of the cell to clear

public draw() source

Draws all static (non-animated) visible tiles onto the background and foreground contexts

public drawAnimatedTiles() source

Draws all animated tiles onto the entities context each frame

public drawCellHighlight(x: Number, y: Number, colour: String) source

Draws a coloured highlight rectangle over a grid cell at the given grid coordinates

Params:

Name	Type	Attribute	Description
x	Number		the grid x-coordinate of the cell
y	Number		the grid y-coordinate of the cell
colour	String		the CSS colour to use for the highlight

public drawCellRect(x: Number, y: Number, colour: String) source

Draws a hollow coloured rectangle outline around a single grid cell

Params:

Name	Type	Attribute	Description
x	Number		the pixel x position of the cell
y	Number		the pixel y position of the cell
colour	String		the CSS colour to use for the stroke

public drawCursor() source

Draws the custom mouse cursor sprite on the cursor canvas

public drawDebugging() source

Draws debug overlays such as FPS, player position and the pathing grid

public drawEntities() source

Iterates over all visible entities and draws each one that has a loaded sprite

public drawEntity(entity: Entity) source

Renders a single entity including its shadow, weapon overlay, item sparks and status effects

Params:

Name	Type	Attribute	Description
entity	Entity		the entity to draw

public drawEntityBack(entity: *) source

Function used to draw special effects prior to rendering the entity.

Params:

Name	Type	Attribute	Description
entity	*

public drawEntityFore(entity: Entity) source

Draws active status-effect sprite overlays on top of the entity after it has been rendered

Params:

Name	Type	Attribute	Description
entity	Entity		the entity to draw effects for

public drawFPS() source

Calculates and draws the current frames-per-second counter on screen

public drawHealth(entity: Entity) source

Draws a health bar above an entity when its health bar is visible

Params:

Name	Type	Attribute	Description
entity	Entity		the entity whose health bar should be drawn

public drawInfos() source

Draws floating damage and status info text above entities

public drawName(entity: Entity) source

Draws the username and/or level label above an entity

Params:

Name	Type	Attribute	Description
entity	Entity		the entity whose name should be drawn

public drawPathing() source

Highlights all non-zero cells in the pathing grid for debugging

public drawPosition() source

Draws the player's current grid position to the screen for debugging

public drawScaledImage(context: CanvasRenderingContext2D, image: HTMLImageElement, x: Number, y: Number, width: Number, height: Number, dx: Number, dy: Number) source

Draws a portion of an image scaled to the current drawing scale factor

Params:

Name	Type	Attribute	Description
context	CanvasRenderingContext2D		the context to draw onto
image	HTMLImageElement		the source image
x	Number		the source x offset in unscaled pixels
y	Number		the source y offset in unscaled pixels
width	Number		the width of the source region in unscaled pixels
height	Number		the height of the source region in unscaled pixels
dx	Number		the destination x position in unscaled pixels
dy	Number		the destination y position in unscaled pixels

public drawSelectedCell() source

Draws a highlight over the cell the player has selected when it is not adjacent

public drawTargetCell() source

Draws a highlight over the cell currently under the mouse cursor

public drawText(text: String, x: Number, y: Number, centered: Boolean, colour: String, strokeColour: String) source

Draws a string of text at the specified canvas coordinates

Params:

Name	Type	Attribute	Description
text	String		the text to render
x	Number		the x position in tile units
y	Number		the y position in tile units
centered	Boolean		whether to centre-align the text
colour	String		the fill colour
strokeColour	String		the stroke/outline colour

public drawTile(context: CanvasRenderingContext2D, tileId: Number, tileset: HTMLImageElement, setWidth: Number, gridWidth: Number, cellId: Number) source

Draws a single tile from the tileset onto the given context at the correct grid position

Params:

Name	Type	Attribute	Description
context	CanvasRenderingContext2D		the context to draw onto
tileId	Number		the tile identifier
tileset	HTMLImageElement		the tileset image
setWidth	Number		the number of tiles per row in the tileset
gridWidth	Number		the width of the map in tiles
cellId	Number		the flat index of the cell in the map grid

public focus() source

Focuses every tracked rendering context

public forEachAnimatedTile(callback: Function) source

Iterates over all currently tracked animated tiles and invokes a callback for each

Params:

Name	Type	Attribute	Description
callback	Function		called with each animated Tile instance

public forEachCanvas(callback: Function) source

Iterates over every tracked canvas element and invokes a callback for each

Params:

Name	Type	Attribute	Description
callback	Function		called with each HTMLCanvasElement

public forEachContext(callback: Function) source

Iterates over every tracked rendering context and invokes a callback for each

Params:

Name	Type	Attribute	Description
callback	Function		called with each CanvasRenderingContext2D

public forEachDrawingContext(callback: Function) source

Iterates over drawing contexts (background and foreground) skipping the entities context

Params:

Name	Type	Attribute	Description
callback	Function		called with each drawing CanvasRenderingContext2D

public forEachVisibleEntity(callback: Function) source

Iterates over all entities occupying visible grid cells and invokes a callback for each

Params:

Name	Type	Attribute	Description
callback	Function		called with each visible Entity instance

public forEachVisibleIndex(callback: Function, offset: Number) source

Iterates over every map index currently visible to the camera and invokes a callback

Params:

Name	Type	Attribute	Description
callback	Function		called with each visible map index
offset	Number		optional tile offset to expand the visible area

public forEachVisibleTile(callback: Function, offset: Number) source

Iterates over all tile IDs in the visible area and invokes a callback for each

Params:

Name	Type	Attribute	Description
callback	Function		called with (tileId, mapIndex) for each visible tile
offset	Number		optional tile offset to expand the visible area

public getDrawingScale(): Number source

Returns the drawing scale factor, clamped to 2 on mobile devices

Return:

Number

public getEntityBounds(entity: Entity): Object source

Calculates and returns the bounding rectangle for an entity in screen space

Params:

Name	Type	Attribute	Description
entity	Entity		the entity to compute bounds for

Return:

Object

public getScale(): Number source

Returns the current rendering scale factor from the game

Return:

Number

public getTargetBounds(x: Number, y: Number): Object source

Calculates and returns the bounding rectangle for the current target cell in screen space

Params:

Name	Type	Attribute	Description
x	Number		optional grid x-coordinate override
y	Number		optional grid y-coordinate override

Return:

Object

public getTileBounds(tile: Tile): Object source

Calculates and returns the bounding rectangle for an animated tile in screen space

Params:

Name	Type	Attribute	Description
tile	Tile		the tile to compute bounds for

Return:

Object

public getTileset(): HTMLImageElement source

Returns the currently active tileset image

Return:

HTMLImageElement

public getUpscale(): Number source

Returns the upscale factor capped at a maximum of 2

Return:

Number

public hasRenderedFrame(): Boolean source

Returns true if the current camera position matches the last rendered frame position

Return:

Boolean

public isPortableDevice(): Boolean source

Returns true if the current device is a mobile or tablet

Return:

Boolean

public isVisiblePosition(x: Number, y: Number): Boolean source

Returns true when the given grid position falls within the camera viewport

Params:

Name	Type	Attribute	Description
x	Number		the grid x-coordinate to test
y	Number		the grid y-coordinate to test

Return:

Boolean

public loadCamera() source

Creates a new Camera and adjusts centring settings based on device capabilities

public loadRenderer() source

Initialises scale and drawing scale values and disables image smoothing on all contexts

public loadSizes() source

Recalculates screen dimensions based on the camera grid size and resizes all canvases

public loadStaticSprites() source

Loads the shadow and sparks static sprites from the entity sprite store

public render() source

Main render function called each frame to draw the full game scene

public resize() source

Handles window resize events by debouncing a full renderer refresh

public restore() source

Calls restore on every tracked rendering context

public restoreAll() source

Restores the state of every tracked rendering context

public saveAll() source

Saves the state of every tracked rendering context

public saveFrame() source

Stores the current camera position as the last rendered frame

public setCameraView(context: CanvasRenderingContext2D) source

Translates a context so that the camera position maps to the top-left of the canvas

Params:

Name	Type	Attribute	Description
context	CanvasRenderingContext2D		the context to apply the camera translation to

public setEntities(entities: Entities) source

Sets the entities controller used during rendering

Params:

Name	Type	Attribute	Description
entities	Entities		the entities controller to use

public setInput(input: Input) source

Sets the input handler used during rendering

Params:

Name	Type	Attribute	Description
input	Input		the input handler to use

public setMap(map: Map) source

Sets the map instance used during rendering

Params:

Name	Type	Attribute	Description
map	Map		the map to use

public setTileset(tileset: HTMLImageElement) source

Sets the tileset image used for tile rendering

Params:

Name	Type	Attribute	Description
tileset	HTMLImageElement		the tileset to use

public stop() source

Stops all rendering and fills each canvas with the background colour

public updateAnimatedTiles() source

Rebuilds the list of animated tiles that are currently within the visible camera area

public updateDrawingView() source

Applies the camera translation to all drawing (non-entity) contexts

public updateView() source

Applies the camera translation to every tracked rendering context

public verifyCentration() source

Updates forceRendering based on whether the device is portable and the camera is centred