added player health action view

This commit is contained in:
logsol 2014-02-17 16:30:59 +01:00
parent c3aee14f23
commit aa6fdaa2df
8 changed files with 214 additions and 44 deletions

View file

@ -45,6 +45,10 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
this.me.update();
}
for (var key in this.players) {
this.players[key].render();
}
for (var i = 0; i < this.gameObjects.animated.length; i++) {
this.gameObjects.animated[i].render();
}
@ -130,7 +134,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
GameController.prototype.onUpdateStats = function(options) {
var player = this.players[options.playerId];
player.stats = options.stats;
player.setStats(options.stats);
// FIXME: move to canvas later
if(player == this.me) {
@ -138,9 +142,10 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Notificat
}
};
GameController.prototype.onPlayerKill = function(playerId) {
GameController.prototype.onPlayerKill = function(options) {
var player = this.players[options.playerId];
player.kill();
var killedByPlayer = this.players[options.killedByPlayerId];
player.kill(killedByPlayer);
};
GameController.prototype.loadLevel = function (path) {

View file

@ -31,7 +31,6 @@ function (Parent, CoreItem, Settings, NotificationCenter) {
+ this.characterName + '/';
var callback = function(mesh) {
console.log(name, self.baseMeshName)
if(name == self.baseMeshName) {
self.mesh = mesh;
} else {

View file

@ -1,9 +1,108 @@
define([
"Game/Core/Player"
"Game/Core/Player",
"Lib/Utilities/NotificationCenter",
"Game/Config/Settings"
],
function(Parent) {
function (Parent, NotificationCenter, Settings) {
return Parent;
function Player(id, physicsEngine) {
Parent.call(this, id, physicsEngine);
this.playerInfoView = null;
this.playerInfoViewVisibleTimeout = null;
this.playerInfoViewVisible = false;
this.initHealthBar();
}
Player.prototype = Object.create(Parent.prototype);
});
Player.prototype.setStats = function(stats) {
var oldHealth = this.stats.health;
this.stats = stats;
if(oldHealth != this.stats.health) {
this.onHealthChange();
}
}
Player.prototype.initHealthBar = function() {
var self = this;
this.playerInfoViewVisible = false;
var options = {
x: 100,
y: 100,
healthFactor: this.stats.health / 100,
visible: this.playerInfoViewVisible
};
var callback = function(playerInfoView) {
self.playerInfoView = playerInfoView;
}
NotificationCenter.trigger("view/createAndAddPlayerInfo", callback, options);
};
Player.prototype.onHealthChange = function() {
if(this.stats.health != 100) {
this.setPlayerInfoVisible(true);
}
};
Player.prototype.kill = function(killedByPlayer) {
Parent.prototype.kill.call(this, killedByPlayer);
};
Player.prototype.spawn = function(x, y) {
Parent.prototype.spawn.call(this, x, y);
this.setPlayerInfoVisible(false);
};
Player.prototype.setPlayerInfoVisible = function(visible) {
var self = this;
this.playerInfoViewVisible = visible;
if(this.playerInfoViewVisibleTimeout) clearTimeout(this.playerInfoViewVisibleTimeout);
if(visible) {
var position = this.getPosition();
var options = {
x: position.x * Settings.RATIO,
y: position.y * Settings.RATIO,
healthFactor: this.stats.health / 100,
visible: this.playerInfoViewVisible
};
NotificationCenter.trigger("view/updatePlayerInfo", this.playerInfoView, options);
this.playerInfoViewVisibleTimeout = setTimeout(function() {
self.playerInfoViewVisible = false;
NotificationCenter.trigger("view/updatePlayerInfo", self.playerInfoView, {visible: self.playerInfoViewVisible});
}, Settings.HEALTH_DISPLAY_TIME * 1000);
} else {
NotificationCenter.trigger("view/updatePlayerInfo", this.playerInfoView, {visible: this.playerInfoViewVisible});
}
};
Player.prototype.render = function() {
if(this.playerInfoViewVisible) {
var position = this.getPosition();
var options = {
healthFactor: this.stats.health / 100,
x: position.x * Settings.RATIO,
y: position.y * Settings.RATIO,
}
NotificationCenter.trigger("view/updatePlayerInfo", this.playerInfoView, options);
}
};
Player.prototype.destroy = function() {
Parent.prototype.destroy.call(this);
NotificationCenter.trigger("view/removePlayerInfo", this.playerInfoView);
};
return Player;
});

View file

@ -22,6 +22,10 @@ function (DomController, Settings, Exception, NotificationCenter) {
NotificationCenter.on("view/toggleDebugMode", this.onToggleDebugMode, this);
NotificationCenter.on("view/toggleInfo", this.onToggleInfo, this);
NotificationCenter.on("view/createAndAddPlayerInfo", this.onCreateAndAddPlayerInfo, this);
NotificationCenter.on("view/updatePlayerInfo", this.onUpdatePlayerInfo, this);
NotificationCenter.on("view/removePlayerInfo", this.onRemovePlayerInfo, this);
}
AbstractView.prototype.isWebGlEnabled = function () {
@ -131,5 +135,17 @@ function (DomController, Settings, Exception, NotificationCenter) {
throw new Exception('Abstract Function showInfo not overwritten');
};
AbstractView.prototype.onCreateAndAddPlayerInfo = function(options) {
throw new Exception('Abstract Function onCreateAndAddPlayerInfo 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');
};
return AbstractView;
});

View file

@ -43,33 +43,6 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
this.setCanvas(this.renderer.view);
}
PixiView.prototype.initCamera = function () {
this.container = new PIXI.DisplayObjectContainer();
this.stage.addChild(this.container);
}
PixiView.prototype.initInfo = function() {
this.infoContainer = new PIXI.DisplayObjectContainer();
this.stage.addChild(this.infoContainer);
var blurFilter = new PIXI.BlurFilter();
blurFilter.blurX = 12;
blurFilter.blurY = 12;
var grayFilter = new PIXI.GrayFilter();
grayFilter.gray = 0.85;
this.infoFilters = [blurFilter, grayFilter];
this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: "red", align: "center"});
this.infoBox = new PIXI.Graphics();
this.infoBox.alpha = 0.7;
this.infoContainer.addChild(this.infoBox);
this.infoContainer.addChild(this.infoText);
this.infoContainer.visible = false;
};
PixiView.prototype.render = function () {
if(this.me && this.me.isSpawned) {
var pos = this.calculateCameraPosition();
@ -79,6 +52,8 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
this.renderer.render(this.stage);
}
// Meshes
PixiView.prototype.addMesh = function(mesh) {
this.container.addChild(mesh);
};
@ -89,9 +64,7 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
PixiView.prototype.createMesh = function (texturePath, callback, options) {
var texture = PIXI.Texture.fromImage(texturePath, true, PIXI.BaseTexture.SCALE_MODE.NEAREST);
//texture.filter = PIXI.BaseTexture.FILTER.LINEAR;
console.log(PIXI.BaseTexture);
var texture = PIXI.Texture.fromImage(texturePath, false, PIXI.BaseTexture.SCALE_MODE.NEAREST);
var mesh = new PIXI.Sprite(texture);
@ -132,6 +105,13 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
if (options.pivot) mesh.pivot = new PIXI.Point(options.pivot.x, options.pivot.y);
}
// Camera
PixiView.prototype.initCamera = function () {
this.container = new PIXI.DisplayObjectContainer();
this.stage.addChild(this.container);
}
PixiView.prototype.calculateCameraPosition = function() {
var zoom = this.container.scale.x;
@ -170,6 +150,29 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
}
};
// Info Overlay
PixiView.prototype.initInfo = function() {
this.infoContainer = new PIXI.DisplayObjectContainer();
this.stage.addChild(this.infoContainer);
var blurFilter = new PIXI.BlurFilter();
blurFilter.blurX = 12;
blurFilter.blurY = 12;
var grayFilter = new PIXI.GrayFilter();
grayFilter.gray = 0.85;
this.infoFilters = [blurFilter, grayFilter];
this.infoText = new PIXI.Text("", {font: "normal 20px monospace", fill: "red", align: "center"});
this.infoBox = new PIXI.Graphics();
this.infoBox.alpha = 0.7;
this.infoContainer.addChild(this.infoBox);
this.infoContainer.addChild(this.infoText);
this.infoContainer.visible = false;
};
PixiView.prototype.toggleInfo = function(show, string) {
if(show) {
this.infoText.setText(string);
@ -200,5 +203,47 @@ function (Parent, DomController, PIXI, Settings, NotificationCenter) {
}
};
// Player Info
PixiView.prototype.onCreateAndAddPlayerInfo = function(callback, options) {
var playerInfo = new PIXI.Graphics();
this.container.addChild(playerInfo);
this.onUpdatePlayerInfo(playerInfo, options);
callback(playerInfo);
};
PixiView.prototype.onUpdatePlayerInfo = function(playerInfo, options) {
var width = 14,
height = 2,
borderWidth = 1,
offsetX = -8,
offsetY = -52;
if(typeof options.healthFactor != 'undefined') {
playerInfo.clear();
playerInfo.beginFill(0x000000);
playerInfo.lineStyle(borderWidth, 0x000000);
playerInfo.drawRect(0, 0, width, height);
playerInfo.endFill();
if(options.healthFactor > 0) {
playerInfo.beginFill(0x00FF00);
playerInfo.lineStyle(0, 0x000000);
playerInfo.drawRect(borderWidth, borderWidth, width * options.healthFactor, height);
playerInfo.endFill();
}
}
if (options.x && options.y) playerInfo.position = new PIXI.Point(offsetX + options.x, offsetY + options.y);
if (options.visible === true || options.visible === false) playerInfo.visible = options.visible;
};
PixiView.prototype.onRemovePlayerInfo = function(playerInfo) {
this.container.removeChild(playerInfo);
};
return PixiView;
});