working paralax (not for zoom)

app/Game/Client/Loader/Level.js

@@ -90,7 +90,11 @@ function (Parent, Settings, Nc, PIXI, AbstractLayer) {
 
     Level.prototype.setupLayer = function(options, behind, referenceId) {
         Parent.prototype.setupLayer.call(this, options, behind, referenceId);
-        Nc.trigger(Nc.ns.client.view.layer.createAndInsert, options.layerId, 1, 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

@@ -80,14 +80,19 @@ function (Parent, Settings, Nc) {
                     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
+                callback,
+                {
+                    alpha: options.opacity
+                }
             );
         }
 

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

@@ -4,9 +4,17 @@ define([
 
 function (Abstract) {
 
-    function Layer(name, z, parallaxSpeed) {
+    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', { 
@@ -24,10 +32,20 @@ function (Abstract) {
     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

@@ -64,7 +64,7 @@ function (Abstract, DomController, Settings, Exception, Nc) {
     AbstractView.prototype.setMe = function(player) {
         this.me = player;
     };
-
+/*
     AbstractView.prototype.calculateCameraPosition = function() {
         var reference = this.me.getPosition();
         var pos = {};
@@ -80,7 +80,7 @@ function (Abstract, DomController, Settings, Exception, Nc) {
 
         return pos;
     };
-
+*/
     AbstractView.prototype.onFullscreenChange = function(isFullScreen) {
 
         if (!isFullScreen) {

app/Game/Client/View/LayerManager.js

@@ -6,7 +6,7 @@ define([
  
 function (Nc, Exception, Layer) {
  
-    function LayerManager(container) {
+    function LayerManager(container, me) {
         this.layers = [];
         this.container = container;
 
@@ -21,6 +21,14 @@ function (Nc, Exception, Layer) {
             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)
@@ -87,6 +95,11 @@ function (Nc, Exception, Layer) {
         return null;
     };
 
+
+
+
+    /* Delegate methods */
+
     LayerManager.prototype.delegate = function() {
         var methodName = arguments[0];
         var layerId = arguments[1];

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

@@ -2,9 +2,10 @@ define([
     "Game/Client/View/Abstract/Layer",
 	"Lib/Vendor/Pixi",
     "Game/Client/View/Pixi/ColorRangeReplaceFilter",
+    "Game/Config/Settings",
 ],
 
-function (Parent, PIXI, ColorRangeReplaceFilter) {
+function (Parent, PIXI, ColorRangeReplaceFilter, Settings) {
 
     var AVAILABLE_MESH_FILTERS = {
         "blur": PIXI.BlurFilter,
@@ -151,7 +152,35 @@ function (Parent, PIXI, ColorRangeReplaceFilter) {
         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

@@ -50,7 +50,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
 
         this.initCamera();
 
-        this.layerManager = new LayerManager(this.container);
+        this.layerManager = new LayerManager(this.container, this.me);
 
         this.initLoader();
 
@@ -61,21 +61,35 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
     }
 
     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);
     }
 
     // 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;
 
@@ -115,7 +129,7 @@ function (Parent, DomController, PIXI, Settings, Nc, Exception, GameStats, Layer
 
         return pos;
     };
-
+*/
     PixiView.prototype.setCameraZoom = function (zoom) {
 /*
         var oldZoom = this.container.scale.x;

static/maps/tiled/debug.json

@@ -3,9 +3,28 @@
  "layers":[
         {
          "height":0,
-         "image":"..\/..\/img\/Backgrounds\/starnight.png",
+         "image":"..\/..\/img\/Backgrounds\/starnight-small.png",
          "name":"background",
          "opacity":1,
+         "properties":
+            {
+             "parallaxSpeed":"-1.0"
+            },
+         "type":"imagelayer",
+         "visible":false,
+         "width":0,
+         "x":0,
+         "y":0
+        },
+        {
+         "height":0,
+         "image":"..\/..\/img\/Backgrounds\/clouds.png",
+         "name":"clouds",
+         "opacity":0.3,
+         "properties":
+            {
+             "parallaxSpeed":"-0.3"
+            },
          "type":"imagelayer",
          "visible":false,
          "width":0,