jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
logsol 2013-12-18 03:01:38 +01:00
parent d5fd9c6609
commit 622975ba7b
4 changed files with 167 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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;
});

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

@ -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;

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

@ -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;
});