JSDoc: Class: Screen

Constructor

new Screen()

Source:

Screen/Screen.js, line 11

Members

_context

The canvas context used by this screen.

Source:

Screen/Screen.js, line 103

_generatedPalette

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

Source:

Screen/Screen.js, line 123

_imageData

The image data of the context.

Source:

Screen/Screen.js, line 108

_isLittleEndian

Does this computer use little endian formatting?

Source:

Screen/Screen.js, line 128

_palette

The palette data given by the user

Source:

Screen/Screen.js, line 118

_screenData

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

Source:

Screen/Screen.js, line 113

canvas

The DOM canvas used by this screen.

Source:

Screen/Screen.js, line 92

conainerId

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

Source:

Screen/Screen.js, line 16

container

The dom object the Screen will be a child of.

Source:

Screen/Screen.js, line 20

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:

Screen/Screen.js, line 98

fontData

Reference to an instance of FontData used by the screen.

Source:

Screen/Screen.js, line 81

height

How many pixels tall is the screen?

Source:

Screen/Screen.js, line 28

hideCursor

Should the cursor be hidden when placed over the screen?

Source:

Screen/Screen.js, line 66

horizontalScaleCushion

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

Source:

Screen/Screen.js, line 51

mapData

Reference to an instance of MapData used by the screen.

Source:

Screen/Screen.js, line 76

maxScale

Maximum scale of the screen.

Source:

Screen/Screen.js, line 36

minScale

Minimum scale of the screen.

Source:

Screen/Screen.js, line 40

onScaleChange

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

Source:

Screen/Screen.js, line 87

rescaleOnWindowResize

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

Source:

Screen/Screen.js, line 61

scale

The scale of the pixels in the screen.

Source:

Screen/Screen.js, line 32

scaleMode

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

Source:

Screen/Screen.js, line 46

tileData

Reference to an instance of TileData used by the screen.

Source:

Screen/Screen.js, line 71

verticalScaleCushion

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

Source:

Screen/Screen.js, line 56

width

How many pixels wide is the screen?

Source:

Screen/Screen.js, line 24

Methods

_buildPalette()

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

Source:

Screen/Screen.js, line 287

_drawCircleBorderOctants()

helper method for drawing circle borders

Source:

Screen/Screen.js, line 774

_drawCircleFilledOctants()

helper method for drawing filled circles

Source:

Screen/Screen.js, line 764

_drawLineHigh()

Draw a line with a slope greater than 1

Source:

Screen/Screen.js, line 530

_drawLineLow()

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

Source:

Screen/Screen.js, line 503

_setCanvasStyle()

Sets css styling on the container dom object.

Source:

Screen/Screen.js, line 221

_setScale()

Sets the scale of the Screen.

Source:

Screen/Screen.js, line 192

clear(paletteId)

Fill the screen with the given palette index

Parameters:

Name	Type	Description
`paletteId`	*	the palette index / defaults to 0 if unspecified

Source:

Screen/Screen.js, line 391

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:

Screen/Screen.js, line 912

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:

Screen/Screen.js, line 1103

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:

Screen/Screen.js, line 681

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:

Screen/Screen.js, line 728

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:

Screen/Screen.js, line 408

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:

Screen/Screen.js, line 979

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:

Screen/Screen.js, line 1035

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:

Screen/Screen.js, line 563

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:

Screen/Screen.js, line 624

drawScreen()

draw the data from _screenData to the canvas

Source:

Screen/Screen.js, line 1128

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:

Screen/Screen.js, line 1078

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:

Screen/Screen.js, line 793

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:

Screen/Screen.js, line 887

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:

Screen/Screen.js, line 379

init()

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

Source:

Screen/Screen.js, line 134

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:

Screen/Screen.js, line 268

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:

Screen/Screen.js, line 279

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:

Screen/Screen.js, line 347

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:

Screen/Screen.js, line 367