implemented pixi view, which lead to pretty good performance improvements :)

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

@@ -1,9 +1,10 @@
 define([
     "Game/Client/View/DomController", 
-    "Game/Config/Settings"
+    "Game/Config/Settings",
+    "Lib/Utilities/Exception"
 ],
 
-function (DomController, Settings) {
+function (DomController, Settings, Exception) {
     
     function AbstractView () {
     	this.me = null;
@@ -29,19 +30,19 @@ function (DomController, Settings) {
     }
 
     AbstractView.prototype.loadPlayerMesh = function(player) {
-        throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+        throw new Exception('Abstract Function loadPlayerMesh not overwritten ');
     };
 
     AbstractView.prototype.loadMeshes = function(objects) {
-    	throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+    	throw new Exception('Abstract Function loadMeshes not overwritten ');
     };
 
     AbstractView.prototype.render = function () {
-    	throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+    	throw new Exception('Abstract Function render not overwritten ');
     }
 
     AbstractView.prototype.createMesh = function (width, height, x, y, imgPath, callback) {
-    	throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+    	throw new Exception('Abstract Function createMesh not overwritten ');
     }
 
     AbstractView.prototype.setMe = function(player) {
@@ -49,21 +50,47 @@ function (DomController, Settings) {
     };
 
     AbstractView.prototype.addPlayer = function(player) {
- 		throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+ 		throw new Exception('Abstract Function addPlayer not overwritten ');
     };
 
     AbstractView.prototype.removPlayer = function(player) {
-    	throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+    	throw new Exception('Abstract Function removPlayer not overwritten ');
     };
 
     AbstractView.prototype.setCameraPosition = function (x, y) {
-    	throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString());
+    	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 not overwritten ' + arguments.callee.toString());
+    	throw new Exception('Abstract Function setCameraZoom not overwritten ');
     }
 
+    // TODO Move to Level
+    AbstractView.prototype.tileAtPositionExists = function(objects, x, y) {
+
+        for (var i = 0; i < objects.length; i++) {
+            var o = objects[i];
+            if(o.x == x && o.y == y) return true;
+        }
+        return false;
+    };
+
 
     return AbstractView;
 });

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

@@ -5,17 +5,142 @@ define([
     "Game/Config/Settings"
 ], 
 
-function (Parent, DomController, Pixi, Settings) {
+function (Parent, DomController, PIXI, Settings) {
     
     function PixiView () {
 
         Parent.call(this);
+
+        this.movableObjects = [];
+        this.camera = null;
+        this.stage = null;
+        this.container = null;
+        this.init();
     }
 
     PixiView.prototype = Object.create(Parent.prototype);
 
-    PixiView.prototype.init = function() {
+    PixiView.prototype.init = function () {
-        Parent.prototype.init.call(this);
+
+        if(Settings.USE_WEBGL) {
+            this.renderer = new PIXI.WebGLRenderer(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
+        } else {
+            this.renderer = new PIXI.CanvasRenderer(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
+        }
+
+        this.stage = stage = new PIXI.Stage(0x333333);
+        
+        this.initCamera();
+
+        this.setCanvas(this.renderer.view);
+    }
+
+    PixiView.prototype.loadMeshes = function(objects) {
+        var self = this;
+        for (var i = 0; i < objects.length; i++) {
+            (function() {
+                var o = objects[i];
+                var x = o.x * Settings.TILE_SIZE;
+                var y = o.y * Settings.TILE_SIZE;
+                var r = o.r ? o.r : 0;
+                var rad = 0.5 * Math.PI * -r;
+
+                var material = self.tileAtPositionExists(objects, o.x, o.y -1) ? "Soil" : "GrassSoil";
+                var callback = function(mesh) {
+                    self.container.addChild(mesh);
+                    //console.log("img height:", mesh.material.map.image.height);
+                    //mesh.rotation.z = rad;
+                };
+                self.createMesh(Settings.TILE_SIZE, Settings.TILE_SIZE, x, y, 'static/img/Tiles/' + material + '/' + o.s + '' + o.r + '.gif', callback, true);
+            })();
+        };
+    };
+
+    PixiView.prototype.render = function () {
+        if(this.me) {
+            var pos = this.calculateCameraPosition();
+            this.setCameraPosition(pos.x, pos.y);
+        }
+
+        for (var i = 0; i < this.movableObjects.length; i++) {
+            var obj = this.movableObjects[i];
+            var pos = obj.player.getPosition();
+            obj.mesh.position.x = pos.x * Settings.RATIO + 4 ;
+            obj.mesh.position.y = pos.y * Settings.RATIO - 34; // weirdly a different magic number as for three
+        }
+
+        this.renderer.render(this.stage);
+    }
+
+    PixiView.prototype.createMesh = function (width, height, x, y, imgPath, callback, isTile) {
+
+        var texture = PIXI.Texture.fromImage(imgPath);
+        var mesh;
+
+        //if(isTile) {
+        //    mesh = new PIXI.TilingSprite(texture, width, height);
+        //} else {
+
+        mesh = new PIXI.Sprite(texture);
+        mesh.width = width;
+        mesh.height = height;
+
+        //}
+        
+        mesh.position.x = x;
+        mesh.position.y = y;
+
+        callback(mesh);
+    }
+
+    PixiView.prototype.addPlayer = function(player) {
+        var self = this;
+        var mesh = null;
+        var pos = player.getPosition();
+        var size = {w:10, h:42};
+        var callback = function(mesh) {
+            self.container.addChild(mesh);
+            self.movableObjects.push({
+                player: player,
+                mesh: mesh
+            });            
+        }
+        this.createMesh(size.w, size.h, pos.x, pos.y, "static/img/Characters/Chuck/chuck.png", callback, false);
+    };
+
+    PixiView.prototype.removPlayer = function(player) {
+        // nothing
+    };
+
+    PixiView.prototype.initCamera = function () {
+        this.container = new PIXI.DisplayObjectContainer();
+        this.stage.addChild(this.container);
+    }
+
+    PixiView.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;
+    };
+
+    PixiView.prototype.setCameraPosition = function (x, y) {
+        this.container.position.x = x + Settings.STAGE_WIDTH / 2;
+        this.container.position.y = y + Settings.STAGE_HEIGHT / 2;
+    };
+
+    PixiView.prototype.setCameraZoom = function (z) {
+        //this.container.position.x = x;
+        //this.container.position.y = y; 
     };
 
     return PixiView;

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

@@ -101,10 +101,6 @@ function (Parent, DomController, Three, Settings) {
         mesh.position.y = y;
     }
 
-    ThreeView.prototype.setMe = function(player) {
-        this.me = player;
-    };
-
     ThreeView.prototype.addPlayer = function(player) {
         var self = this;
         var mesh = null;
@@ -145,22 +141,6 @@ function (Parent, DomController, Three, Settings) {
         this.setCameraPosition(Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2);
     }
 
-    ThreeView.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;
-    };
-
     ThreeView.prototype.setCameraPosition = function (x, y) {
         this.camera.position.x = x;
         this.camera.position.y = y;
@@ -177,15 +157,5 @@ function (Parent, DomController, Three, Settings) {
         this.camera.updateProjectionMatrix();
     };
 
-
-    ThreeView.prototype.tileAtPositionExists = function(objects, x, y) {
-
-        for (var i = 0; i < objects.length; i++) {
-            var o = objects[i];
-            if(o.x == x && o.y == y) return true;
-        }
-        return false;
-    };
-
     return ThreeView;
 });

app/Game/Config/Settings.js

@@ -18,7 +18,7 @@ define({
     RATIO: 35,
     TILE_SIZE: 15, //15
     CAMERA_IS_ORTHOGRAPHIC: true,
-    VIEW_CONTROLLER: 1 ? 'Three' : 'Pixi',
+    VIEW_CONTROLLER: 0 ? 'Three' : 'Pixi',
 
     // GAME PLAY 
     WALK_SPEED: 2.5,