Layers provide a mechanism for overlaying groups of actors on top of each other.
Layers can also clip their contents to exclude any content outside a user defined area.
- ![ ](../assets/img/layer/layers.png)
![ ](layers.png)
When a layer is added to the stage it is assigned a unique depth value. By default the stage has a root layer with a depth value of 0.
**Note: Layers work independently of the actor hierarchy.**
They can be positioned anywhere in the actor tree, but their draw order is always defined by their layer.getDepth() value.
-~~~{.js}
-// JavaScript Example of adding an actor to the root layer
-
-// using stage.add() will automatically add actor to the root layer
-dali.stage.add( myActor );
-
-// Or you can explicitly add actor to the root layer.
-var rootLayer = dali.stage.getRootLayer();
-rootLayer.add( myActor ); // adds an actor to the root layer
-
-// rootLayer.getDepth() == 0
-
-~~~
-
~~~{.cpp}
// C++ example of adding an actor to the root layer
Example To create two new layers on top of the root layer.
-~~~{.js}
-// JavaScript
-
-var layer1 = new dali.Layer();
-var layer2 = new dali.Layer();
-
-// the initially depth order of each layer, depends on the order
-// it is added to the stage.
-
-dali.stage.add( layer1 ); // will be drawn on top of root layer
-dali.stage.add( layer2 ); // will be drawn on top of layer 1
-
-dali.stage.add( myActor1);
-layer1.add( myActor2);
-layer2.add( myActor3);
-
-// dali.stage.getRootLayer().getDepth = 0 myActor1 drawn first ( on bottom )
-// layer1.getDepth() == 1 myActor2 drawn second ( in middle )
-// layer2.getDepth() == 2 myActor3 drawn last ( on top )
-~~~
-
### Layer clipping
Clips the contents of the layer to a rectangle.
-~~~{.js}
-// JavaScript
-
-layer1.anchorPoint = dali.CENTER;
-layer1.parentOrigin = dali.CENTER;
-layer1.clippingEnable = true;
-layer1.clippingBox = [20,20,100,100]; // X, Y, Width, Height
-~~~
-
~~~{.cpp}
// C++
### Layer_2D
-~~~{.js}
-// JavaScript
-layer.behaviour = "LAYER_2D";
-~~~
-
~~~{.cpp}
// C++
layer.SetBehavior( Layer::LAYER_2D );
If we did dali.stage.getRootLayer().raiseToTop(), then the root layer would be drawn last.
-![ ](../assets/img/layer/layer2d.png)
![ ](layer2d.png)
### Layer_3D
-~~~{.js}
-// JavaScript
-layer.behaviour = "LAYER_3D";
-~~~
-
~~~{.cpp}
// C++
layer.SetBehavior( Layer::LAYER_3D );
Then transparent renderers are drawn with depth test enabled but depth write switched off.
- ![ ](../assets/img/layer/layers3d.png)
![ ](layers3d.png)
Transparent renderers are drawn in order of distance
from the camera ( painter's algorithm ).
- ![ ](../assets/img/layer/transSort.png)
![ ](transSort.png)
Depth testing is not used.
-Example:
-
-~~~{.js}
-// JavaScript
-var layer = new dali.Layer();
-
-layer.behaviour = "LAYER_3D"
-
-dali.stage.add( layer );
-
-layer.add( myActor1 );
-layer.add( myActor2 );
-
-myActor3.drawMode = "OVERLAY_2D";
-
-layer.add( myActor3 ); // actor 3 is drawn on top of actor 1 and 2 as it's in the OVERLAY.
-
-myActor3.add( myActor4 ); // actor 4 is drawn on top of actor 3, which is drawn on top of actor 1 and 2.
-
-myActor3.add( myActor5); // the depth index of actor 4 and 5 renderers will determine which is drawn first
-~~~
-
-
-
-
-
### Layer Actor Specific Properties
| Name | Type | Writable | Animatable|
| clippingBox | ARRAY [0,0,400,600]) | 0 | X|
| behaviour | STRING ( "LAYER_2D" or "LAYER_3D") | 0 | X|
- @class Layer
@extends Actor
*/