mirror of
https://github.com/logsol/chuck.js.git
synced 2026-05-11 10:37:34 +00:00
finished shirt color, fixes #77
This commit is contained in:
Jeena
parent
a5c1c05bb4
commit
8f2cf11e38
8 changed files with 226 additions and 107 deletions
|
|
@ -30,7 +30,6 @@ function (Key) {
|
|||
}
|
||||
|
||||
KeyboardInput.prototype._onKeyDown = function (e) {
|
||||
console.log(e.keyCode)
|
||||
var key = this._getKeyByKeyCode(e.keyCode);
|
||||
|
||||
if (key && !key.getActive()) {
|
||||
|
|
|
|||
|
|
@ -41,7 +41,9 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) {
|
|||
tab: 9,
|
||||
|
||||
plus: 187,
|
||||
plusfx: 171,
|
||||
minus: 189,
|
||||
minusfx: 173,
|
||||
zero: 48
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +70,9 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) {
|
|||
this.keyboardInput.registerKey(keys.space, 'jump', 'jumpStop');
|
||||
|
||||
this.keyboardInput.registerKey(keys.plus, 'zoomIn');
|
||||
this.keyboardInput.registerKey(keys.plusfx, 'zoomIn');
|
||||
this.keyboardInput.registerKey(keys.minus, 'zoomOut');
|
||||
this.keyboardInput.registerKey(keys.minusfx, 'zoomOut');
|
||||
this.keyboardInput.registerKey(keys.zero, 'zoomReset');
|
||||
|
||||
this.keyboardInput.registerKey(keys.tab, 'showInfo', 'hideInfo');
|
||||
|
|
@ -128,11 +132,11 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) {
|
|||
};
|
||||
|
||||
PlayerController.prototype.showInfo = function() {
|
||||
Nc.trigger(Nc.ns.client.game.gameInfo.toggle, true);
|
||||
Nc.trigger(Nc.ns.client.game.gameStats.toggle, true);
|
||||
};
|
||||
|
||||
PlayerController.prototype.hideInfo = function() {
|
||||
Nc.trigger(Nc.ns.client.game.gameInfo.toggle, false);
|
||||
Nc.trigger(Nc.ns.client.game.gameStats.toggle, false);
|
||||
};
|
||||
|
||||
PlayerController.prototype.zoomIn = function() {
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
|
|||
Parent.call(this, options);
|
||||
|
||||
this.ncTokens = this.ncTokens.concat([
|
||||
Nc.on(Nc.ns.client.game.gameInfo.toggle, this.toggleInfo, this)
|
||||
Nc.on(Nc.ns.client.game.gameStats.toggle, this.toggleGameStats, this)
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
@ -240,7 +240,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
|
|||
Parent.prototype.loadLevel.call(this, path);
|
||||
}
|
||||
|
||||
GameController.prototype.toggleInfo = function(show) {
|
||||
GameController.prototype.toggleGameStats = function(show) {
|
||||
|
||||
var playersArray = [];
|
||||
for (var key in this.players) {
|
||||
|
|
@ -257,40 +257,7 @@ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, Nc, reque
|
|||
return 0;
|
||||
});
|
||||
|
||||
function pad(string, max, alignLeft) {
|
||||
string = string.substring(0, max - 1);
|
||||
|
||||
var spaces = new Array( max - string.length + 1 ).join(" ");
|
||||
if(alignLeft) {
|
||||
return string + spaces;
|
||||
} else {
|
||||
return spaces + string;
|
||||
}
|
||||
}
|
||||
|
||||
var string = "" +
|
||||
pad("#", 2, false) + " " +
|
||||
pad("Name", 12, true) +
|
||||
pad("Score", 6, false) +
|
||||
pad("Deaths", 7, false) +
|
||||
pad("Health", 7, false) +
|
||||
"\n-----------------------------------\n";
|
||||
|
||||
var lines = [];
|
||||
sortedPlayers.forEach(function(player, i) {
|
||||
var name = player.getNickname();
|
||||
lines.push(
|
||||
pad("" + (i + 1) + ".", 2, false) + " " +
|
||||
pad(name, 12, true) +
|
||||
pad("" + player.stats.score, 6, false) +
|
||||
pad("" + player.stats.deaths, 7, false) +
|
||||
pad("" + parseInt(player.stats.health, 10), 7, false)
|
||||
);
|
||||
}, this);
|
||||
|
||||
string += lines.join("\n");
|
||||
|
||||
this.view.toggleInfo(show, string);
|
||||
Nc.trigger(Nc.ns.client.view.gameStats.toggle, show, sortedPlayers);
|
||||
};
|
||||
|
||||
GameController.prototype.destroy = function() {
|
||||
|
|
|
|||
130
app/Game/Client/View/Views/Pixi/GameStats.js
Normal file
130
app/Game/Client/View/Views/Pixi/GameStats.js
Normal file
|
|
@ -0,0 +1,130 @@
|
|||
define([
|
||||
"Lib/Vendor/Pixi",
|
||||
"Lib/Utilities/NotificationCenter",
|
||||
"Game/Config/Settings",
|
||||
"Lib/Utilities/ColorConverter"
|
||||
],
|
||||
|
||||
function (PIXI, Nc, Settings, ColorConverter) {
|
||||
|
||||
function GameStats(container) {
|
||||
|
||||
this.style = {
|
||||
borderWidth: 3,
|
||||
padding: 20,
|
||||
colors: {
|
||||
background: 0x000000,
|
||||
text: "red",
|
||||
border: 0xAA0000
|
||||
}
|
||||
};
|
||||
|
||||
this.container = container;
|
||||
|
||||
this.infoContainer = new PIXI.DisplayObjectContainer();
|
||||
|
||||
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: this.style.colors.text, 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;
|
||||
|
||||
Nc.on(Nc.ns.client.view.gameStats.toggle, this.toggle, this);
|
||||
}
|
||||
|
||||
GameStats.prototype.getInfoContainer = function() {
|
||||
return this.infoContainer;
|
||||
};
|
||||
|
||||
GameStats.prototype.toggle = function(show, sortedPlayers) {
|
||||
|
||||
function pad(string, max, alignLeft) {
|
||||
string = string.substring(0, max - 1);
|
||||
|
||||
var spaces = new Array( max - string.length + 1 ).join(" ");
|
||||
if(alignLeft) {
|
||||
return string + spaces;
|
||||
} else {
|
||||
return spaces + string;
|
||||
}
|
||||
}
|
||||
|
||||
var string = "" +
|
||||
pad("#", 2, false) + " " +
|
||||
pad("Name", 12, true) +
|
||||
pad("Score", 6, false) +
|
||||
pad("Deaths", 7, false) +
|
||||
pad("Health", 7, false) +
|
||||
"\n-----------------------------------\n";
|
||||
|
||||
var lines = [];
|
||||
sortedPlayers.forEach(function(player, i) {
|
||||
var name = player.getNickname();
|
||||
lines.push(
|
||||
pad("" + (i + 1) + ".", 2, false) + " " +
|
||||
pad(name, 12, true) +
|
||||
pad("" + player.stats.score, 6, false) +
|
||||
pad("" + player.stats.deaths, 7, false) +
|
||||
pad("" + parseInt(player.stats.health, 10), 7, false)
|
||||
);
|
||||
}, this);
|
||||
|
||||
string += lines.join("\n");
|
||||
|
||||
|
||||
if(show) {
|
||||
this.infoText.setText(string);
|
||||
this.infoText.updateText();
|
||||
this.infoText.dirty = false;
|
||||
|
||||
var x = Settings.STAGE_WIDTH / 2 - this.infoText.width / 2,
|
||||
y = Settings.STAGE_HEIGHT / 2 - this.infoText.height / 2;
|
||||
this.infoText.position = new PIXI.Point(x, y);
|
||||
|
||||
this.infoBox.clear();
|
||||
this.infoBox.beginFill(this.style.colors.background);
|
||||
this.infoBox.lineStyle(this.style.borderWidth, this.style.colors.border);
|
||||
this.infoBox.drawRect(0, 0, this.infoText.width - this.style.borderWidth + 2 * this.style.padding * 2, this.infoText.height - this.style.borderWidth + 2 * this.style.padding);
|
||||
this.infoBox.endFill();
|
||||
this.infoBox.position.x = this.infoText.position.x + this.style.borderWidth/2 - this.style.padding * 2;
|
||||
this.infoBox.position.y = this.infoText.position.y + this.style.borderWidth/2 - this.style.padding;
|
||||
|
||||
this.infoContainer.visible = true;
|
||||
this.container.filters = this.infoFilters;
|
||||
this.infoFilters.forEach(function(filter) { filter.dirty = true; });
|
||||
|
||||
this.drawPlayerColors(sortedPlayers);
|
||||
|
||||
} else {
|
||||
this.infoText.setText("...");
|
||||
this.infoContainer.visible = false;
|
||||
this.container.filters = null;
|
||||
}
|
||||
}
|
||||
|
||||
GameStats.prototype.drawPlayerColors = function(sortedPlayers) {
|
||||
var converter = new ColorConverter();
|
||||
|
||||
sortedPlayers.forEach(function(player, i) {
|
||||
|
||||
this.infoBox.beginFill(converter.getColorByName(player.getNickname()));
|
||||
this.infoBox.lineStyle();
|
||||
this.infoBox.drawRect(this.style.padding, i * 21 + this.style.padding + 42, 16, 16);
|
||||
this.infoBox.endFill();
|
||||
|
||||
}, this);
|
||||
};
|
||||
|
||||
return GameStats;
|
||||
|
||||
});
|
||||
|
|
@ -5,10 +5,11 @@ define([
|
|||
"Game/Client/View/Views/Pixi/ColorRangeReplaceFilter",
|
||||
"Game/Config/Settings",
|
||||
"Lib/Utilities/NotificationCenter",
|
||||
"Lib/Utilities/Exception"
|
||||
"Lib/Utilities/Exception",
|
||||
"Game/Client/View/Views/Pixi/GameStats"
|
||||
],
|
||||
|
||||
function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception) {
|
||||
function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Exception, GameStats) {
|
||||
|
||||
var AVAILABLE_MESH_FILTERS = {
|
||||
"blur": PIXI.BlurFilter,
|
||||
|
|
@ -54,10 +55,12 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
|
|||
this.stage = new PIXI.Stage(0x333333);
|
||||
|
||||
this.initCamera();
|
||||
this.initInfo();
|
||||
this.initLoader();
|
||||
|
||||
this.initCanvas(this.renderer.view);
|
||||
|
||||
this.gameStats = new GameStats(this.container);
|
||||
this.stage.addChild(this.gameStats.getInfoContainer());
|
||||
}
|
||||
|
||||
PixiView.prototype.render = function () {
|
||||
|
|
@ -256,58 +259,6 @@ function (Parent, DomController, PIXI, ColorRangeReplaceFilter, Settings, Nc, Ex
|
|||
}
|
||||
};
|
||||
|
||||
// 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);
|
||||
this.infoText.updateText();
|
||||
this.infoText.dirty = false;
|
||||
|
||||
var x = Settings.STAGE_WIDTH / 2 - this.infoText.width / 2,
|
||||
y = Settings.STAGE_HEIGHT / 2 - this.infoText.height / 2;
|
||||
this.infoText.position = new PIXI.Point(x, y);
|
||||
|
||||
var borderWidth = 3;
|
||||
var padding = 20;
|
||||
this.infoBox.clear();
|
||||
this.infoBox.beginFill(0x000000);
|
||||
this.infoBox.lineStyle(borderWidth, 0xAA0000);
|
||||
this.infoBox.drawRect(0, 0, this.infoText.width - borderWidth + 2 * padding * 2, this.infoText.height - borderWidth + 2 * padding);
|
||||
this.infoBox.endFill();
|
||||
this.infoBox.position.x = this.infoText.position.x + borderWidth/2 - padding * 2;
|
||||
this.infoBox.position.y = this.infoText.position.y + borderWidth/2 - padding;
|
||||
|
||||
this.infoContainer.visible = true;
|
||||
this.container.filters = this.infoFilters;
|
||||
this.infoFilters.forEach(function(filter) { filter.dirty = true; });
|
||||
} else {
|
||||
this.infoText.setText("...");
|
||||
this.infoContainer.visible = false;
|
||||
this.container.filters = null;
|
||||
}
|
||||
};
|
||||
|
||||
// Player Info
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue