Class: Screen

Screen()

Represents a game screen for low resolution games. Has simple drawing functions using an indexed palette of a maximum of 256 colors The origin (0, 0) position of the screen is on the bottom left

Constructor

new Screen()

Source:

Members

_context

The canvas context used by this screen.
Source:

_generatedPalette

Typed Array of paletted data generated from _palette and used by the Screen.
Source:

_imageData

The image data of the context.
Source:

_isLittleEndian

Does this computer use little endian formatting?
Source:

_palette

The palette data given by the user
Source:

_screenData

The pixel data drawn to using Screen methods such as setPixel or drawLine
Source:

canvas

The DOM canvas used by this screen.
Source:

conainerId

The id of the container div to make the Screen a child of
Source:

container

The dom object the Screen will be a child of.
Source:

dataOnlyMode

This mode runs the engine without drawing to a canvas or playing audio. This is useful to use the engine to generate image data.
Source:

fontData

Reference to an instance of FontData used by the screen.
Source:

height

How many pixels tall is the screen?
Source:

hideCursor

Should the cursor be hidden when placed over the screen?
Source:

horizontalScaleCushion

How many horizontal pixels to ignore when using a dynamic scale.
Source:

mapData

Reference to an instance of MapData used by the screen.
Source:

maxScale

Maximum scale of the screen.
Source:

minScale

Minimum scale of the screen.
Source:

onScaleChange

Callback that is called whenever the scale is changed. Used by the Engine to change values in the Input class.
Source:

rescaleOnWindowResize

When using dynamic scaling, should we rescale when the window is resized?
Source:

scale

The scale of the pixels in the screen.
Source:

scaleMode

The scale mode of the screen. Screen.SCALE_CONSTANT: 1, Screen.SCALE_FIT_WINDOW: 2
Source:

tileData

Reference to an instance of TileData used by the screen.
Source:

verticalScaleCushion

How many vertical pixels to ignore when using a dynamic scale.
Source:

width

How many pixels wide is the screen?
Source:

Methods

_buildPalette()

Build the palette by converting _palette to the _generatedPalette we will be using internally
Source:

_drawCircleBorderOctants()

helper method for drawing circle borders
Source:

_drawCircleFilledOctants()

helper method for drawing filled circles
Source:

_drawLineHigh()

Draw a line with a slope greater than 1
Source:

_drawLineLow()

Draw a line with a slope less than or equal to 1
Source:

_setCanvasStyle()

Sets css styling on the container dom object.
Source:

_setScale()

Sets the scale of the Screen.
Source:

clear(paletteId)

Fill the screen with the given palette index
Parameters:
Name Type Description
paletteId * the palette index / defaults to 0 if unspecified
Source:

drawArray(arrayData, arrayWidth, arrayHeight, screenX, screenY, flip, rotate)

Draw an array
Parameters:
Name Type Default Description
arrayData array array of palette data
arrayWidth number the width of the array data
arrayHeight number the height of the array data
screenX number the x position on the screen
screenY number the y position on the screen
flip number 0 should we flip the tiles? 0: no, 1: x, 2: y, 3: xy
rotate number 0 The number of degrees to rotate. Only 90 degree increments are supported.
Source:

drawChar(charCode, x, y, paletteId, outlinePaletteId, font)

Draw an individual character to the screen
Parameters:
Name Type Default Description
charCode number the unicode point to draw
x number the x position on the screen to draw to
y number the y position on the screen to draw to
paletteId number the palette id for the main color
outlinePaletteId number 0 the palette id for the outline color
font number 0 the index of the font to use
Source:

drawCircle(centerX, centerY, radius, paletteId)

Draw a filled circle
Parameters:
Name Type Description
centerX number the x coordinate of the center of the circle
centerY numbe the y coordinate of the center of the circle
radius number the radius of the circle
paletteId number the palette color to draw
Source:

drawCircleBorder(centerX, centerY, radius, paletteId)

Draw a circle border
Parameters:
Name Type Description
centerX number the x coordinate of the center of the circle
centerY numbe the y coordinate of the center of the circle
radius number the radius of the circle
paletteId number the palette color to draw
Source:

drawLine(x1, y1, x2, y2, paletteId)

Draw a line between 2 positions
Parameters:
Name Type Description
x1 * first x position
y1 * first y position
x2 * second x position
y2 * second y position
paletteId * palette index to be drawn
Source:

