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: