TileLayer

Tile Layer - cached rendering system for tile layers

  • Each Tile layer is rendered to an off screen canvas
  • To allow dynamic modifications, layers are rendered using canvas 2d
  • Some devices like mobile phones are limited to 4k texture resolution
  • So with 16x16 tiles this limits layers to 256x256 on mobile devices

Constructor

new TileLayer(positionopt, sizeopt, tileInfoopt, scaleopt, renderOrderopt)

Create a tile layer object

Parameters:
NameTypeAttributesDefaultDescription
positionVector2<optional>
(0,0)

World space position

sizeVector2<optional>
tileCollisionSize

World space size

tileInfoTileInfo<optional>

Tile info for layer

scaleVector2<optional>
(1,1)

How much to scale this layer when rendered

renderOrderNumber<optional>
0

Objects are sorted by renderOrder

Example
// create tile collision and visible tile layer
initTileCollision(vec2(200,100));
const tileLayer = new TileLayer();

Extends

Members

additiveColor

Properties
TypeDescription
Color

Additive color to apply when rendered

angle

Properties
TypeDescription
Number

Angle to rotate the object

angleDamping

Properties
NameTypeAttributesDefaultDescription
angleDampingNumber<optional>
objectDefaultAngleDamping

How much to slow down rotation each frame (0-1)

angleVelocity

Properties
TypeDescription
Number

Angular velocity of the object

canvas

Properties
TypeDescription
HTMLCanvasElement

The canvas used by this tile layer

children

Properties
TypeDescription
Array

List of children of this object

clampSpeedLinear

Properties
TypeDescription
Boolean

Limit object speed using linear or circular math

collideRaycast

Properties
TypeDescription
Boolean

Object collides with raycasts

collideSolidObjects

Properties
TypeDescription
Boolean

Object collides with solid objects

collideTiles

Properties
TypeDescription
Boolean

Object collides with the tile collision

color

Properties
TypeDescription
Color

Color to apply when rendered

context

Properties
TypeDescription
CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D

The 2D canvas context used by this tile layer

damping

Properties
NameTypeAttributesDefaultDescription
dampingNumber<optional>
objectDefaultDamping

How much to slow down velocity each frame (0-1)

drawSize

Properties
TypeDescription
Vector2

Size of object used for drawing, uses size if not set

elasticity

Properties
NameTypeAttributesDefaultDescription
elasticityNumber<optional>
objectDefaultElasticity

How bouncy the object is when colliding (0-1)

friction

Properties
NameTypeAttributesDefaultDescription
frictionNumber<optional>
objectDefaultFriction

How much friction to apply when sliding (0-1)

gravityScale

Properties
TypeDescription
Number

How much to scale gravity by for this object

isOverlay

Properties
TypeDescription
Boolean

If true this layer will render to overlay canvas and appear above all objects

isSolid

Properties
TypeDescription
Boolean

Object collides with and blocks other objects

localAngle

Properties
TypeDescription
Number

Local angle if child

localPos

Properties
TypeDescription
Vector2

Local position if child

mass

Properties
NameTypeAttributesDefaultDescription
massNumber<optional>
objectDefaultMass

How heavy the object is, static if 0

mirror

Properties
TypeDescription
Boolean

Should it flip along y axis when rendered

parent

Properties
TypeDescription
EngineObject

Parent of object if in local space

pos

Properties
TypeDescription
Vector2

World space position of the object

renderOrder

Properties
TypeDescription
Number

Objects are sorted by render order

savedRenderSettings

scale

Properties
TypeDescription
Vector2

How much to scale this layer when rendered

size

Properties
TypeDescription
Vector2

World space width and height of the object

spawnTime

Properties
TypeDescription
Number

Track when object was created

tileInfo

Properties
TypeDescription
TileInfo

Tile info to render object (undefined is untextured)

velocity

Properties
TypeDescription
Vector2

Velocity of the object

Methods

addChild(child, localPosopt, localAngleopt)

Attaches a child to this with a given local transform

Parameters:
NameTypeAttributesDefaultDescription
childEngineObject
localPosVector2<optional>
(0,0)
localAngleNumber<optional>
0

applyAcceleration(acceleration)

Apply acceleration to this object (adjust velocity, not affected by mass)

Parameters:
NameTypeDescription
accelerationVector2

applyForce(force)

Apply force to this object (adjust velocity, affected by mass)