drawMap(x, y, width, height, screenX, screenY, map, layer, onDrawTile)

Draw a TileMap layer to the screen
Parameters:
Name Type Default Description
x number origin x position on the TileMap
y number origin y position on the TileMap
width number how many tiles wide to draw, -1 is the width of the Tile Map
height number how many tiles high to draw, -1 is the height of the Tile Map
screenX number 0 origin x position on the screen
screenY number 0 origin y position on the screen
map number 0 the index of the tilemap to draw
layer number 0 the index of the layer to draw
onDrawTile number null function to override individual tile values, (gid, x, y) => { gid, flip, rotate };
Source:

drawMapArray(arrayData, arrayWidth, arrayHeight, screenX, screenY, onDrawTile)

Draw an array of Tile gids to the screen
Parameters:
Name Type Default Description
arrayData array array of tile gid data
arrayWidth number the width of the array data
arrayHeight number the height of the array data
screenX number 0 origin x position on the screen
screenY number 0 origin y position on the screen
onDrawTile number null function to override individual tile values, (gid, x, y) => { gid, flip, rotate };
Source:

drawRect(x, y, width, height, paletteId)

Draw a filled rectangle
Parameters:
Name Type Description
x * bottom left x position
y * bottom left y position
width * width of the rectangle
height * height of the rectangle
paletteId * the palette color to draw
Source:

drawRectBorder(x, y, width, height, paletteId)

Draw a rectangle border
Parameters:
Name Type Description
x * bottom left x position
y * bottom left y position
width * width of the rectangle
height * height of the rectangle
paletteId * the palette color to draw
Source:

drawScreen()

draw the data from _screenData to the canvas
Source:

drawText(text, x, y, paletteId, outlinePaletteId, font)

Draw a line of text to the screen. Newlines are not supported, this will draw just a single line
Parameters:
Name Type Default Description
text string the text to draw
x number the x position on the screen to draw to
y number the y position on the screen to draw to
paletteId number the palette if for the main color
outlinePaletteId number 0 the palette id for the outline color
font number 0 the index of the font to use
Source:

drawTile(gid, x, y, flip, rotate)

Draw a tile
Parameters:
Name Type Default Description
gid number the gid of the tile
x number the x position on the screen
y number the y position on the screen
flip number 0 should we flip the tile? 0: no, 1: x, 2: y, 3: xy
rotate number 0 The number of degrees to rotate. Only 90 degree increments are supported.
Source:

drawTileSection(gid, width, height, screenX, screenY, flip, rotate)

Draw a section of a tile map
Parameters:
Name Type Default Description
gid number the gid of bottom left tile in the section
width number the width in tiles of the section
height number the height in tiles of the section
screenX number the x position on the screen
screenY number the y position on the screen
flip number 0 should we flip the tiles? 0: no, 1: x, 2: y, 3: xy
rotate number 0 The number of degrees to rotate. Only 90 degree increments are supported.
Source:

getPixel(x, y)

Get the pallete index at a given position on the screen
Parameters:
Name Type Description
x * x position
y * y position
Source:

init()

Do initial setup such as creating the canvas and building the palette
Source:

setPalette(palette)

Set the palette that will used by the Screen. All colors are drawn fully opaque exept for the palette index at 0 which is transparent
Parameters:
Name Type Description
palette Array The array of colors to be used by the screen. Each index should be a color described by an array of 3 integers in rgb order. Each integer has a min value of 0 and a max value of 255.
Source:
Example
const palette = [
 '000000', // black, the 0 index is transparent
 '000000', // black
 'ffffff', // white
 'ff0000', // red
 '00ff00', // green
 '0000ff' // blue
];

screen.setPalette( palette );

setPaletteColorAtIndex(color, index)

Change a single palette color
Parameters:
Name Type Description
color Array.<number> The color we want to add
index number this palette index we want to set
Source:

setPixel(x, y, paletteId)

Set a pixel on the screen. The origin (0, 0) of the screen is on the bottom left
Parameters:
Name Type Description
x number x position
y number y position
paletteId number palette color index
Source:

setPixelUnsafe(x, y, paletteId)

Set a pixel on the screen, without doing any bounds checking
Parameters:
Name Type Description
x number x position
y number y position
paletteId number palette color index
Source: