A Layer is a self-contained collection of objects which are both Updatable and Drawable. The layer is a very beak wrapper around a basic array, which allows unsafe access to the array for maximum convenience and flexibility.

Layer z-indexing is controlled by a layer's position in the list of layers passed to the game renderer (item 0 is at z-index 0). Re-ordering of z-index will be automatically handled from list positions. Non-layer elements start at a z-index of 50, and debug renderers occupy z-index 49. In theory this means that you should never created more than 49 layers. In practice, you should not use a number of layers anywhere close to 49. Even 10 is probably overkill in most circumstances.


// Assuming a Game object as 'game' with 'layers' ordered update list
game['layers'].add('default', new Layer());

// Add some items to the layer

Implementation Details

Reference paths

  • '/foundation/_digest.ts'
  • '/foundation/core/actors/_digest.ts'
  • '/foundation/core/actors/Layer.ts'


This type extends:

If a layer's active property is set to false, it's rendering context will be hidden (i.e. the layer will be hidden). If a layer's active property is set to true, it's rendering context will be shown (i.e. the layer will be shown).


This type does not implement any interfaces (except those in the base).

Public Properties

sticky: boolean

  • If true, the offset of the camera will not be taken into account when drawing the objects in this layer (i.e. the items will be drawn relative to the view-port, not the world).

items: UpdatableDrawable[]

  • A reference to the raw list of items contained on the layer. This has been made public for maximum flexibility with dealing with item order, etc. However, manually adding or removing items from this array should be considered unsafe, instead, use the method provided (see below). Of course, the are times where 'unsafe' is okay, once you know the implications. See the push / remove methods.

isStatic: boolean

  • If a layer is marked static, once it is drawn, its drawNext property will be set to false. See below.

drawNext: boolean

  • Whether or not the layer should be rendered in the next update. Setting this property to false indicates that a layer does not need to be re-rendered on the next update. This differs from making the layer inactive in that the layer will still be displayed (as drawn in the previous update). If a layer is marked isStatic this property will be set to false once the layer has been drawn for the first time. If the isStatic layer needs to be re-rendered, set drawNext to true and the process will repeat (render once, until this property is manually re-set).

ctx: CanvasRenderingContext2D | WebGLRenderingContext

  • Each layer holds its own, accessible, rendering context.


public constructor(sticky: boolean = false)

  • See property explanation for sticky. Defaults to false.

Instance Methods

public pushBack(item: UpdatableDrawable): Layer

  • Adds item to the end of the items list. Item will be the last in order for updates and draws of the layer.
  • Additionally, handles back-referencing for item to the layer. Item types can only be owned by 1 layer at a time and these methods ensure that the last layer an item was added to is the layer that takes ownership of it.
  • If the item currently belongs to another layer, it will be removed from it before ownership is taken.

public pushFront(item: UpdatableDrawable): Layer

  • As per pushBack() but adds items to the beginning of the list. Item will be first in order for updates and draws of the layer.

public remove(item: UpdatableDrawable): boolean

  • Removes the passed item from the list.
  • Additionally, nulls the item's back-reference to the layer.