public void Crafty.createLayer(string name, string type[, object options])

the name that will refer to the layer


the type of the draw layer to create ('DOM', 'Canvas', or 'WebGL')


this will override the default values of each layer

Creates a new system which implements the specified type of layer. The options (and their default values) are

  xResponse: 1,  // How the layer will pan in response to the viewport x position
  yResponse: 1,  // How the layer will pan in response to the viewport y position
  scaleResponse: 1, // How the layer will scale in response to the viewport scale.  (Layer scale will be scale^scaleResponse.)
  z: 0 // The zIndex of the layer relative to other layers

Crafty will automatically define three built-in layers: "DefaultDOMLayer", DefaultCanvasLayer", and "DefaultWebGLLayer". They will have z values of 30, 20, and 10 respectively, and will be initialized if a "DOM", "Canvas" or "WebGL" component is used with an entity not attached to any user-specified layer.

Note: Layers are implemented as systems, so the layer name must be distinct from other systems.

Note: By default, layers will persist across scene changes. You can manually clean up a layer by removing all it's entities and then destroying it.


Crafty.createLayer("MyCanvasLayer", "Canvas")
Crafty.e("2D, MyCanvasLayer, Color");

Define a custom canvas layer, then create an entity that uses the custom layer to render.


Crafty.createLayer("UILayer", "DOM", {scaleResponse: 0, xResponse: 0, yResponse: 0})
Crafty.e("2D, UILayer, Text");

Define a custom DOM layer that will not move with the camera. (Useful for static UI elements!)


Crafty.createLayer("MyCanvasLayer", "Canvas");
Crafty.s("MyCanvasLayer").one("RenderScene", function(){ this.everRendered = true; });

Create a custom layer, and then bind a method to run the first time it renders.



For a previously defined "MyCanvasLayer", destroy it and all the entities rendered by it.