From aa6fdaa2df65a4416494419260290d7293ebd26d Mon Sep 17 00:00:00 2001 From: logsol Date: Mon, 17 Feb 2014 16:30:59 +0100 Subject: [PATCH] added player health action view --- app/Game/Client/GameController.js | 11 +- app/Game/Client/GameObjects/Items/RagDoll.js | 1 - app/Game/Client/Player.js | 107 ++++++++++++++++++- app/Game/Client/View/Views/AbstractView.js | 16 +++ app/Game/Client/View/Views/PixiView.js | 105 ++++++++++++------ app/Game/Config/Settings.js | 3 +- app/Game/Core/Player.js | 2 +- app/Game/Server/Player.js | 13 ++- 8 files changed, 214 insertions(+), 44 deletions(-) diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 6ca7a1c..485ab76 100755 --- a/app/Game/Client/GameController.js +++ b/app/Game/Client/GameController.js @@ -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) { diff --git a/app/Game/Client/GameObjects/Items/RagDoll.js b/app/Game/Client/GameObjects/Items/RagDoll.js index 65460fa..dbd1d0c 100644 --- a/app/Game/Client/GameObjects/Items/RagDoll.js +++ b/app/Game/Client/GameObjects/Items/RagDoll.js @@ -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 { diff --git a/app/Game/Client/Player.js b/app/Game/Client/Player.js index 4626aa1..004f880 100755 --- a/app/Game/Client/Player.js +++ b/app/Game/Client/Player.js @@ -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; + +}); \ No newline at end of file diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Views/AbstractView.js index 07221ae..f274cb7 100755 --- a/app/Game/Client/View/Views/AbstractView.js +++ b/app/Game/Client/View/Views/AbstractView.js @@ -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; }); \ 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 90a618f..db833dd 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Views/PixiView.js @@ -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; }); diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index 06d4715..b1019dc 100755 --- a/app/Game/Config/Settings.js +++ b/app/Game/Config/Settings.js @@ -35,7 +35,8 @@ define(function() { MAX_THROW_FORCE: 18, MAX_THROW_ANGULAR_VELOCITY: 0, MAX_RUNNING_WEIGHT: 9, - RESPAWN_TIME: 0.5, + RESPAWN_TIME: 3, + HEALTH_DISPLAY_TIME: 2, // restitution: bouncyness, friction: rubbing, density: mass TILE_FRICTION: 0.99, diff --git a/app/Game/Core/Player.js b/app/Game/Core/Player.js index 66431cf..6220d57 100755 --- a/app/Game/Core/Player.js +++ b/app/Game/Core/Player.js @@ -79,7 +79,7 @@ function (Doll, Settings, NotificationCenter) { this.holdingItem = null; }; - Player.prototype.kill = function(killedBy) { + Player.prototype.kill = function(killedByPlayer) { if(!this.isSpawned) return false; // FIXME: do something better then just respawn in GameController diff --git a/app/Game/Server/Player.js b/app/Game/Server/Player.js index 123105c..38d6c4c 100755 --- a/app/Game/Server/Player.js +++ b/app/Game/Server/Player.js @@ -58,10 +58,12 @@ function (Parent, NotificationCenter) { Player.prototype.addDamage = function(damage, enemy) { this.stats.health -= damage; + + if(this.stats.health < 0) this.stats.health = 0; if(this.stats.health <= 0) { enemy.score(); - this.kill(); + this.kill(enemy); } else { this.broadcastStats(); } @@ -73,11 +75,14 @@ function (Parent, NotificationCenter) { this.broadcastStats(); }; - Player.prototype.kill = function() { - Parent.prototype.kill.call(this); + Player.prototype.kill = function(killedByPlayer) { + Parent.prototype.kill.call(this, killedByPlayer); this.stats.deaths++; this.broadcastStats(); - NotificationCenter.trigger("broadcastGameCommand", "playerKill", this.id); + NotificationCenter.trigger("broadcastGameCommand", "playerKill", { + playerId: this.id, + killedByPlayerId: killedByPlayer.id + }); }; Player.prototype.score = function() {