Create a layer

Layers are a set of entities with certain characters that form part of the structure of the engine. They are meant to provide both logical and visual separation between parts of the game.

#Setup To create a layer, we create a JSON file and add it to the 'entities' section of the config.json file with the id that we want to refer to it by in the code. Shown below are two examples:

"entities": [
	{"id": "action-layer",    "src": "entities/action-layer.json"}, 
	{"id": "desktop-interface-layer",    "src": "entities/desktop-interface-layer.json"}
]

Once that is in place, we can start editing the layer JSON definition. Here we add all the components that we want to make up the layer. Layers typically contain an Entity-Container and various handlers like Handler-Logic and Handler-Render-Createjs. It may look something like this:

{
    "id": "action-layer",
    "components": [
        {"type": "handler-logic"},
        {"type": "collision-group"},
        {
           "type": "camera",
           "width": 3200 
        },
        {"type": "handler-render-createjs"},
        {"type": "handler-controller"},
        {"type": "entity-container", 
            "entities": [{"type": "collectible-manager"}]
        },
        {"type": "tiled-loader"}
    ]
}

The layer automatically sends a tick to all of its components when it receives it from the Scene.

#Filters One thing that separates a layer JSON definition from a regular entity JSON definition is the filter field which contains include and exclude lists. These lists are read by the Scene to determine whether or not this layer should be loaded. The browser must feature at least one of the items in the include list to be loaded and not include any of the items in the excludes list. The list of features and how they're determined can be found in Browser.

An example is shown below. In this case this layer will load if a browser is touch enabled, but not multi-touch because we have a specific multi-touch layer that we'll use in cases that the browser is multi-touch:

{
    "id": "touch-interface-layer",
    "filter": {
        "includes": ["touch"],
        "excludes": ["multitouch"]
    },
    "components": [
        {"type": "handler-logic"},
        {"type": "handler-render-dom"}
    ]
}