From f58333aaaae73c05cd95a64b87d1e6918c3633a5 Mon Sep 17 00:00:00 2001 From: OfficialCHenry Date: Thu, 14 Apr 2022 09:55:39 -0400 Subject: [PATCH] reverted UIElementRenderer --- .../CanvasRendering/UIElementRenderer.ts | 116 +++++++++++++----- src/shattered_sword/Scenes/GameLevel.ts | 9 +- 2 files changed, 89 insertions(+), 36 deletions(-) diff --git a/src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts b/src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts index 56c872e..503910e 100644 --- a/src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts +++ b/src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts @@ -15,7 +15,7 @@ export default class UIElementRenderer { protected scene: Scene; protected ctx: CanvasRenderingContext2D; - constructor(ctx: CanvasRenderingContext2D){ + constructor(ctx: CanvasRenderingContext2D) { this.resourceManager = ResourceManager.getInstance(); this.ctx = ctx; } @@ -33,33 +33,81 @@ export default class UIElementRenderer { * @param label The label to render */ renderLabel(label: Label): void { + // // If the size is unassigned (by the user or automatically) assign it + // label.handleInitialSizing(this.ctx); + + // // Grab the global alpha so we can adjust it for this render + // let previousAlpha = this.ctx.globalAlpha; + + // // Get the font and text position in label + // this.ctx.font = label.getFontString(); + // let offset = label.calculateTextOffset(this.ctx); + + // // Stroke and fill a rounded rect and give it text + // this.ctx.globalAlpha = label.backgroundColor.a; + // this.ctx.fillStyle = label.calculateBackgroundColor().toStringRGBA(); + // this.ctx.fillRoundedRect(-label.size.x/2, -label.size.y/2, + // label.size.x, label.size.y, label.borderRadius); + + // this.ctx.strokeStyle = label.calculateBorderColor().toStringRGBA(); + // this.ctx.globalAlpha = label.borderColor.a; + // this.ctx.lineWidth = label.borderWidth; + // this.ctx.strokeRoundedRect(-label.size.x/2, -label.size.y/2, + // label.size.x, label.size.y, label.borderRadius); + + // this.ctx.fillStyle = label.calculateTextColor(); + // this.ctx.globalAlpha = label.textColor.a; + // this.ctx.fillText(label.text, offset.x - label.size.x/2, offset.y - label.size.y/2); + + // this.ctx.globalAlpha = previousAlpha; // If the size is unassigned (by the user or automatically) assign it + let lines = label.text.split('\n'); + let tempText = label.text; + if (lines.length > 1) { + let max = 0; + let maxLengthIndex = 0; + for (let i = 0; i < lines.length; i++) { + if (lines[i].length > max) { + max = lines[i].length; + maxLengthIndex = i; + } + } + label.text = lines[maxLengthIndex]; + } label.handleInitialSizing(this.ctx); - - // Grab the global alpha so we can adjust it for this render - let previousAlpha = this.ctx.globalAlpha; + // Grab the global alpha so we can adjust it for this render + let previousAlpha = this.ctx.globalAlpha; // Get the font and text position in label - this.ctx.font = label.getFontString(); - let offset = label.calculateTextOffset(this.ctx); + this.ctx.font = label.getFontString(); + let offset = label.calculateTextOffset(this.ctx); - // Stroke and fill a rounded rect and give it text - this.ctx.globalAlpha = label.backgroundColor.a; - this.ctx.fillStyle = label.calculateBackgroundColor().toStringRGBA(); - this.ctx.fillRoundedRect(-label.size.x/2, -label.size.y/2, - label.size.x, label.size.y, label.borderRadius); - - this.ctx.strokeStyle = label.calculateBorderColor().toStringRGBA(); - this.ctx.globalAlpha = label.borderColor.a; - this.ctx.lineWidth = label.borderWidth; - this.ctx.strokeRoundedRect(-label.size.x/2, -label.size.y/2, - label.size.x, label.size.y, label.borderRadius); + // Stroke and fill a rounded rect and give it text + this.ctx.globalAlpha = label.backgroundColor.a; + this.ctx.fillStyle = label.calculateBackgroundColor().toStringRGBA(); + this.ctx.fillRoundedRect(-label.size.x / 2, -label.size.y / 2, + label.size.x, label.size.y, label.borderRadius); - this.ctx.fillStyle = label.calculateTextColor(); - this.ctx.globalAlpha = label.textColor.a; - this.ctx.fillText(label.text, offset.x - label.size.x/2, offset.y - label.size.y/2); - - this.ctx.globalAlpha = previousAlpha; + this.ctx.strokeStyle = label.calculateBorderColor().toStringRGBA(); + this.ctx.globalAlpha = label.borderColor.a; + this.ctx.lineWidth = label.borderWidth; + this.ctx.strokeRoundedRect(-label.size.x / 2, -label.size.y / 2, + label.size.x, label.size.y + ((lines.length - 1) * label.fontSize), label.borderRadius); + + this.ctx.fillStyle = label.calculateTextColor(); + this.ctx.globalAlpha = label.textColor.a; + if (lines.length === 1) { + this.ctx.fillText(label.text, offset.x - label.size.x / 2, (offset.y - label.size.y / 2)); + } else { + for (let i = 0; i < lines.length; i++) { + let additionalY = i * (label.size.y / 2 + (label.fontSize === 40 ? 20 : 10)); + label.text = lines[i]; + offset = label.calculateTextOffset(this.ctx); + this.ctx.fillText(lines[i], (offset.x - label.size.x / 2), (offset.y - label.size.y / 2 + additionalY)); + } + } + this.ctx.globalAlpha = previousAlpha; + label.text = tempText; } /** @@ -75,24 +123,24 @@ export default class UIElementRenderer { * @param slider The slider to render */ renderSlider(slider: Slider): void { - // Grab the global alpha so we can adjust it for this render - let previousAlpha = this.ctx.globalAlpha; - this.ctx.globalAlpha = slider.getLayer().getAlpha(); + // Grab the global alpha so we can adjust it for this render + let previousAlpha = this.ctx.globalAlpha; + this.ctx.globalAlpha = slider.getLayer().getAlpha(); // Calcualate the slider size let sliderSize = new Vec2(slider.size.x, 2); // Draw the slider - this.ctx.fillStyle = slider.sliderColor.toString(); - this.ctx.fillRoundedRect(-sliderSize.x/2, -sliderSize.y/2, + this.ctx.fillStyle = slider.sliderColor.toString(); + this.ctx.fillRoundedRect(-sliderSize.x / 2, -sliderSize.y / 2, sliderSize.x, sliderSize.y, slider.borderRadius); // Calculate the nib size and position - let x = MathUtils.lerp(-slider.size.x/2, slider.size.x/2, slider.getValue()); + let x = MathUtils.lerp(-slider.size.x / 2, slider.size.x / 2, slider.getValue()); // Draw the nib - this.ctx.fillStyle = slider.nibColor.toString(); - this.ctx.fillRoundedRect(x-slider.nibSize.x/2, -slider.nibSize.y/2, + this.ctx.fillStyle = slider.nibColor.toString(); + this.ctx.fillRoundedRect(x - slider.nibSize.x / 2, -slider.nibSize.y / 2, slider.nibSize.x, slider.nibSize.y, slider.borderRadius); // Reset the alpha @@ -105,19 +153,19 @@ export default class UIElementRenderer { */ renderTextInput(textInput: TextInput): void { // Show a cursor sometimes - if(textInput.focused && textInput.cursorCounter % 60 > 30){ + if (textInput.focused && textInput.cursorCounter % 60 > 30) { textInput.text += "|"; } this.renderLabel(textInput); - if(textInput.focused){ - if(textInput.cursorCounter % 60 > 30){ + if (textInput.focused) { + if (textInput.cursorCounter % 60 > 30) { textInput.text = textInput.text.substring(0, textInput.text.length - 1); } textInput.cursorCounter += 1; - if(textInput.cursorCounter >= 60){ + if (textInput.cursorCounter >= 60) { textInput.cursorCounter = 0; } } diff --git a/src/shattered_sword/Scenes/GameLevel.ts b/src/shattered_sword/Scenes/GameLevel.ts index 17b6014..23b6246 100644 --- a/src/shattered_sword/Scenes/GameLevel.ts +++ b/src/shattered_sword/Scenes/GameLevel.ts @@ -495,6 +495,9 @@ export default class GameLevel extends Scene { //enemy.position.set(tilePos.x*32, tilePos.y*32); enemy.position.copy(tilePos); enemy.scale.set(2, 2); + //TODO - add custom collision shape for each enemy in an option variable + //enemy.addPhysics(aiOptions.size.clone()); + enemy.addPhysics(new AABB(Vec2.ZERO, new Vec2(16, 25))); enemy.colliderOffset.set(0, 6); enemy.addAI(EnemyAI, aiOptions); //TODO - add individual enemy AI @@ -517,9 +520,11 @@ export default class GameLevel extends Scene { tilemap: "Main", //actions:actions, goal: Statuses.REACHED_GOAL, + //TODO - test Add collision shape for each enemy type + //size: new AABB(Vec2.ZERO, new Vec2(16, 25)) }) break; - case "snake": + case "snake": //snake enemies drop from sky("trees")? or could just be very abundant this.addEnemy("snake", enemy.position.scale(32), { player: this.player, health: 100, @@ -528,7 +533,7 @@ export default class GameLevel extends Scene { goal: Statuses.REACHED_GOAL, }) break; - case "tiger": + case "tiger": //tiger can be miniboss for now? this.addEnemy("tiger", enemy.position.scale(32), { player: this.player, health: 100,