loading graphic layers works with right order

app/Game/Client/Loader/Level.js

@@ -88,6 +88,13 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) {
         return paths;
     };
 
+    Level.prototype.setupLayer = function(options, behind, referenceId) {
+        Parent.prototype.setupLayer.call(this, options, behind, referenceId);
+        console.log(options.layerId, behind, referenceId);
+        Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, 1, behind, referenceId);
+    };
+
+/*
     Level.prototype.createItems = function(options) {
         options.layerId = AbstractLayer.ID.ITEM;
         Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, 1, AbstractLayer.ID.SPAWN, true);
@@ -110,5 +117,10 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) {
         Parent.prototype.createSpawnPoints.call(this, options);
     };
 
+    Level.prototype.createContainer = function(options) {
+
+        Parent.prototype.createContainer.call(this, options);
+    };
+*/
     return Level;
 });

app/Game/Client/Loader/TiledLevel.js

@@ -1,9 +1,10 @@
 define([
 	"Game/Core/Loader/TiledLevel",
-	"Game/Config/Settings"
+	"Game/Config/Settings",
+    "Lib/Utilities/NotificationCenter",
 ],
  
-function (Parent, Settings) {
+function (Parent, Settings, Nc) {
  
     function TiledLevel(uid, engine, gameObjects) {
         this.layerId = "background";
@@ -55,12 +56,38 @@ function (Parent, Settings) {
 	    	paths.push(texturePath);
         };
 
+        // FIXME: iterate through image layers and add images
         var background = this.getLayer(levelData, "background");
         paths.push(Settings.MAPS_PATH + background.image);
 
         return paths;
     }
 
+    TiledLevel.prototype.setupLayer = function(options, behind, referenceId) {
+        
+        Parent.prototype.setupLayer.call(this, options, behind, referenceId);
+
+        // So far only one image per layer is possible because of Tiled editor
+        if (options.type == "imagelayer") {
+
+            var texturePath = Settings.MAPS_PATH + options.image;
+
+            var callback = function(mesh) {
+                Nc.trigger(Nc.ns.client.view.mesh.add, options.layerId, mesh);
+            }
+       
+            Nc.trigger(Nc.ns.client.view.mesh.create,
+                options.layerId,
+                texturePath, 
+                callback,
+                {
+                    x: 200
+                }
+            );
+        }
+
+    };
+
     TiledLevel.prototype.addBackground = function(options) {
         var texturePath = Settings.GRAPHICS_PATH + options.image;
 

app/Game/Client/View/Abstract/View.js

@@ -33,7 +33,6 @@ function (Abstract, DomController, Settings, Exception, Nc) {
     }
 
     Abstract.prototype.addMethod.call(AbstractView, 'render');
-    Abstract.prototype.addMethod.call(AbstractView, 'createAndInsert', ['id', 'parallaxSpeed', 'referenceId', 'behind']);
     Abstract.prototype.addMethod.call(AbstractView, 'addFilter', ['mesh', 'options']);
     Abstract.prototype.addMethod.call(AbstractView, 'removeFilter', ['mesh', 'options']);
     Abstract.prototype.addMethod.call(AbstractView, 'setCameraPosition', ['x', 'y']);

app/Game/Client/View/LayerManager.js

@@ -22,7 +22,11 @@ function (Nc, Exception, Layer) {
         ];
     }
  
-    LayerManager.prototype.createAndInsert = function(id, parallaxSpeed, referenceId, behind) {
+    /*
+     * If no referenceId is given, the layer is inserted in the far background (behind=true)
+     * or in the foreground (behind=false/null)
+     */
+    LayerManager.prototype.createAndInsert = function(id, parallaxSpeed, behind, referenceId) {
 
         var referenceIndex = -1;
         behind = !!behind;
@@ -44,11 +48,13 @@ function (Nc, Exception, Layer) {
         }
 
         var layer =  new Layer(id, parallaxSpeed);
-        var layerIndex = behind ? referenceIndex -1 : referenceIndex;
+        var layerIndex = behind ? referenceIndex : referenceIndex + 1;
 
         this.layers.splice(layerIndex, 0, layer);
         
         this.rearrangeLayers();
+
+        console.log(this.layers.map(function(o) {return o.name}))
     };
 
     LayerManager.prototype.rearrangeLayers = function() {

app/Game/Core/Loader/Level.js

@@ -65,6 +65,15 @@ define([
         this.spawnPoints = points;
     };
 
+    Level.prototype.setupLayer = function(options, behind, referenceId) {
+        // will be extended (so far only in client)
+    }
+
+
+    Level.prototype.createContainer = function(options) {
+        // nothing to do here yet, in the future perhaps synchronize day/night graphics
+    };
+
     Level.prototype.getRandomSpawnPoint = function() {
         if(!this.spawnPoints) {
             return {

app/Game/Core/Loader/TiledLevel.js

@@ -6,20 +6,21 @@ define([
     "Lib/Utilities/Options",
     "Lib/Utilities/Exception",
     "Lib/Utilities/NotificationCenter",
+    "Game/Client/View/Abstract/Layer", 
     "Game/" + GLOBALS.context + "/Collision/Detector",
     "Game/" + GLOBALS.context + "/GameObjects/Tile",
     "Game/" + GLOBALS.context + "/GameObjects/Item",
     "Game/" + GLOBALS.context + "/GameObjects/Items/Skateboard",
 
-], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, Nc, CollisionDetector, Tile, Item, Skateboard) {
+], function (Parent, Settings, ItemSettings, Box2D, Options, Exception, Nc, AbstractLayer, CollisionDetector, Tile, Item, Skateboard) {
     
     function TiledLevel (path, engine) {
 
         this.layerMapping = {
             tiles: this.createTiles.bind(this),
-            //collision: this.createTiles.bind(this), collision renamed to tiles
             items: this.createItems.bind(this),
             spawnpoints: this.createSpawnPoints.bind(this)
+            //collision: this.createTiles.bind(this), collision renamed to tiles
         };
 
         this.levelData = null;
@@ -32,42 +33,87 @@ define([
     TiledLevel.prototype.setup = function(levelData) {
         this.levelData = levelData;
 
-        // Make sure spawnpoints layer is created first because of add before and behind
+        var spawnpointsExists = levelData.layers.some(function(o) {
-        var layers = levelData.layers.sort(function(a, b) {
+            return o.name == "spawnpoints";
-            return a.name == "spawnpoints" ? -1 : b.name == "spawnpoints" ? 1 : 0;
         });
 
-        for (var i = 0; i < layers.length; i++) {
+        if (!spawnpointsExists) {
-            var layerOptions = layers[i];
-            layerOptions.z = i;
-            if(this.layerMapping[layerOptions.name]) {
-
-                this.layerMapping[layerOptions.name](layerOptions);
-            } else {
             console.warn('No layerMapping for level file layer: ' + layerOptions.name);
+            return;
         }
+
+        function getLayerId(name, i) {
+            var mapping = {
+                tiles: AbstractLayer.ID.TILE,
+                items: AbstractLayer.ID.ITEM,
+                spawnpoints: AbstractLayer.ID.SPAWN
+            }
+            if(mapping[name]) {
+                return mapping[name];
+            }
+
+            return "layer-" + i + "-" + name;
+        }
+
+        var spawnpointsFound = false,
+            lastLayerId;
+
+        // from spawnpoints to background
+        for (var i = levelData.layers.length - 1; i >= 0; i--) {
+            var layerOptions = levelData.layers[i];
+            layerOptions.z = i;
+            layerOptions.layerId = getLayerId(layerOptions.name, i);
+
+            if (layerOptions.name == "spawnpoints") {
+                spawnpointsFound = true;
+            }
+
+            if (!spawnpointsFound) {
+                continue;
+            }
+
+            this.setupLayer(layerOptions, true, lastLayerId);
+
+            if(this.layerMapping[layerOptions.name]) {
+                this.layerMapping[layerOptions.name](layerOptions);
+            }
+
+            lastLayerId = layerOptions.layerId;
+        }
+
+        spawnpointsFound = false; // reset (used in mkLayer)
+        lastLayerId = AbstractLayer.ID.SPAWN;
+
+
+        // from spawnpoints to foreground
+        for (var i = 0; i < levelData.layers.length; i++) {
+            var layerOptions = levelData.layers[i];
+            layerOptions.z = i;
+            layerOptions.layerId = getLayerId(layerOptions.name, i);
+
+            if (layerOptions.name == "spawnpoints") {
+                spawnpointsFound = true;
+                continue;
+            }
+
+            if (!spawnpointsFound) {
+                continue;
+            }
+
+            this.setupLayer(layerOptions, false, lastLayerId);
+
+            if(this.layerMapping[layerOptions.name]) {
+                this.layerMapping[layerOptions.name](layerOptions);
+            }
+
+            lastLayerId = layerOptions.layerId;
         };
 
+
         Parent.prototype.setup.call(this, levelData);
     };
-/*
-    TiledLevel.prototype.addBackground = function(path) {
-
-        var texturePath = Settings.GRAPHICS_PATH + "Backgrounds/starnight.png";
-        var callback = function (mesh) {
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh, 0); // FIXME: add at z layer -1 or so
-        }
-        Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
-            width: 4000,
-            height: 2959, 
-            x: -(4000 - Settings.STAGE_WIDTH) / 2,
-            y: -(2959 + Settings.STAGE_HEIGHT + 700) / 2
-        });
-    }
-*/
 
     TiledLevel.prototype.createTiles = function(options) {
-        console.log('core tiledlevel createTiles');
 
         var data = options.data;
         var tilesOptions = [];