feat: implemented status bars for player

This commit is contained in:
Renge 2022-04-20 17:57:14 -04:00
parent 07665e0e6f
commit ebabe03098
3 changed files with 47 additions and 7 deletions

View File

@ -11,12 +11,15 @@ export default class Rect extends Graphic {
/** The width of the border */ /** The width of the border */
borderWidth: number; borderWidth: number;
fillWidth: number;
constructor(position: Vec2, size: Vec2){ constructor(position: Vec2, size: Vec2){
super(); super();
this.position = position; this.position = position;
this.size = size; this.size = size;
this.borderColor = Color.TRANSPARENT; this.borderColor = Color.TRANSPARENT;
this.borderWidth = 0; this.borderWidth = 0;
this.fillWidth = null;
} }
/** /**

View File

@ -59,7 +59,11 @@ export default class GraphicRenderer {
// Draw the interior of the rect // Draw the interior of the rect
if(rect.color.a !== 0){ if(rect.color.a !== 0){
this.ctx.fillStyle = rect.color.toStringRGB(); this.ctx.fillStyle = rect.color.toStringRGB();
this.ctx.fillRect((-rect.size.x/2)*zoom, (-rect.size.y/2)*zoom, rect.size.x*zoom, rect.size.y*zoom); if (rect.fillWidth !== null) {
this.ctx.fillRect((-rect.size.x/2)*zoom, (-rect.size.y/2)*zoom, rect.fillWidth*zoom, rect.size.y*zoom);
} else {
this.ctx.fillRect((-rect.size.x/2)*zoom, (-rect.size.y/2)*zoom, rect.size.x*zoom, rect.size.y*zoom);
}
} }
// Draw the border of the rect if it isn't transparent // Draw the border of the rect if it isn't transparent

View File

@ -70,11 +70,14 @@ export default class GameLevel extends Scene {
// Health UI // Health UI
protected healthLabel: Label; protected healthLabel: Label;
protected healthBar: Rect;
//exp label //exp label
protected expLabel : Label; protected expLabel : Label;
protected expBar: Rect;
//shield label //shield label
protected shieldLabel : Label; protected shieldLabel : Label;
protected shieldBar: Rect;
//seed UI //seed UI
protected seedLabel: Label; protected seedLabel: Label;
@ -333,14 +336,32 @@ export default class GameLevel extends Scene {
//update health UI //update health UI
let playerAI = (<PlayerController>this.player.ai); let playerAI = (<PlayerController>this.player.ai);
this.healthLabel.text = "Health: "+ playerAI.CURRENT_HP +'/' + (playerAI.MAX_HP +playerAI.CURRENT_BUFFS.hp ); this.healthLabel.text = "Health: "+ playerAI.CURRENT_HP +'/' + (playerAI.MAX_HP +playerAI.CURRENT_BUFFS.hp );
this.healthBar.size.set(playerAI.MAX_HP*2, 10);
this.healthBar.position.set(playerAI.MAX_HP+50, 20);
this.healthBar.fillWidth = playerAI.CURRENT_HP*2;
if (playerAI.CURRENT_HP/playerAI.MAX_HP >= 2/3) {
this.healthBar.color = Color.GREEN;
this.healthLabel.textColor = Color.GREEN;
}
else if (playerAI.CURRENT_HP/playerAI.MAX_HP >= 1/3) {
this.healthBar.color = Color.YELLOW;
this.healthLabel.textColor = Color.YELLOW;
}
else {
this.healthBar.color = Color.RED;
this.healthLabel.textColor = Color.RED;
}
// this.healthLabel.sizeToText(); // this.healthLabel.sizeToText();
//update shield ui //update shield ui
this.shieldLabel.text = "Shield: "+ playerAI.CURRENT_SHIELD +'/' + (playerAI.MAX_SHIELD); this.shieldLabel.text = "Shield: "+ playerAI.CURRENT_SHIELD +'/' + (playerAI.MAX_SHIELD);
this.shieldBar.size.set(playerAI.CURRENT_SHIELD*2, 10);
this.shieldBar.position.set(playerAI.CURRENT_SHIELD+50, 60);
// this.shieldLabel.sizeToText(); // this.shieldLabel.sizeToText();
//update exp ui //update exp ui
this.expLabel.text = "EXP: "+ playerAI.CURRENT_EXP +'/' + (playerAI.MAX_EXP); this.expLabel.text = "EXP: "+ playerAI.CURRENT_EXP +'/' + (playerAI.MAX_EXP);
this.expBar.fillWidth = (playerAI.CURRENT_EXP/playerAI.MAX_EXP)*200;
// this.expLabel.sizeToText(); // this.expLabel.sizeToText();
@ -448,23 +469,35 @@ export default class GameLevel extends Scene {
*/ */
protected addUI(){ protected addUI(){
// In-game labels // In-game labels
this.healthLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 30), text: "Player Health: "+ (<PlayerController>this.player.ai).CURRENT_HP }); this.healthLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 40), text: "Player Health: "+ (<PlayerController>this.player.ai).CURRENT_HP });
this.healthLabel.size.set(200, 50); this.healthLabel.size.set(200, 50);
this.healthLabel.setHAlign(HAlign.LEFT); this.healthLabel.setHAlign(HAlign.LEFT);
this.healthLabel.textColor = Color.WHITE; this.healthLabel.textColor = Color.GREEN;
this.healthLabel.font = "PixelSimple"; this.healthLabel.font = "PixelSimple";
this.healthBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(100+150, 20), size: new Vec2(400, 10)});
this.healthBar.borderColor = Color.BLACK;
this.healthBar.borderWidth = 3;
this.healthBar.color = Color.GREEN;
this.shieldLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 50), text: "shield: "+ (<PlayerController>this.player.ai).CURRENT_SHIELD }); this.shieldLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 80), text: "shield: "+ (<PlayerController>this.player.ai).CURRENT_SHIELD });
this.shieldLabel.size.set(200, 50); this.shieldLabel.size.set(200, 50);
this.shieldLabel.setHAlign(HAlign.LEFT); this.shieldLabel.setHAlign(HAlign.LEFT);
this.shieldLabel.textColor = Color.WHITE; this.shieldLabel.textColor = Color.ORANGE;
this.shieldLabel.font = "PixelSimple"; this.shieldLabel.font = "PixelSimple";
this.shieldBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(100+150, 60), size: new Vec2(400, 10)});
this.shieldBar.borderColor = Color.BLACK;
this.shieldBar.borderWidth = 3;
this.shieldBar.color = Color.ORANGE;
this.expLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 70), text: "EXP: "+ (<PlayerController>this.player.ai).CURRENT_EXP }); this.expLabel = <Label> this.add.uiElement(UIElementType.LABEL, "UI",{position: new Vec2(100, 120), text: "EXP: "+ (<PlayerController>this.player.ai).CURRENT_EXP });
this.expLabel.size.set(200, 50); this.expLabel.size.set(200, 50);
this.expLabel.setHAlign(HAlign.LEFT); this.expLabel.setHAlign(HAlign.LEFT);
this.expLabel.textColor = Color.WHITE; this.expLabel.textColor = Color.BLUE;
this.expLabel.font = "PixelSimple"; this.expLabel.font = "PixelSimple";
this.expBar = <Rect>this.add.graphic(GraphicType.RECT, "UI", {position: new Vec2(150, 100), size: new Vec2(200, 10)});
this.expBar.borderColor = Color.BLACK;
this.expBar.borderWidth = 3;
this.expBar.color = Color.BLUE;