diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Views/AbstractView.js index f249687..59b382b 100644 --- a/app/Game/Client/View/Views/AbstractView.js +++ b/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; }); \ No newline at end of file diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Views/PixiView.js index f3fc72f..b510f49 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/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() { - Parent.prototype.init.call(this); + + PixiView.prototype.init = function () { + + 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; diff --git a/app/Game/Client/View/Views/ThreeView.js b/app/Game/Client/View/Views/ThreeView.js index 93d52e3..55670d1 100755 --- a/app/Game/Client/View/Views/ThreeView.js +++ b/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; }); \ No newline at end of file diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index 4b2c75c..c70c178 100755 --- a/app/Game/Config/Settings.js +++ b/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,