Using multiple layers
Sprites on different layers will be drawn on different, overlapping canvas objects
When you create a sprite, you can pass a layer number into the constructor (this is 1 by default).
WADE uses a separate canvas for each layer. It is often a good idea to use a background canvas for objects that don't move, and another canvas for moving objects, so WADE doesn't have to redraw the background every frame, but will only redraw the moving objects layer.
Layers with a lower number are always drawn in front of layers with a higher number.
App = function()
{
this.load = function()
{
wade.loadImage('/snippets/samples/back.jpg');
wade.loadImage('/snippets/samples/cc_logo.png');
};
this.init = function()
{
// create a logo on layer 5
var logoSprite = new Sprite('/snippets/samples/cc_logo.png', 5);
var logoObject = new SceneObject(logoSprite);
wade.addSceneObject(logoObject);
// create a background on layer 10 (behind the logo)
var backSprite = new Sprite('/snippets/samples/back.jpg', 10);
var backObject = new SceneObject(backSprite);
wade.addSceneObject(backObject);
};
};
Your code was executed successfully!
