Renderer Class
Renders the current game state using html5 canvas.
Constructor
Renderer
-
game -
width -
height -
tileSize -
[canvasClassName='renderer']
Parameters:
-
gameGame- Game instance this obj is attached to.
-
widthNumber- Width of the map view in tiles.
-
heightNumber- Height of the map view in tiles.
-
tileSizeNumber- Width and height of tiles when drawn.
-
[canvasClassName='renderer']String optional- Css class name for the canvas element.
Item Index
Methods
Methods
draw
()
Draws map and entity tiles. All parameters will fall back to this.game. if not provided.
drawBufferToCanvas
()
Copies pixel data from the buffer canvas to the game canvas.
drawTileToCanvas
-
x -
y -
tileData -
[ctx=this.bufferCtx]
Draws a single tile to the map view.
Parameters:
-
xNumber- Map tile coord on the x axis.
-
yNumber- Map tile coord on the y axis.
-
tileDataObject- Object containing tile draw settings.
-
[char]Object optional- The character to draw.
-
[color]Object optional- The color of the character displayed.
-
[bgColor]Object optional- The background color of the tile.
-
[borderColor]Object optional- The border color of the tile.
-
[borderWidth=1]Object optional- The border width of the tile.
-
[ctx=this.bufferCtx]CanvasRenderingContext2D optional- The canvas context to draw to.
fillBg
-
[color=this.bgColor] -
[ctx=this.bufferCtx]
Fills the canvas with a given color.
Parameters:
-
[color=this.bgColor]String optional -
[ctx=this.bufferCtx]CanvasRenderingContext2D optional
mouseToTileCoords
-
x -
y
Converts mouse pixel coords to map tile coords. Mouse pixel coords must be relative to the current window.
Parameters:
-
xNumber- Mouse pixel x coord.
-
yNumber- Mouse pixel y coord.
Returns:
{x: 0, y: 0}
pixelToTileCoords
-
x -
y
Converts map view pixel coords to map tile coords. Map view pixel coords are relative to the top left of the canvas element.
Parameters:
-
xNumber- Map view pixel x coord.
-
yNumber- Map view pixel y coord.
Returns:
{x: 0, y: 0}
resize
()
Resizes canvas elements to match the tileSize and map view with/height. Also adjusts behavior to accomodate high pixel density screens.
setCenter
-
centerX -
centerY
Sets the center map tile of the view.
Parameters:
-
centerXNumber- Center map tile x coord.
-
centerYNumber- Center map tile y coord.
Properties
bgColor
String
Background color of map view.
buffer
HTMLCanvasElement
Canvas element this renderer draws to as a buffer for this.canvas.
bufferCtx
CanvasRenderingContext2D
Drawing context of this.buffer
canvas
HTMLCanvasElement
Canvas element this renderer draws to.
ctx
CanvasRenderingContext2D
Drawing context of this.canvas
devicePixelRatio
Number
Device pixel ratio for high dpi screens.
font
String
Font used to render tile characters.
height
Number
Map view height in tiles.
hoverColor
String
Color overlayed when mouse is over a tile.
hoveredTileX
Number | Null
The map tile x coord of the tile currently being hovered by the mouse.
hoveredTileY
Number | Null
The map tile y coord of the tile currently being hovered by the mouse.
nonVisibleTileAlpha
Number
Alpha value applied to non-visible tiles
offsetX
Number
The x distance in tiles from center to upper left corner of map view.
offsetY
Number
The y distance in tiles from center to upper left corner of map view.
originX
Number
The map tile x coord of the tile drawn in the upper left corner of the map view.
originY
Number
The map tile y coord of the tile drawn in the upper left corner of the map view.
tileSize
Number
Size of each tile is drawn.
width
Number
Map view width in tiles.