LittleJS 1.28.0

TileLayers

TileLayer

Tile Layer - cached rendering system for tile layers

  • Tiles are drawn once into a texture, a WebGL render target, or the layer's canvas when WebGL is off or useWebGL is false, and the layer draws that as one image
  • Some devices like mobile phones are limited to 4k textures, which with 16x16 tiles limits a layer to 256x256
  • Tile layers are centered on their corner, so normal levels are at (0,0)

Extends CanvasLayer

Extended by TileCollisionLayer

Constructor

new TileLayer(pos, size, tileInfo, renderOrder, useWebGL)engineTileLayer.js:760

Create a tile layer object

pos Vector2

World space position

size Vector2

World space size

tileInfo TileInfo optional

Default tile info for layer (used for size and texture), tile() by default, none when no image is loaded

renderOrder number optional, default 0

Objects are sorted by renderOrder

useWebGL boolean optional, default true

Should this layer use WebGL for rendering

const tileLayer = new TileLayer(vec2(), vec2(200,100));

Members

Methods

Inherited from CanvasLayer

Inherited from EngineObject

Members

data : Array<TileLayerData>engineTileLayer.js:781

Array of tile data for the layer

debugShow : booleanengineTileLayer.js:789

Show this layer's bounds and values when the debug overlay's Debug Tiles is on, turn it off for layers that only add noise

isUsingWebGL : booleanengineTileLayer.js:783

Is this layer using a webgl texture?

savedRenderSettings : [CanvasRenderingContext2D|OffscreenCanvasRenderingContext2D, Vector2, Vector2, number, number, Color, Shader|undefined]engineTileLayer.js:908
tileInfo : TileInfo|undefinedengineTileLayer.js:779

Default tile info for layer

Methods

clearData(layerPos, redraw)engineTileLayer.js:841

Clear data at a given position in the array

layerPos Vector2

Local position in array

redraw boolean optional, default false

Force the tile to redraw if true

clearLayerRect(pos, size)engineTileLayer.js:1076

Clear a rectangle in layer space

pos Vector2

position in pixel coordinates

size Vector2
drawLayerRect(pos, size, color, angle)engineTileLayer.js:1024

Draw a rectangle in layer space

pos Vector2
size Vector2
color Color optional, default WHITE

Color to modulate with

angle number optional, default 0

Angle to rotate by

drawLayerTile(pos, size, tileInfo, color, angle, mirror, additiveColor)engineTileLayer.js:1011

Draw textured tile in layer space

pos Vector2

Position in pixel coordinates

size Vector2 optional, default vec2(1)

Size of the tile

tileInfo TileInfo optional

Tile info to use, untextured if undefined

color Color optional, default WHITE

Color to modulate with

angle number optional, default 0

Angle to rotate by

mirror boolean optional

Is the image flipped left to right?

additiveColor Color optional

Additive color to be applied if any

drawRect(pos, size, color, angle)engineTileLayer.js:1069

Draw a rectangle onto the layer canvas in world space

pos Vector2
size Vector2 optional, default vec2(1)
color Color optional, default WHITE
angle number optional
drawTile(pos, size, tileInfo, color, angle, mirror)engineTileLayer.js:1034

Draw a tile onto the layer canvas in world space

pos Vector2
size Vector2 optional, default vec2(1)
tileInfo TileInfo optional
color Color optional, default WHITE
angle number optional, default 0
mirror boolean optional, default false
drawTileData(layerPos, clear)engineTileLayer.js:966

Draw the tile at a given position in the tile layer This can be used to clear out tiles when they are destroyed Tiles can also be redrawn if inside a redrawStart/End block

layerPos Vector2
clear boolean optional, default true

should the old tile be cleared out

getData(layerPos) → TileLayerData|undefinedengineTileLayer.js:847

Get data at a given position in the array

layerPos Vector2

Local position in array

onRedraw()engineTileLayer.js:870

Called after this layer is redrawn, does nothing by default

redraw()engineTileLayer.js:874

Draw all the tile data to an offscreen canvas

  • This may be slow if not using webgl but only needs to be done once
redrawEnd()engineTileLayer.js:945

Call to end the redraw process

redrawStart(clear)engineTileLayer.js:900

Call to start the redraw process

  • This can be used to manually update parts of the level
clear boolean optional, default false

Should it clear the canvas before drawing

redrawTileData(layerPos, clear)engineTileLayer.js:993

Draw the tile at a given position in the tile layer This can be used to clear tiles when they are destroyed For better performance use drawTileData inside a redrawStart/End block

layerPos Vector2
clear boolean optional, default true

should the old tile be cleared

setData(layerPos, data, redraw)engineTileLayer.js:824

Set data at a given position in the array

layerPos Vector2

Local position in array

data TileLayerData

Data to set

redraw boolean optional, default false

Force the tile to redraw if true