Parameters:
NameTypeDescription
forceVector2

collideWithObject(object) → {Boolean}

Called to check if a object collision should be resolved

Parameters:
NameTypeDescription
objectEngineObject

the object to test against

Returns:
  • true if the collision should be resolved
Type: 
Boolean

collideWithTile(tileData, pos) → {Boolean}

Called to check if a tile collision should be resolved

Parameters:
NameTypeDescription
tileDataNumber

the value of the tile at the position

posVector2

tile where the collision occured

Returns:
  • true if the collision should be resolved
Type: 
Boolean

destroy()

Destroy this object, destroy it's children, detach it's parent, and mark it for removal

drawCanvas2D(pos, size, angle, mirror, drawFunction)

Draw directly to the 2D canvas in world space (bipass webgl)

Parameters:
NameTypeDescription
posVector2
sizeVector2
angleNumber
mirrorBoolean
drawFunctionfunction

drawRect(pos, sizeopt, coloropt, angleopt)

Draw a rectangle directly onto the layer canvas in world space

Parameters:
NameTypeAttributesDefaultDescription
posVector2
sizeVector2<optional>
(1,1)
colorColor<optional>
(1,1,1,1)
angleNumber<optional>
0

drawTile(pos, sizeopt, tileInfoopt, coloropt, angleopt, mirroropt)

Draw a tile directly onto the layer canvas in world space

Parameters:
NameTypeAttributesDefaultDescription
posVector2
sizeVector2<optional>
(1,1)
tileInfoTileInfo<optional>
colorColor<optional>
(1,1,1,1)
angleNumber<optional>
0
mirrorBoolean<optional>
0

drawTileData(layerPos, clearopt)

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

Parameters:
NameTypeAttributesDefaultDescription
layerPosVector2
clearBoolean<optional>
true

should the old tile be cleared out

getAliveTime() → {Number}

How long since the object was created

Returns:
Type: 
Number

getData(layerPos) → {TileLayerData}

Get data at a given position in the array

Parameters:
NameTypeDescription
layerPosVector2

Local position in array

Returns:
Type: 
TileLayerData

getMirrorSign() → {Number}

Get the direction of the mirror

Returns:

-1 if this.mirror is true, or 1 if not mirrored

Type: 
Number

localToWorld(pos)

Convert from local space to world space

Parameters:
NameTypeDescription
posVector2

local space point

localToWorldVector(vec)

Convert from local space to world space for a vector (rotation only)

Parameters:
NameTypeDescription
vecVector2

local space vector

redraw()

Draw all the tile data to an offscreen canvas

  • This may be slow in some browsers but only needs to be done once

redrawEnd()

Call to end the redraw process

redrawStart(clearopt)

Call to start the redraw process

  • This can be used to manually update small parts of the level
Parameters:
NameTypeAttributesDefaultDescription
clearBoolean<optional>
false

Should it clear the canvas before drawing

removeChild(child)

Removes a child from this one

Parameters:
NameTypeDescription
childEngineObject

render()

Render the object, draws a tile by default, automatically called each frame, sorted by renderOrder

renderDebugInfo()

Render debug info for this object

setCollision(collideSolidObjectsopt, isSolidopt, collideTilesopt, collideRaycastopt)

Set how this object collides

Parameters:
NameTypeAttributesDefaultDescription
collideSolidObjectsBoolean<optional>
true

Does it collide with solid objects?

isSolidBoolean<optional>
true

Does it collide with and block other objects? (expensive in large numbers)

collideTilesBoolean<optional>
true

Does it collide with the tile collision?

collideRaycastBoolean<optional>
true

Does it collide with raycasts?

setData(layerPos, data, redrawopt)

Set data at a given position in the array

Parameters:
NameTypeAttributesDefaultDescription
layerPosVector2

Local position in array

dataTileLayerData

Data to set

redrawBoolean<optional>
false

Force the tile to redraw if true

toString() → {String}

Returns string containg info about this object for debugging

Returns:
Type: 
String

update()

Update the object physics, called automatically by engine once each frame

updateTransforms()

Update the object transform, called automatically by engine even when paused

worldToLocal(pos)

Convert from world space to local space

Parameters:
NameTypeDescription
posVector2

world space point

worldToLocalVector(vec)

Convert from world space to local space for a vector (rotation only)

Parameters:
NameTypeDescription
vecVector2

world space vector