Merge branch 'layers'

app/Game/Client/GameObjects/Doll.js

@@ -3,12 +3,14 @@ define([
     "Game/Config/Settings",
     "Lib/Utilities/NotificationCenter",
     "Lib/Utilities/Exception",
-    "Lib/Utilities/ColorConverter"
+    "Lib/Utilities/ColorConverter",
+    "Game/Client/View/Abstract/Layer",
 ],
  
-function (Parent, Settings, Nc, Exception, ColorConverter) {
+function (Parent, Settings, Nc, Exception, ColorConverter, Layer) {
  
-    function Doll(physicsEngine, uid, player) {      
+    function Doll(physicsEngine, uid, player) {   
+        this.layerId = Layer.ID.SPAWN;
         this.animationDef = {
             "stand": [1,1],
             "walk": [2,28],
@@ -31,7 +33,6 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
 
         var converter = new ColorConverter();
         this.primaryColor = converter.getColorByName(player.getNickname());
-        console.log(this.primaryColor.toString(16))
 
         Parent.call(this, physicsEngine, uid, player);
     }
@@ -47,11 +48,13 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         if(this.animatedMeshes[this.actionState]) {
             Nc.trigger(
                 Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.animatedMeshesContainer.withArms[this.actionState],
                 { visible: false }
             );
             Nc.trigger(
                 Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.animatedMeshesContainer.withoutArms[this.actionState],
                 { visible: false }
             );
@@ -61,6 +64,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
 
         Nc.trigger(
             Nc.ns.client.view.mesh.update,
+            this.layerId,
             this.animatedMeshes[this.actionState],
             {
                 visible: true,
@@ -74,7 +78,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         var self = this;
 
         var setShirtColor = function (mesh) {
-            Nc.trigger(Nc.ns.client.view.mesh.addFilter, mesh, 'colorRangeReplace', {
+            Nc.trigger(Nc.ns.client.view.mesh.addFilter, self.layerId, mesh, 'colorRangeReplace', {
                 minColor: 0x3b4a31,
                 maxColor: 0x657f54,
                 newColor: self.primaryColor,
@@ -113,12 +117,12 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
 
                 var callback = function(mesh) {
                     self.animatedMeshesContainer[arm][key] = mesh;
-                    Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+                    Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
 
                     setShirtColor(mesh);
                 };
 
-                Nc.trigger(Nc.ns.client.view.animatedMesh.create, texturePaths, callback, { 
+                Nc.trigger(Nc.ns.client.view.animatedMesh.create, this.layerId, texturePaths, callback, { 
                     visible: false, 
                     pivot: {
                         x: 35/2 * 4,
@@ -136,9 +140,9 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         var texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/head.png";
         var callback = function (mesh) {
             self.headMesh = mesh;
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+            Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
         }
-        Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
+        Nc.trigger(Nc.ns.client.view.mesh.create, this.layerId, texturePath, callback, {
             pivot: {
                 x: 5,
                 y: 12
@@ -152,11 +156,10 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         texturePath = Settings.GRAPHICS_PATH + "Characters/Chuck/holdingArm.png";
         var callback = function (mesh) {
             self.holdingArmMesh = mesh;
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+            Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
-
             setShirtColor(mesh);
         }
-        Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
+        Nc.trigger(Nc.ns.client.view.mesh.create, this.layerId, texturePath, callback, {
             visible: false,
             pivot: {
                 x: 35/2 * 4,
@@ -176,6 +179,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         if(oldLookDirection != this.lookDirection) {
             for(var key in this.animatedMeshes) {
                 Nc.trigger(Nc.ns.client.view.mesh.update,
+                    this.layerId,
                     this.animatedMeshes[key],
                     {
                         xScale: this.lookDirection
@@ -184,6 +188,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
             }
 
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.holdingArmMesh,
                 {
                     xScale: this.lookDirection
@@ -194,6 +199,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         var angle = Math.atan2(this.lookAtXY.x, this.lookAtXY.y) / 2 - 0.7855 * this.lookDirection; // 0.7855 = 45°
 
         Nc.trigger(Nc.ns.client.view.mesh.update,
+            this.layerId,
             this.headMesh,
             {
                 xScale: this.lookDirection,
@@ -206,22 +212,22 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
         Parent.prototype.grab.call(this, item);
         this.animatedMeshes = this.animatedMeshesContainer.withoutArms;
         this.setActionState(this.actionState, true);
-        Nc.trigger(Nc.ns.client.view.mesh.update, this.holdingArmMesh, { visible: true });
+        Nc.trigger(Nc.ns.client.view.mesh.update, this.layerId, this.holdingArmMesh, { visible: true });
     };
 
     Doll.prototype.throw = function(item, x, y) {
         Parent.prototype.throw.call(this, item, x, y);
         this.animatedMeshes = this.animatedMeshesContainer.withArms;
         this.setActionState(this.actionState, true);
-        Nc.trigger(Nc.ns.client.view.mesh.update, this.holdingArmMesh, { visible: false });
+        Nc.trigger(Nc.ns.client.view.mesh.update, this.layerId, this.holdingArmMesh, { visible: false });
     };
 
     Doll.prototype.destroy = function () {
         for (var key in this.animatedMeshes) {
-            Nc.trigger(Nc.ns.client.view.mesh.remove, this.animatedMeshes[key]);
+            Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.animatedMeshes[key]);
         }
 
-        Nc.trigger(Nc.ns.client.view.mesh.remove, this.headMesh);
+        Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.headMesh);
 
         Parent.prototype.destroy.call(this);
     }
@@ -229,6 +235,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
     Doll.prototype.render = function() {
         if(this.actionState) {
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.animatedMeshes[this.actionState],
                 {
                     x: this.body.GetPosition().x * Settings.RATIO,
@@ -238,6 +245,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
             );
 
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.headMesh,
                 {
                     x: this.body.GetPosition().x * Settings.RATIO,
@@ -246,6 +254,7 @@ function (Parent, Settings, Nc, Exception, ColorConverter) {
             )
 
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.holdingArmMesh,
                 {
                     x: this.body.GetPosition().x * Settings.RATIO,

app/Game/Client/GameObjects/Item.js

@@ -1,12 +1,14 @@
 define([
 	"Game/Core/GameObjects/Item",
 	"Game/Config/Settings",
-    "Lib/Utilities/NotificationCenter"
+    "Lib/Utilities/NotificationCenter",
+    "Game/Client/View/Abstract/Layer"
 ],
  
-function (Parent, Settings, Nc) {
+function (Parent, Settings, Nc, Layer) {
  
     function Item(physicsEngine, uid, options) {
+        this.layerId = Layer.ID.ITEM;
     	Parent.call(this, physicsEngine, uid, options);
     }
 
@@ -22,10 +24,11 @@ function (Parent, Settings, Nc) {
 
     	var callback = function(mesh) {
     		self.mesh = mesh;
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+            Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
     	}
    
         Nc.trigger(Nc.ns.client.view.mesh.create,
+            this.layerId,
             texturePath, 
             callback,
             {
@@ -40,13 +43,14 @@ function (Parent, Settings, Nc) {
     };
 
     Item.prototype.destroy = function() {
-        Nc.trigger(Nc.ns.client.view.mesh.remove, this.mesh);
+        Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.mesh);
         Parent.prototype.destroy.call(this);
     };
 
     Item.prototype.render = function() {
 
         Nc.trigger(Nc.ns.client.view.mesh.update,
+            this.layerId,
             this.mesh,
             {
                 x: this.body.GetPosition().x * Settings.RATIO,
@@ -63,6 +67,7 @@ function (Parent, Settings, Nc) {
 
         if(oldFlipDirection != direction) {
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.mesh,
                 {
                     xScale: direction

app/Game/Client/GameObjects/Items/RagDoll.js

@@ -2,12 +2,14 @@ define([
 	"Game/Core/GameObjects/Items/RagDoll",
 	"Game/Core/GameObjects/Item",
 	"Game/Config/Settings",
-	"Lib/Utilities/NotificationCenter"
+	"Lib/Utilities/NotificationCenter",
+    "Game/Client/View/Abstract/Layer"
 ],
  
-function (Parent, CoreItem, Settings, Nc) {
+function (Parent, CoreItem, Settings, Nc, Layer) {
  
     function RagDoll(physicsEngine, uid, options) {
+        this.layerId = Layer.ID.SPAWN;
     	this.limbMeshes = {};
     	this.baseMeshName = "chest";
     	this.characterName = "Chuck";
@@ -36,10 +38,11 @@ function (Parent, CoreItem, Settings, Nc) {
 				self.limbMeshes[name] = mesh;
     		}
     		
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+            Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
     	}
    
         Nc.trigger(Nc.ns.client.view.mesh.create,
+            this.layerId,
             texturePath + name + ".png", 
             callback,
             {
@@ -60,6 +63,7 @@ function (Parent, CoreItem, Settings, Nc) {
 	    	for(var name in this.limbMeshes) {
 	    		if(this.limbs[name]) {
 			        Nc.trigger(Nc.ns.client.view.mesh.update,
+                        this.layerId,
 			            this.limbMeshes[name],
 			            {
 			                x: this.limbs[name].GetPosition().x * Settings.RATIO,
@@ -80,6 +84,7 @@ function (Parent, CoreItem, Settings, Nc) {
 
         if(oldFlipDirection != direction) {
             Nc.trigger(Nc.ns.client.view.mesh.update,
+                this.layerId,
                 this.mesh,
                 {
                     xScale: direction
@@ -88,6 +93,7 @@ function (Parent, CoreItem, Settings, Nc) {
 
             for (var name in this.limbMeshes) {
             	Nc.trigger(Nc.ns.client.view.mesh.update,
+                    this.layerId,
 	                this.limbMeshes[name],
 	                {
 	                    xScale: direction
@@ -100,7 +106,7 @@ function (Parent, CoreItem, Settings, Nc) {
     RagDoll.prototype.destroy = function() {
         
         for (var name in this.limbMeshes) {
-            Nc.trigger(Nc.ns.client.view.mesh.remove, this.limbMeshes[name]);
+            Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.limbMeshes[name]);
         };
 
         Parent.prototype.destroy.call(this);

app/Game/Client/GameObjects/Tile.js

@@ -1,12 +1,14 @@
 define([
 	"Game/Core/GameObjects/Tile",
 	"Game/Config/Settings",
-    "Lib/Utilities/NotificationCenter"
+    "Lib/Utilities/NotificationCenter",
+    "Game/Client/View/Abstract/Layer"
 ],
  
-function (Parent, Settings, Nc) {
+function (Parent, Settings, Nc, Layer) {
  
     function Tile(physicsEngine, uid, options) {
+        this.layerId = Layer.ID.TILE;
     	Parent.call(this, physicsEngine, uid, options);
     }
 
@@ -27,10 +29,11 @@ function (Parent, Settings, Nc) {
 
     	var callback = function(mesh) {
     		self.mesh = mesh;
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh);
+            Nc.trigger(Nc.ns.client.view.mesh.add, self.layerId, mesh);
     	}
    
         Nc.trigger(Nc.ns.client.view.mesh.create,
+            this.layerId,
             texturePath, 
             callback,
             {
@@ -45,13 +48,14 @@ function (Parent, Settings, Nc) {
     };
 
     Tile.prototype.destroy = function() {
-        Nc.trigger(Nc.ns.client.view.mesh.remove, this.mesh);
+        Nc.trigger(Nc.ns.client.view.mesh.remove, this.layerId, this.mesh);
         Parent.prototype.destroy.call(this);
     };
 
     Tile.prototype.render = function() {
 
         Nc.trigger(Nc.ns.client.view.mesh.update,
+            this.layerId,
             this.mesh,
             {
                 x: this.body.GetPosition().x * Settings.RATIO,

app/Game/Client/Loader/Level.js

@@ -2,10 +2,11 @@ define([
 	"Game/Core/Loader/Level",
 	"Game/Config/Settings",
     "Lib/Utilities/NotificationCenter",
-    "Lib/Vendor/Pixi"
+    "Lib/Vendor/Pixi",
+    "Game/Client/View/Abstract/Layer"
 ],
 
-function (Parent, Settings, Nc, PIXI) {
+function (Parent, Settings, Nc, PIXI, AbstractLayer) {
 
     function Level (uid, engine, gameObjects) {
         Parent.call(this, uid, engine, gameObjects);
@@ -17,13 +18,13 @@ function (Parent, Settings, Nc, PIXI) {
     	var self = this;
         var xhr = new XMLHttpRequest();
         xhr.onreadystatechange = function() {
-                if(xhr.readyState == 4) {
+            if(xhr.readyState == 4) {
-                        if(xhr.status == 200) {
+                if(xhr.status == 200) {
-                                self.loadAssets(JSON.parse(xhr.responseText), callback);
+                    self.loadAssets(JSON.parse(xhr.responseText), callback);
-                        } else {
+                } else {
-                                console.error("Ajax error: " + xhr.status + " " + xhr.statusText)
+                    console.error("Ajax error: " + xhr.status + " " + xhr.statusText)
-                        }
                 }
+            }
         }
         xhr.open("GET", path, true);
         xhr.send(null);
@@ -87,5 +88,14 @@ function (Parent, Settings, Nc, PIXI) {
         return paths;
     };
 
+    Level.prototype.setupLayer = function(options, behind, referenceId) {
+        Parent.prototype.setupLayer.call(this, options, behind, referenceId);
+        var parallaxSpeed = 0.0;
+        if (options.properties && options.properties.parallaxSpeed) {
+            parallaxSpeed = parseFloat(options.properties.parallaxSpeed);
+        } 
+        Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, parallaxSpeed, behind, referenceId);
+    };
+
     return Level;
 });

app/Game/Client/Loader/TiledLevel.js

@@ -1,16 +1,32 @@
 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";
     	Parent.call(this, uid, engine, gameObjects);
     }
 
     TiledLevel.prototype = Object.create(Parent.prototype);
- 
+
+    TiledLevel.prototype.setup = function(levelData) {
+        /*
+        FIXME: find a name for this shit!
+        for (var i = 0; i < levelData.layers.length; i++) {
+            var layerOptions = levelData.layers[i];
+            layerOptions.z = i;
+            if(!this.layerMapping[layerOptions.name]) {
+                this.createLayer(layerOptions);
+            }
+        };
+        */
+        Parent.prototype.setup.call(this, levelData);
+    };
+
     TiledLevel.prototype.getAssetPaths = function(levelData) {
     	var paths = Parent.prototype.getAssetPaths.call(this, levelData);
 
@@ -40,13 +56,61 @@ function (Parent, Settings) {
 	    	paths.push(texturePath);
         };
 
-        var background = this.getLayer(levelData, "background");
+        for (var i = 0; i < levelData.layers.length; i++) {
-        paths.push(Settings.MAPS_PATH + background.image);
+            var layer = levelData.layers[i];
+            if (layer.type == "imagelayer") {
+                paths.push(Settings.MAPS_PATH + layer.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.update, options.layerId, mesh, {
+                    x: Settings.STAGE_WIDTH / 2,
+                    y: Settings.STAGE_HEIGHT / 2,
+                    pivot: {
+                        x: mesh.texture.width / 2,
+                        y: mesh.texture.height / 2
+                    },
+                    xScale: 1,
+                    yScale: 1
+                });
+            }
+       
+            Nc.trigger(Nc.ns.client.view.mesh.create,
+                options.layerId,
+                texturePath, 
+                callback,
+                {
+                    alpha: options.opacity
+                }
+            );
+        }
+
+    };
+
+    TiledLevel.prototype.getLayer = function(levelData, name) {
+        for (var i = 0; i < levelData.layers.length; i++) {
+            if(levelData.layers[i].name === name) {
+                return levelData.layers[i];
+            }
+        }
+
+        throw "Layer '" + name + "' not found.";
+    };
+
     return TiledLevel;
  
 });

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

@@ -0,0 +1,51 @@
+define([
+	"Lib/Utilities/Abstract",
+], 
+
+function (Abstract) {
+
+    function Layer(name, parallaxSpeed) {
+    	this.name = name;
+    	this.parallaxSpeed = parallaxSpeed;
+        this.zoom = { 
+            current: 1, 
+            target: 1
+        };
+        this.position = {
+            current: { x: 0, y: 0},
+            target: { x: 0, y: 0}
+        };
+    }
+
+    Object.defineProperty(Layer, 'ID', { 
+        value: {
+            TILE: 'tile',
+            ITEM: 'item',
+            SPAWN: 'spawn'
+        }
+    });
+
+    Abstract.prototype.addMethod.call(Layer, 'show');
+    Abstract.prototype.addMethod.call(Layer, 'hide');
+    Abstract.prototype.addMethod.call(Layer, 'createMesh', ['texturePath', 'callback', 'options']);
+    Abstract.prototype.addMethod.call(Layer, 'createAnimatedMesh', ['texturePaths', 'callback', 'options']);
+    Abstract.prototype.addMethod.call(Layer, 'addMesh', ['mesh']);
+    Abstract.prototype.addMethod.call(Layer, 'removeMesh', ['mesh']);
+    Abstract.prototype.addMethod.call(Layer, 'updateMesh', ['mesh', 'options']);
+    Abstract.prototype.addMethod.call(Layer, 'render', ['centerPosition']);
+
+    Layer.prototype.getName = function() {
+        return this.name;
+    };
+
+    Layer.prototype.setPosition = function(centerPosition) {
+        this.position.target.x = centerPosition.x;
+        this.position.target.y = centerPosition.y;
+    };
+
+    Layer.prototype.setZoom = function(z) {
+        this.zoom.target = z;
+    };
+
+    return Layer;
+});

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

@@ -0,0 +1,112 @@
+define([
+    "Lib/Utilities/Abstract",
+    "Game/Client/View/DomController", 
+    "Game/Config/Settings",
+    "Lib/Utilities/Exception",
+    "Lib/Utilities/NotificationCenter"
+],
+
+function (Abstract, DomController, Settings, Exception, Nc) {
+    
+    function AbstractView () {
+    	this.me = null;
+        this.canvas = null;
+        this.debugMode = false;
+
+        this.ncTokens = [
+            Nc.on(Nc.ns.client.view.fullscreen.change, this.onFullscreenChange, this),
+            Nc.on(Nc.ns.client.view.debugMode.toggle, this.onToggleDebugMode, this),
+
+            Nc.on(Nc.ns.client.view.playerInfo.createAndAdd, this.onCreateAndAddPlayerInfo, this),
+            Nc.on(Nc.ns.client.view.playerInfo.update, this.onUpdatePlayerInfo, this),
+            Nc.on(Nc.ns.client.view.playerInfo.remove, this.onRemovePlayerInfo, this),
+
+            Nc.on(Nc.ns.client.view.playerArrow.createAndAdd, this.onCreateAndAddPlayerArrow, this),
+            Nc.on(Nc.ns.client.view.playerArrow.update, this.onUpdatePlayerArrow, this),
+
+            Nc.on(Nc.ns.client.game.zoomIn, this.onZoomIn, this),
+            Nc.on(Nc.ns.client.game.zoomOut, this.onZoomOut, this),
+            Nc.on(Nc.ns.client.game.zoomReset, this.onZoomReset, this),
+
+            Nc.on(Nc.ns.client.view.preloadBar.update, this.onUpdateLoader, this),
+        ];
+    }
+
+    Abstract.prototype.addMethod.call(AbstractView, 'render');
+    Abstract.prototype.addMethod.call(AbstractView, 'addFilter', ['mesh', 'options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'removeFilter', ['mesh', 'options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'setCameraPosition', ['x', 'y']);
+    Abstract.prototype.addMethod.call(AbstractView, 'setCameraZoom', ['z']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onZoomIn');
+    Abstract.prototype.addMethod.call(AbstractView, 'onZoomIn');
+    Abstract.prototype.addMethod.call(AbstractView, 'onZoomReset');
+    Abstract.prototype.addMethod.call(AbstractView, 'toggleInfo', ['show', 'string']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onCreateAndAddPlayerInfo', ['options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onCreateAndAddPlayerArrow', ['options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onUpdatePlayerArrow', ['options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onUpdatePlayerInfo', ['mesh', 'options']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onRemovePlayerInfo', ['mesh']);
+    Abstract.prototype.addMethod.call(AbstractView, 'onUpdateLoader', ['progress']);
+
+    AbstractView.prototype.isWebGlEnabled = function () { 
+        try { 
+            return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); 
+        } catch(e) { 
+            return false; 
+        } 
+    }
+
+    AbstractView.prototype.initCanvas = function (canvas) {
+    	this.canvas = canvas;
+        DomController.initCanvas(canvas);
+    }
+
+    AbstractView.prototype.setMe = function(player) {
+        this.me = player;
+    };
+/*
+    AbstractView.prototype.calculateCameraPosition = function() {
+        var reference = this.me.getPosition();
+        var pos = {};
+
+        pos.x = reference.x;
+        pos.y = reference.y;
+
+        pos.x = pos.x * Settings.RATIO;
+        pos.y = -(pos.y * Settings.RATIO);
+
+        pos.x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
+        pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
+
+        return pos;
+    };
+*/
+    AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
+
+        if (!isFullScreen) {
+            Settings.STAGE_WIDTH = 600;
+            Settings.STAGE_HEIGHT = 400;
+        } else {
+            // FIXME: Create FIXME meme (dumb and dumber)
+            // FIXME: don't overwrite Settings
+            Settings.STAGE_WIDTH = window.innerWidth;
+            Settings.STAGE_HEIGHT = window.innerHeight;
+        }
+    };
+
+    AbstractView.prototype.onToggleDebugMode = function(debugMode) {
+        if(debugMode) {
+            this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
+        }
+
+        this.debugMode = debugMode;
+    };
+
+    AbstractView.prototype.destroy = function() {
+        for (var i = 0; i < this.ncTokens.length; i++) {
+            Nc.off(this.ncTokens[i]);
+        };
+    };
+
+    return AbstractView;
+});

app/Game/Client/View/LayerManager.js

@@ -0,0 +1,162 @@
+define([
+    "Lib/Utilities/NotificationCenter",
+    "Lib/Utilities/Exception",
+    "Game/Client/View/Pixi/Layer"
+],
+ 
+function (Nc, Exception, Layer) {
+ 
+    function LayerManager(container, me) {
+        this.layers = [];
+        this.container = container;
+
+        this.ncTokens = [
+            Nc.on(Nc.ns.client.view.layer.createAndInsert, this.createAndInsert, this),
+            Nc.on(Nc.ns.client.view.mesh.create, this.createMesh, this),
+            Nc.on(Nc.ns.client.view.animatedMesh.create, this.createAnimatedMesh, this),
+            Nc.on(Nc.ns.client.view.mesh.add, this.addMesh, this),
+            Nc.on(Nc.ns.client.view.mesh.remove, this.removeMesh, this),
+            Nc.on(Nc.ns.client.view.mesh.update, this.updateMesh, this),
+            Nc.on(Nc.ns.client.view.mesh.addFilter, this.addFilter, this),
+            Nc.on(Nc.ns.client.view.mesh.removeFilter, this.removeFilter, this)
+        ];
+    }
+
+
+    LayerManager.prototype.render = function(centerPosition, zoom) {
+        for (var i = 0; i < this.layers.length; i++) {
+            var layer = this.layers[i];
+            layer.render(centerPosition, zoom);
+        }
+    };
+ 
+    /*
+     * 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;
+
+        if (referenceId) {
+            for(var i = 0; i < this.layers.length; i++) {
+                var layer = this.layers[i];
+
+                if (layer.getName() === referenceId) {
+                    referenceIndex = i;
+                    break;
+                }
+            }
+            if (referenceIndex === -1) {
+                throw new Exception('Reference Layer (' + referenceId + ') could not be found');
+            }
+        } else { 
+            referenceIndex = behind ? 0 : this.container.children.length;
+        }
+
+        var layer =  new Layer(id, parallaxSpeed);
+        var layerIndex = behind ? referenceIndex : referenceIndex + 1;
+
+        this.layers.splice(layerIndex, 0, layer);
+        
+        this.rearrangeLayers();
+    };
+
+    LayerManager.prototype.rearrangeLayers = function() {
+
+        var layer;
+
+        for (var i = this.layers.length - 1; i >= 0; i--) {
+            layer = this.layers[i];
+            if (this.container.children.indexOf(layer.getContainer()) !== -1) {
+                this.container.removeChild(layer.getContainer());
+            }
+        };
+
+        if (this.container.children.length !== 0) {
+            console.warn('Unmanaged stuff in container... ', this.container.children);
+            //throw new Exception('Unmanaged dirt in container... ');
+        }
+
+        for (var i = 0; i < this.layers.length; i++) {
+            layer = this.layers[i];
+            this.container.addChildAt(layer.getContainer(), i);
+        };
+    };
+
+    LayerManager.prototype.getLayerById = function(id) {
+    	for (var i = 0; i < this.layers.length; i++) {
+    		var layer = this.layers[i];
+    		if (layer.getName() === id) {
+    			return layer;
+    		}
+    	};
+        return null;
+    };
+
+
+
+
+    /* Delegate methods */
+
+    LayerManager.prototype.delegate = function() {
+        var methodName = arguments[0];
+        var layerId = arguments[1];
+    	var layer = this.getLayerById(layerId);
+
+        if (!layer) {
+            throw new Exception('Layer (' + layerId + ') does not exist.');
+        }
+
+    	var args = arguments;
+        Array.prototype.splice.call(args, 0, 2);
+
+    	layer[methodName].apply(layer, args);
+    };
+
+    LayerManager.prototype.createMesh = function() {
+        var args = arguments;
+        Array.prototype.splice.call(args, 0, 0, 'createMesh')
+
+    	this.delegate.apply(this, args);
+    };
+
+    LayerManager.prototype.createAnimatedMesh = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'createAnimatedMesh')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.addMesh = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'addMesh')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.removeMesh = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'removeMesh')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.updateMesh = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'updateMesh')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.addFilter = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'addFilter')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.removeFilter = function() {
+        Array.prototype.splice.call(arguments, 0, 0, 'removeFilter')
+    	this.delegate.apply(this, arguments);
+    };
+
+    LayerManager.prototype.destroy = function() {
+        for (var i = 0; i < this.ncTokens.length; i++) {
+            Nc.off(this.ncTokens[i]);
+        };
+    };
+
+    return LayerManager;
+});

app/Game/Client/View/Pixi/Layer.js

@@ -0,0 +1,186 @@
+define([
+    "Game/Client/View/Abstract/Layer",
+	"Lib/Vendor/Pixi",
+    "Game/Client/View/Pixi/ColorRangeReplaceFilter",
+    "Game/Config/Settings",
+],
+
+function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
+
+    var AVAILABLE_MESH_FILTERS = {
+        "blur": PIXI.BlurFilter,
+        "desaturate": PIXI.GrayFilter,
+        "pixelate": PIXI.PixelateFilter,
+        "colorRangeReplace": ColorRangeReplaceFilter,
+    };
+    
+    function Layer (name, parallaxSpeed) {
+        Parent.call(this, name, parallaxSpeed);
+        this.container = new PIXI.DisplayObjectContainer();
+        this.container.x = 0;
+        this.container.y = 0;
+    }
+
+    Layer.prototype = Object.create(Parent.prototype);
+
+    Layer.prototype.getContainer = function() {
+        return this.container;
+    };
+
+    Layer.prototype.show = function() {
+        this.container.visible = true;
+    };
+
+    Layer.prototype.hide = function() {
+        this.container.visible = false;
+    };
+
+    Layer.prototype.addMesh = function(mesh) {
+        this.container.addChild(mesh);
+    };
+
+    Layer.prototype.removeMesh = function(mesh) {
+        this.container.removeChild(mesh);
+    };
+
+    Layer.prototype.createMesh = function (texturePath, callback, options) {
+
+        var texture = PIXI.Texture.fromImage(texturePath);
+
+        var mesh = new PIXI.Sprite(texture);
+
+        if(options) this.updateMesh(mesh, options);
+
+        callback(mesh);
+    };
+
+    Layer.prototype.createAnimatedMesh = function (texturePaths, callback, options) {
+        var textures = [];
+        for (var i = 0; i < texturePaths.length; i++) {
+            var texture = PIXI.Texture.fromImage(texturePaths[i]);
+            texture.width = options.width;
+            texture.height = options.height;
+            PIXI.texturesToUpdate.push(texture);
+            textures.push(texture);
+        }
+
+        var mesh = new PIXI.MovieClip(textures);
+        if(options) this.updateMesh(mesh, options);
+
+        mesh.animationSpeed = 0.5;
+
+        mesh.play();
+
+        callback(mesh);
+    }
+
+    Layer.prototype.updateMesh = function(mesh, options) {
+        if (options.x) mesh.position.x = options.x;
+        if (options.y) mesh.position.y = options.y;
+        if (options.rotation) mesh.rotation = options.rotation;
+        if (options.alpha) mesh.alpha = options.alpha;
+        if (options.width) mesh.width = options.width;
+        if (options.height) mesh.height = options.height;
+        if (options.xScale) mesh.width = Math.abs(mesh.width) * options.xScale;
+        if (options.yScale) mesh.scale.y = options.yScale;
+        if (options.visible === true || options.visible === false) mesh.visible = options.visible;
+        if (options.pivot) mesh.pivot = new PIXI.Point(options.pivot.x, options.pivot.y);
+    };
+
+    Layer.prototype.addFilter = function(mesh, filterName, options) {
+
+        if (!AVAILABLE_MESH_FILTERS.hasOwnProperty(filterName)) {
+            throw new Exception('Filter ' + filterName + ' is not available');
+        }
+        
+        var MeshFilter = AVAILABLE_MESH_FILTERS[filterName];
+        var filter = new MeshFilter();
+
+        switch (filterName) {
+            case 'desaturate':
+                if (options.amount) filter.gray = options.amount;
+                break;
+
+            case 'blur':
+                if (options.blurX) filter.blurX = options.blurX;
+                if (options.blurY) filter.blurY = options.blurY;
+                break;
+
+            case 'colorRangeReplace':
+                if (options.minColor) filter.minColor = options.minColor;
+                if (options.maxColor) filter.maxColor = options.maxColor;
+                if (options.newColor) filter.newColor = options.newColor;
+                if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset;
+                break;
+
+            case 'pixelate':
+                if (options.sizeX) filter.size.x = options.sizeX;
+                if (options.sizeY) filter.size.y = options.sizeY;
+                break;
+
+            default:
+                break;
+        }
+
+        var filters = mesh.filters;
+
+        if(!filters) {
+            filters = [];
+        } else {
+            // ensure uniqueness of filter by name
+            this.removeFilter(mesh, filterName);
+        }
+
+        filters.push(filter);
+        mesh.filters = filters;
+    };
+
+    Layer.prototype.removeFilter = function(mesh, filterName) {
+
+        var filters = mesh.filters;
+
+        if(!filters) {
+            return;
+        }
+
+        var MeshFilter = AVAILABLE_MESH_FILTERS[options.filter];
+
+        filters = filters.filter(function(filter){
+            return !filter instanceof MeshFilter;
+        });
+
+        mesh.filters = filter;
+    };
+
+    Layer.prototype.render = function(centerPosition, zoom) {
+        this.setPosition(centerPosition);
+        this.setZoom(zoom);
+
+        // Zoom
+        var zoomStep = (this.zoom.target - this.zoom.current) * Settings.CAMERA_GLIDE / 100;
+        this.zoom.current += zoomStep;
+        this.container.scale.x = this.zoom.current;
+        this.container.scale.y = this.container.scale.x;
+
+        // Position
+        var posXStep = (this.position.target.x - this.position.current.x) * Settings.CAMERA_GLIDE / 100;
+        this.position.current.x += posXStep;
+        this.container.x = this.position.current.x + (this.position.current.x * this.parallaxSpeed);
+
+        var posYStep = (this.position.target.y - this.position.current.y) * Settings.CAMERA_GLIDE / 100;
+        this.position.current.y += posYStep;
+        this.container.y = this.position.current.y + (this.position.current.y * this.parallaxSpeed);
+    };
+
+    return Layer;
+});
+
+
+/*
+
+1 = this.zoom.current ? -1
+
+1 = this.zoom.current * (-1) * (-1)
+
+
+*/

app/Game/Client/View/Pixi/View.js

@@ -1,27 +1,21 @@
 define([
-    "Game/Client/View/Views/AbstractView",
+    "Game/Client/View/Abstract/View",
     "Game/Client/View/DomController", 
     "Lib/Vendor/Pixi",
-    "Game/Client/View/Views/Pixi/ColorRangeReplaceFilter",
     "Game/Config/Settings",
     "Lib/Utilities/NotificationCenter",
     "Lib/Utilities/Exception",
-    "Game/Client/View/Views/Pixi/GameStats"
+    "Game/Client/View/Pixi/GameStats",
+    "Game/Client/View/LayerManager",
 ], 
 
-function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats) {
+function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, LayerManager) {
-    
-    var AVAILABLE_MESH_FILTERS = {
-        "blur": PIXI.BlurFilter,
-        "desaturate": PIXI.GrayFilter,
-        "pixelate": PIXI.PixelateFilter,
-        "colorRangeReplace": ColorRangeReplaceFilter,
-    };
 
     function PixiView () {
 
         Parent.call(this);
 
+        this.layerManager = null;
         this.movableObjects = [];
         this.stage = null;
         this.container = null;
@@ -55,6 +49,9 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
         this.stage = new PIXI.Stage(0x333333);
 
         this.initCamera();
+
+        this.layerManager = new LayerManager(this.container, this.me);
+
         this.initLoader();
 
         this.initCanvas(this.renderer.view);
@@ -64,140 +61,35 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
     }
 
     PixiView.prototype.render = function () {
-        if(this.me) {
+        if (this.me) {
-            var pos = this.calculateCameraPosition();
+            this.layerManager.render(this.calculateCenterPosition(), this.currentZoom);
-            this.setCameraPosition(pos.x, pos.y);
         }
 
         this.renderer.render(this.stage);
     }
 
-    // Meshes
-
-    PixiView.prototype.addMesh = function(mesh) {
-        this.container.addChild(mesh);
-    };
-
-    PixiView.prototype.removeMesh = function(mesh) {
-        this.container.removeChild(mesh);
-    };
-
-    PixiView.prototype.createMesh = function (texturePath, callback, options) {
-
-        var texture = PIXI.Texture.fromImage(texturePath);
-
-        var mesh = new PIXI.Sprite(texture);
-
-        if(options) this.updateMesh(mesh, options);
-
-        callback(mesh);
-    }
-
-    PixiView.prototype.createAnimatedMesh = function (texturePaths, callback, options) {
-        var textures = [];
-        for (var i = 0; i < texturePaths.length; i++) {
-            var texture = PIXI.Texture.fromImage(texturePaths[i]);
-            texture.width = options.width;
-            texture.height = options.height;
-            PIXI.texturesToUpdate.push(texture);
-            textures.push(texture);
-        }
-
-        var mesh = new PIXI.MovieClip(textures);
-        if(options) this.updateMesh(mesh, options);
-
-        mesh.animationSpeed = 0.5;
-
-        mesh.play();
-
-        callback(mesh);
-    }
-
-    PixiView.prototype.updateMesh = function(mesh, options) {
-        if (options.x) mesh.position.x = options.x;
-        if (options.y) mesh.position.y = options.y;
-        if (options.rotation) mesh.rotation = options.rotation;
-        if (options.alpha) mesh.alpha = options.alpha;
-        if (options.width) mesh.width = options.width;
-        if (options.height) mesh.height = options.height;
-        if (options.xScale) mesh.width = Math.abs(mesh.width) * options.xScale;
-        if (options.yScale) mesh.scale.y = options.yScale;
-        if (options.visible === true || options.visible === false) mesh.visible = options.visible;
-        if (options.pivot) mesh.pivot = new PIXI.Point(options.pivot.x, options.pivot.y);
-    }
-
-    PixiView.prototype.addFilter = function(mesh, filterName, options) {
-
-        if (!AVAILABLE_MESH_FILTERS.hasOwnProperty(filterName)) {
-            throw new Exception('Filter ' + filterName + ' is not available');
-        }
-        
-        var MeshFilter = AVAILABLE_MESH_FILTERS[filterName];
-        var filter = new MeshFilter();
-
-        switch (filterName) {
-            case 'desaturate':
-                if (options.amount) filter.gray = options.amount;
-                break;
-
-            case 'blur':
-                if (options.blurX) filter.blurX = options.blurX;
-                if (options.blurY) filter.blurY = options.blurY;
-                break;
-
-            case 'colorRangeReplace':
-                if (options.minColor) filter.minColor = options.minColor;
-                if (options.maxColor) filter.maxColor = options.maxColor;
-                if (options.newColor) filter.newColor = options.newColor;
-                if (options.brightnessOffset) filter.brightnessOffset = options.brightnessOffset;
-                break;
-
-            case 'pixelate':
-                if (options.sizeX) filter.size.x = options.sizeX;
-                if (options.sizeY) filter.size.y = options.sizeY;
-                break;
-
-            default:
-                break;
-        }
-
-        var filters = mesh.filters;
-
-        if(!filters) {
-            filters = [];
-        } else {
-            // ensure uniqueness of filter by name
-            this.removeFilter(mesh, filterName);
-        }
-
-        filters.push(filter);
-        mesh.filters = filters;
-    };
-
-    PixiView.prototype.removeFilter = function(mesh, filterName) {
-
-        var filters = mesh.filters;
-
-        if(!filters) {
-            return;
-        }
-
-        var MeshFilter = AVAILABLE_MESH_FILTERS[options.filter];
-
-        filters = filters.filter(function(filter){
-            return !filter instanceof MeshFilter;
-        });
-
-        mesh.filters = filter;
-    };
-
     // Camera
-
     PixiView.prototype.initCamera = function () {
         this.container = new PIXI.DisplayObjectContainer();
         this.stage.addChild(this.container);
     }
 
+    PixiView.prototype.calculateCenterPosition = function() {
+        var target = this.me.getHeadPosition();
+        var centerPosition = {x: target.x, y: target.y};
+        centerPosition.x *= -Settings.RATIO * this.currentZoom;
+        centerPosition.y *= -Settings.RATIO * this.currentZoom;
+
+        centerPosition.x += Settings.STAGE_WIDTH / 2;
+        centerPosition.y += Settings.STAGE_HEIGHT / 2;
+
+        centerPosition.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
+        centerPosition.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
+
+        return centerPosition;
+    };
+
+/*
     PixiView.prototype.calculateCameraPosition = function() {
         var targetZoom = this.currentZoom;
 
@@ -237,7 +129,7 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
 
         return pos;
     };
-
+*/
     PixiView.prototype.setCameraZoom = function (zoom) {
 /*
         var oldZoom = this.container.scale.x;
@@ -400,6 +292,8 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
     };
 
     PixiView.prototype.destroy = function() {
+
+        this.layerManager.destroy();
         
         for (var i = 0; i < this.stage.children.length; i++) {
             this.stage.removeChild(this.stage.children[i]);

app/Game/Client/View/Three/View.js

@@ -1,5 +1,5 @@
 define([
-    "Game/Client/View/Views/AbstractView",
+    "Game/Client/View/Abstract/View",
     "Game/Client/View/DomController", 
     "Lib/Vendor/Three", 
     "Game/Config/Settings"

app/Game/Client/View/ViewManager.js

@@ -1,9 +1,9 @@
 define([
 	"Game/Config/Settings",
     "Lib/Utilities/Exception",
-    "Game/Client/View/Views/AbstractView",
+    "Game/Client/View/Abstract/View",
-	//"Game/Client/View/Views/ThreeView",
+	//"Game/Client/View/Three/View",
-	"Game/Client/View/Views/PixiView",
+	"Game/Client/View/Pixi/View",
     "Lib/Utilities/NotificationCenter"
 ],
  
@@ -14,9 +14,9 @@ function (Settings, Exception, AbstractView, PixiView, Nc) {
     ViewManager.createView = function() {
         var view = null
         switch(Settings.VIEW_CONTROLLER) {
-            case 'Three': 
+            //case 'Three': 
-                view = new ThreeView();
+            //    view = new ThreeView();
-                break;
+            //    break;
             case 'Pixi':
                 view = new PixiView();
                 break;

app/Game/Client/View/Views/AbstractView.js

@@ -1,202 +0,0 @@
-define([
-    "Game/Client/View/DomController", 
-    "Game/Config/Settings",
-    "Lib/Utilities/Exception",
-    "Lib/Utilities/NotificationCenter"
-],
-
-function (DomController, Settings, Exception, Nc) {
-    
-    function AbstractView () {
-    	this.me = null;
-        this.canvas = null;
-        this.debugMode = false;
-
-        this.ncTokens = [
-            Nc.on(Nc.ns.client.view.mesh.create, this.createMesh, this),
-            Nc.on(Nc.ns.client.view.animatedMesh.create, this.createAnimatedMesh, this),
-            Nc.on(Nc.ns.client.view.mesh.add, this.addMesh, this),
-            Nc.on(Nc.ns.client.view.mesh.remove, this.removeMesh, this),
-            Nc.on(Nc.ns.client.view.mesh.update, this.updateMesh, this),
-            Nc.on(Nc.ns.client.view.mesh.addFilter, this.addFilter, this),
-            Nc.on(Nc.ns.client.view.mesh.removeFilter, this.removeFilter, this),
-
-            Nc.on(Nc.ns.client.view.fullscreen.change, this.onFullscreenChange, this),
-            Nc.on(Nc.ns.client.view.debugMode.toggle, this.onToggleDebugMode, this),
-
-            Nc.on(Nc.ns.client.view.playerInfo.createAndAdd, this.onCreateAndAddPlayerInfo, this),
-            Nc.on(Nc.ns.client.view.playerInfo.update, this.onUpdatePlayerInfo, this),
-            Nc.on(Nc.ns.client.view.playerInfo.remove, this.onRemovePlayerInfo, this),
-
-            Nc.on(Nc.ns.client.view.playerArrow.createAndAdd, this.onCreateAndAddPlayerArrow, this),
-            Nc.on(Nc.ns.client.view.playerArrow.update, this.onUpdatePlayerArrow, this),
-
-            Nc.on(Nc.ns.client.game.zoomIn, this.onZoomIn, this),
-            Nc.on(Nc.ns.client.game.zoomOut, this.onZoomOut, this),
-            Nc.on(Nc.ns.client.game.zoomReset, this.onZoomReset, this),
-
-            Nc.on(Nc.ns.client.view.preloadBar.update, this.onUpdateLoader, this),
-        ];
-
-        
-    }
-
-    AbstractView.prototype.isWebGlEnabled = function () { 
-        try { 
-            return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); 
-        } catch(e) { 
-            return false; 
-        } 
-    }
-
-    AbstractView.prototype.initCanvas = function (canvas) {
-
-    	this.canvas = canvas;
-        DomController.initCanvas(canvas);
-    }
-
-    AbstractView.prototype.loadPlayerMesh = function(player) {
-        throw new Exception('Abstract Function loadPlayerMesh not overwritten');
-    };
-
-    AbstractView.prototype.loadMeshes = function(objects) {
-    	throw new Exception('Abstract Function loadMeshes not overwritten');
-    };
-
-    AbstractView.prototype.render = function () {
-    	throw new Exception('Abstract Function render not overwritten');
-    }
-
-    AbstractView.prototype.createMesh = function (texturePath, callback, options) {
-    	throw new Exception('Abstract Function createMesh not overwritten');
-    }
-
-    AbstractView.prototype.createAnimatedMesh = function (texturePaths, callback, options) {
-        throw new Exception('Abstract Function createAnimatedMesh not overwritten');
-    }
-
-    AbstractView.prototype.addMesh = function(mesh) {
-        throw new Exception('Abstract Function addMesh not overwritten');
-    };
-
-    AbstractView.prototype.removeMesh = function(mesh) {
-        throw new Exception('Abstract Function removeMesh not overwritten');
-    };
-
-    AbstractView.prototype.updateMesh = function(mesh, options) {
-        throw new Exception('Abstract Function updateMesh not overwritten');
-    };
-
-    AbstractView.prototype.addFilter = function(mesh, options) {
-        throw new Exception('Abstract Function addFilter not overwritten');
-    };
-
-    AbstractView.prototype.removeFilter = function(mesh, options) {
-        throw new Exception('Abstract Function removeFilter not overwritten');
-    };
-
-    AbstractView.prototype.setMe = function(player) {
-        this.me = player;
-    };
-
-    AbstractView.prototype.addPlayer = function(player) {
- 		throw new Exception('Abstract Function addPlayer not overwritten');
-    };
-
-    AbstractView.prototype.removPlayer = function(player) {
-    	throw new Exception('Abstract Function removPlayer not overwritten');
-    };
-
-    AbstractView.prototype.setCameraPosition = function (x, y) {
-    	throw new Exception('Abstract Function setCameraPosition not overwritten');
-    }
-
-    AbstractView.prototype.calculateCameraPosition = function() {
-        var reference = this.me.getPosition();
-        var pos = {};
-
-        pos.x = reference.x;
-        pos.y = reference.y;
-
-        pos.x = pos.x * Settings.RATIO;
-        pos.y = -(pos.y * Settings.RATIO);
-
-        pos.x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4;
-        pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4;
-
-        return pos;
-    };
-
-    AbstractView.prototype.setCameraZoom = function (z) {
-        throw new Exception('Abstract Function setCameraZoom not overwritten');
-    };
-
-    AbstractView.prototype.onZoomIn = function () {
-        throw new Exception('Abstract Function onZoomIn not overwritten');
-    };
-
-    AbstractView.prototype.onZoomOut = function () {
-        throw new Exception('Abstract Function onZoomOut not overwritten');
-    };
-
-    AbstractView.prototype.onZoomReset = function () {
-        throw new Exception('Abstract Function onZoomReset not overwritten');
-    };
-
-    AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
-
-        if (!isFullScreen) {
-            Settings.STAGE_WIDTH = 600;
-            Settings.STAGE_HEIGHT = 400;
-        } else {
-            // FIXME: Create FIXME meme (dumb and dumber)
-            // FIXME: don't overwrite Settings
-            Settings.STAGE_WIDTH = window.innerWidth;
-            Settings.STAGE_HEIGHT = window.innerHeight;
-        }
-    };
-
-    AbstractView.prototype.onToggleDebugMode = function(debugMode) {
-        if(debugMode) {
-            this.setCameraPosition(-Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
-        }
-
-        this.debugMode = debugMode;
-    };
-
-    AbstractView.prototype.toggleInfo = function(show, string) {
-        throw new Exception('Abstract Function showInfo not overwritten');
-    };
-
-    AbstractView.prototype.onCreateAndAddPlayerInfo = function(options) {
-        throw new Exception('Abstract Function onCreateAndAddPlayerInfo not overwritten');
-    };
-
-    AbstractView.prototype.onCreateAndAddPlayerArrow = function(options) {
-        throw new Exception('Abstract Function onCreateAndAddPlayerArrow not overwritten');
-    };
-
-    AbstractView.prototype.onUpdatePlayerArrow = function(options) {
-        throw new Exception('Abstract Function onUpdatePlayerArrow not overwritten');
-    };
-
-    AbstractView.prototype.onUpdatePlayerInfo = function(playerInfo, options) {
-        throw new Exception('Abstract Function onUpdatePlayerInfo not overwritten');
-    };
-
-    AbstractView.prototype.onRemovePlayerInfo = function(playerInfo) {
-        throw new Exception('Abstract Function onRemovePlayerInfo not overwritten');
-    };
-
-    AbstractView.prototype.onUpdateLoader = function(progress) {
-        throw new Exception('Abstract Function onUpdateLoader not overwritten');
-    };
-
-    AbstractView.prototype.destroy = function() {
-        for (var i = 0; i < this.ncTokens.length; i++) {
-            Nc.off(this.ncTokens[i]);
-        };
-    };
-
-    return AbstractView;
-});

app/Game/Config/Settings.js

@@ -66,7 +66,7 @@ define(function() {
         USE_WEBGL: true,
 
         // NETWORKING
-        NETWORK_UPDATE_INTERVAL: 70,
+        NETWORK_UPDATE_INTERVAL: 70, // in milliseconds
         NETWORK_LOG_INCOMING: false,
         NETWORK_LOG_OUTGOING: false,
         NETWORK_LOG_FILTER: ['ping', 'pong', 'worldUpdate', 'lookAt'],

app/Game/Core/GameObjects/Item.js

@@ -27,7 +27,7 @@ function (Parent, Box2D, Options, Settings, Exception, Nc) {
 
         if(!this.options.category) {
             // FIXME add more validation
-            console.warn('item category empty (' + this.options.name + ')' );
+            //console.warn('item category empty (' + this.options.name + ')' );
         }
 
     	Parent.call(this, physicsEngine, uid);

app/Game/Core/Loader/Level.js

@@ -2,6 +2,7 @@ define([
     "Game/Config/Settings", 
     "Lib/Vendor/Box2D",
     "Lib/Utilities/NotificationCenter",
+    "Lib/Utilities/Abstract",
     "Game/" + GLOBALS.context + "/Collision/Detector",
     "Game/" + GLOBALS.context + "/GameObjects/Tile",
     "Game/" + GLOBALS.context + "/GameObjects/Item",
@@ -9,7 +10,7 @@ define([
     "Game/" + GLOBALS.context + "/GameObjects/Items/RagDoll",
     "Game/" + GLOBALS.context + "/GameObjects/Items/Rube"
 
-], function (Settings, Box2D, Nc, CollisionDetector, Tile, Item, Skateboard, RagDoll, Rube) {
+], function (Settings, Box2D, Nc, Abstract, CollisionDetector, Tile, Item, Skateboard, RagDoll, Rube) {
     
     function Level (uid, engine) {
         this.uid = uid;
@@ -17,22 +18,31 @@ define([
         this.levelObject = null;
         this.isLoaded = false;
         this.load(this.uid);
+        this.spawnPoints = null;
     }
 
     Level.prototype.load = function (uid) {
         var self = this;
         var path = Settings.MAPS_PATH + uid + ".json"
-        this.loadLevelDataFromPath(path, function(levelData) {
+        this.loadLevelDataFromPath(path, function (levelData) {
-            self.levelData = levelData;
+            self.setup(levelData);
-            self.addBackground();
-            self.createTiles();
-            self.createItems();
-            self.isLoaded = true;
-            Nc.trigger(Nc.ns.core.game.events.level.loaded);
         });
     }
 
+    Level.prototype.setup = function(levelData) {
+        this.isLoaded = true;
+        Nc.trigger(Nc.ns.core.game.events.level.loaded);
+    };
+
+    Level.prototype.createItems = function(options) {
+        for (var i = 0; i < options.length; i++) {
+            var uid = "item-" + i;
+            this.createItem(uid, options[i]);
+        };
+    };
+
     Level.prototype.createItem = function(uid, options) {
+
         switch(options.type) {
             //case 'skateboard':
             //    return new Skateboard(this.engine, uid, options);
@@ -45,64 +55,45 @@ define([
         }
     };
 
-    Level.prototype.getRandomSpawnPoint = function() {
+    Level.prototype.createTiles = function(options) {
-        throw new Error("Level not loaded.");
+        for (var i = 0; i < options.length; i++) {
-        return {
+            new Tile(this.engine, "tile-" + i, options[i]);
-            x: 150 + Math.random() * 300,
-            y: -500
         };
     };
 
+    Level.prototype.createSpawnPoints = function(points) {
+        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 {
+                x: 150 + Math.random() * 300,
+                y: -500
+            };
+        }
+
+        var size = this.spawnPoints.length;
+        var object = this.spawnPoints[parseInt(Math.random() * (size -1), 10)];
+
+        return {
+            x: object.x / Settings.TILE_RATIO,
+            y: object.y / Settings.TILE_RATIO
+        }
+    };
+
     Level.prototype.destroy = function () {
-        /*
-        for (var key in this.gameObjects) {
-            for (var i = 0; i < this.gameObjects[key].length; i++) {
-                this.gameObjects[key][i].destroy();
-            }
-        }
-        */
         this.isLoaded = false;
     }
 
-/*  Extended by TiledLevel
-    Level.prototype.createTiles = function () {
-
-        if (!this.levelData || !this.levelData.tiles || this.levelData.tiles.length < 1) {
-            throw "Level: Can't create physic tiles, no tiles found";
-        }
-
-        var tiles = this.levelData.tiles;
-
-        for (var i = 0; i < tiles.length; i++) {
-            var options = tiles[i];
-            //options.m = this.tileAtPositionExists(options.x, options.y - 1) ? "Soil" : "GrassSoil";
-            options.m = "Soil";
-            //this.gameObjects.fixed.push(
-            new Tile(this.engine, "tile-" + i, options);
-            //);
-        }
-    }
-*/
-
-/*  Extended by TiledLevel
-    Level.prototype.createItems = function() {
-        if (!this.levelData || !this.levelData.items) {
-            return;
-        }
-        var items = this.levelData.items;
-
-        for (var i = 0; i < items.length; i++) {
-            var options = items[i];
-            var uid = "item-" + i;
-            var item = this.createItem(uid, options);
-            //this.gameObjects.animated.push(item); 
-        };
-    };
-
-    // Extended by TiledLevel
-    Level.prototype.addBackground = function() {
-    }
-*/
-
     return Level;
 })

app/Game/Core/Loader/TiledLevel.js

@@ -6,90 +6,162 @@ 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) {
     
-    // Public
     function TiledLevel (path, engine) {
 
+        this.layerMapping = {
+            tiles: this.createTiles.bind(this),
+            items: this.createItems.bind(this),
+            spawnpoints: this.createSpawnPoints.bind(this)
+            //collision: this.createTiles.bind(this), collision renamed to tiles
+        };
+
         this.levelData = null;
         Parent.call(this, path, engine);
     }
 
     TiledLevel.prototype = Object.create(Parent.prototype);
 
-    TiledLevel.prototype.createTiles = function () {
+
-        if (!this.levelData) {
+    TiledLevel.prototype.setup = function(levelData) {
-            throw "Level: Can't create level, nothing found";
+        this.levelData = levelData;
+
+        var spawnpointsExists = levelData.layers.some(function(o) {
+            return o.name == "spawnpoints";
+        });
+
+        if (!spawnpointsExists) {
+            console.warn('No layerMapping for level file layer: ' + layerOptions.name);
+            return;
         }
 
-        var collisionLayer = this.getLayer(this.levelData, "collision");
+        function getLayerId(name, i) {
-
+            var mapping = {
-        if(collisionLayer) {
+                tiles: AbstractLayer.ID.TILE,
-
+                items: AbstractLayer.ID.ITEM,
-            for (var i = 0; i < collisionLayer.data.length; i++) {
+                spawnpoints: AbstractLayer.ID.SPAWN
-
+            }
-                var gid = collisionLayer.data[i];
+            if(mapping[name]) {
-                if(gid === 0) continue;
+                return mapping[name];
-
-                var imagePath = this.getTileImagePath(gid);
-
-                
-                var parts = imagePath.split("/");
-                var tileType = parts[parts.length - 1].split(".")[0].split("");
-
-                // FIXME rename s to shape, r to rotation etc.
-
-                var options = {
-                    s: parseInt(tileType[0], 10),
-                    r: parseInt(tileType[1], 10),
-                    t: imagePath,
-                    x: i % collisionLayer.width,
-                    y: parseInt(i / collisionLayer.height , 10)
-                }
-
-                //this.gameObjects.fixed.push(
-                new Tile(this.engine, "tile-" + i, options);
-                //);
             }
 
-        } else {
+            return "layer-" + i + "-" + name;
-            console.warn("Level: No collision Layer given");
         }
-    }
 
-    TiledLevel.prototype.createItems = function() {
+        var spawnpointsFound = false,
-        var objects = this.getLayer(this.levelData, "items").objects;
+            lastLayerId = null;
 
-        for (var i = 0; i < objects.length; i++) {
+        // from spawnpoints to background
-            var object = objects[i];
+        for (var i = levelData.layers.length - 1; i >= 0; i--) {
+            var layerOptions = levelData.layers[i];
+            layerOptions.z = i;
+            layerOptions.layerId = getLayerId(layerOptions.name, i);
 
-            var options = this.gatherOptions(object);
+            if (layerOptions.name == "spawnpoints") {
+                spawnpointsFound = true;
+            }
 
-            var uid = "item-" + i;
+            if (!spawnpointsFound) {
-            var item = this.createItem(uid, options);
+                continue;
-            //this.gameObjects.animated.push(item);
+            }
+
+            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) {
+    TiledLevel.prototype.createTiles = function(options) {
 
-        var texturePath = Settings.GRAPHICS_PATH + "Backgrounds/starnight.png";
+        var data = options.data;
-        var callback = function (mesh) {
+        var tilesOptions = [];
-            Nc.trigger(Nc.ns.client.view.mesh.add, mesh, 0); // FIXME: add at z layer -1 or so
+        for (var i = 0; i < data.length; i++) {
+
+            var gid = data[i];
+            if(gid === 0) continue;
+
+            var imagePath = this.getTileImagePath(gid);
+
+            var parts = imagePath.split("/");
+            var tileType = parts[parts.length - 1].split(".")[0].split("");
+
+            // FIXME rename s to shape, r to rotation etc.
+
+            var tileOptions = {
+                s: parseInt(tileType[0], 10),
+                r: parseInt(tileType[1], 10),
+                t: imagePath,
+                x: i % options.width,
+                y: parseInt(i / options.height , 10)
+            }
+
+            tilesOptions.push(tileOptions);
         }
-        Nc.trigger(Nc.ns.client.view.mesh.create, texturePath, callback, {
+
-            width: 4000,
+        Parent.prototype.createTiles.call(this, tilesOptions);
-            height: 2959, 
-            x: -(4000 - Settings.STAGE_WIDTH) / 2,
-            y: -(2959 + Settings.STAGE_HEIGHT + 700) / 2
-        });
     }
 
+    TiledLevel.prototype.createItems = function(options) {
+        var objects = options.objects;
+        var itemsOptions = []
+        for (var i = 0; i < objects.length; i++) {
+            var options = this.gatherOptions(objects[i]);
+            itemsOptions.push(options);
+        };
+
+        Parent.prototype.createItems.call(this, itemsOptions);
+    };
+
+    TiledLevel.prototype.createSpawnPoints = function(options) {
+        var points = options.objects.map(function(o) {
+            return { x: o.x, y: o.y };
+        });
+
+        Parent.prototype.createSpawnPoints.call(this, points);
+    };
+
     TiledLevel.prototype.gatherOptions = function(tiledObject) {
         var options = {};
 
@@ -106,7 +178,6 @@ define([
         var defaultOptions = this.getDefaultItemSettingsByName(options.name);
 
         options = Options.merge(options, defaultOptions);
-        //options = Options.merge(tiledObject.properties, options);
 
         return options;
     };
@@ -139,32 +210,5 @@ define([
         }
     }
 
-    TiledLevel.prototype.getRandomSpawnPoint = function() {
-        if(!this.levelData) {
-            return Parent.prototype.getRandomSpawnPoint.call(this);
-        } else {
-
-            var spawnLayer = this.getLayer(this.levelData, "spawnpoints");
-
-            var size = spawnLayer.objects.length;
-            var object = spawnLayer.objects[parseInt(Math.random() * (size -1), 10)];
-
-            return {
-                x: object.x / Settings.TILE_RATIO,
-                y: object.y / Settings.TILE_RATIO
-            }
-        }
-    };
-
-    TiledLevel.prototype.getLayer = function(levelData, name) {
-        for (var i = 0; i < levelData.layers.length; i++) {
-            if(levelData.layers[i].name === name) {
-                return levelData.layers[i];
-            }
-        }
-
-        throw "Layer '" + name + "' not found.";
-    };
-
     return TiledLevel;
 })

app/Lib/Utilities/Abstract.js

@@ -0,0 +1,18 @@
+define([
+	"Lib/Utilities/Exception"
+],
+ 
+function (Exception) {
+ 
+    function Abstract() {
+    }
+ 
+    Abstract.prototype.addMethod = function(methodName, params) {
+       	this.prototype[methodName] = function() {
+			throw new Exception("Abstract method", this, methodName + "(" + params.join(', ') + ") not overwritten.");
+		}
+    }
+ 
+    return Abstract;
+ 
+});

app/Lib/Utilities/Exception.js

@@ -17,7 +17,8 @@ function() {
 
         this.message = message.join(" ");
 
-    	Error.call(this, this.message);
+    	var e = Error.call(this, this.message);
+        console.log(e.stack)
     }
 
     Exception.prototype = Object.create(Error.prototype);

app/Lib/Utilities/NotificationCenter.js

@@ -25,6 +25,9 @@ function (Exception) {
         this.ns = {
             client: {
                 view: {
+                    layer: {
+                        createAndInsert: null
+                    },
                     mesh: {
                         create: null,
                         add: null,

static/html/index.html

@@ -1,7 +1,8 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title>Chuck Lobby</title>
+	<meta charset="utf-8">
+	<title>Chuck</title>
 	<link rel="stylesheet" href="/static/css/screen.css" type="text/css" media="screen">
 </head>
 <body>