renge/ShatteredSword
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

reverted UIElementRenderer

Browse Source
This commit is contained in:
OfficialCHenry 2022-04-14 09:55:39 -04:00
parent 928027f1f5
commit f58333aaaa
2 changed files with 89 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts
View File

@ -15,7 +15,7 @@ export default class UIElementRenderer {
protected scene: Scene; protected scene: Scene;
protected ctx: CanvasRenderingContext2D; protected ctx: CanvasRenderingContext2D;
constructor(ctx: CanvasRenderingContext2D){ constructor(ctx: CanvasRenderingContext2D) {
this.resourceManager = ResourceManager.getInstance(); this.resourceManager = ResourceManager.getInstance();
this.ctx = ctx; this.ctx = ctx;
} }
@ -33,33 +33,81 @@ export default class UIElementRenderer {
* @param label The label to render * @param label The label to render
*/ */
renderLabel(label: Label): void { renderLabel(label: Label): void {
// If the size is unassigned (by the user or automatically) assign it // // If the size is unassigned (by the user or automatically) assign it
label.handleInitialSizing(this.ctx); // label.handleInitialSizing(this.ctx);
// Grab the global alpha so we can adjust it for this render // // Grab the global alpha so we can adjust it for this render
let previousAlpha = this.ctx.globalAlpha; // 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;
// Get the font and text position in label // Get the font and text position in label
this.ctx.font = label.getFontString(); this.ctx.font = label.getFontString();
let offset = label.calculateTextOffset(this.ctx); let offset = label.calculateTextOffset(this.ctx);
// Stroke and fill a rounded rect and give it text // Stroke and fill a rounded rect and give it text
this.ctx.globalAlpha = label.backgroundColor.a; this.ctx.globalAlpha = label.backgroundColor.a;
this.ctx.fillStyle = label.calculateBackgroundColor().toStringRGBA(); this.ctx.fillStyle = label.calculateBackgroundColor().toStringRGBA();
this.ctx.fillRoundedRect(-label.size.x/2, -label.size.y/2, this.ctx.fillRoundedRect(-label.size.x / 2, -label.size.y / 2,
label.size.x, label.size.y, label.borderRadius); label.size.x, label.size.y, label.borderRadius);
this.ctx.strokeStyle = label.calculateBorderColor().toStringRGBA(); this.ctx.strokeStyle = label.calculateBorderColor().toStringRGBA();
this.ctx.globalAlpha = label.borderColor.a; this.ctx.globalAlpha = label.borderColor.a;
this.ctx.lineWidth = label.borderWidth; this.ctx.lineWidth = label.borderWidth;
this.ctx.strokeRoundedRect(-label.size.x/2, -label.size.y/2, this.ctx.strokeRoundedRect(-label.size.x / 2, -label.size.y / 2,
label.size.x, label.size.y, label.borderRadius); label.size.x, label.size.y + ((lines.length - 1) * label.fontSize), label.borderRadius);
this.ctx.fillStyle = label.calculateTextColor(); this.ctx.fillStyle = label.calculateTextColor();
this.ctx.globalAlpha = label.textColor.a; this.ctx.globalAlpha = label.textColor.a;
this.ctx.fillText(label.text, offset.x - label.size.x/2, offset.y - label.size.y/2); if (lines.length === 1) {
this.ctx.fillText(label.text, offset.x - label.size.x / 2, (offset.y - label.size.y / 2));
this.ctx.globalAlpha = previousAlpha; } 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 * @param slider The slider to render
*/ */
renderSlider(slider: Slider): void { renderSlider(slider: Slider): void {
// Grab the global alpha so we can adjust it for this render // Grab the global alpha so we can adjust it for this render
let previousAlpha = this.ctx.globalAlpha; let previousAlpha = this.ctx.globalAlpha;
this.ctx.globalAlpha = slider.getLayer().getAlpha(); this.ctx.globalAlpha = slider.getLayer().getAlpha();
// Calcualate the slider size // Calcualate the slider size
let sliderSize = new Vec2(slider.size.x, 2); let sliderSize = new Vec2(slider.size.x, 2);
// Draw the slider // Draw the slider
this.ctx.fillStyle = slider.sliderColor.toString(); this.ctx.fillStyle = slider.sliderColor.toString();
this.ctx.fillRoundedRect(-sliderSize.x/2, -sliderSize.y/2, this.ctx.fillRoundedRect(-sliderSize.x / 2, -sliderSize.y / 2,
sliderSize.x, sliderSize.y, slider.borderRadius); sliderSize.x, sliderSize.y, slider.borderRadius);
// Calculate the nib size and position // 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 // Draw the nib
this.ctx.fillStyle = slider.nibColor.toString(); this.ctx.fillStyle = slider.nibColor.toString();
this.ctx.fillRoundedRect(x-slider.nibSize.x/2, -slider.nibSize.y/2, this.ctx.fillRoundedRect(x - slider.nibSize.x / 2, -slider.nibSize.y / 2,
slider.nibSize.x, slider.nibSize.y, slider.borderRadius); slider.nibSize.x, slider.nibSize.y, slider.borderRadius);
// Reset the alpha // Reset the alpha
@ -105,19 +153,19 @@ export default class UIElementRenderer {
*/ */
renderTextInput(textInput: TextInput): void { renderTextInput(textInput: TextInput): void {
// Show a cursor sometimes // Show a cursor sometimes
if(textInput.focused && textInput.cursorCounter % 60 > 30){ if (textInput.focused && textInput.cursorCounter % 60 > 30) {
textInput.text += "|"; textInput.text += "|";
} }
this.renderLabel(textInput); this.renderLabel(textInput);
if(textInput.focused){ if (textInput.focused) {
if(textInput.cursorCounter % 60 > 30){ if (textInput.cursorCounter % 60 > 30) {
textInput.text = textInput.text.substring(0, textInput.text.length - 1); textInput.text = textInput.text.substring(0, textInput.text.length - 1);
} }
textInput.cursorCounter += 1; textInput.cursorCounter += 1;
if(textInput.cursorCounter >= 60){ if (textInput.cursorCounter >= 60) {
textInput.cursorCounter = 0; textInput.cursorCounter = 0;
} }
} }

9
src/shattered_sword/Scenes/GameLevel.ts
View File

@ -495,6 +495,9 @@ export default class GameLevel extends Scene {
//enemy.position.set(tilePos.x*32, tilePos.y*32); //enemy.position.set(tilePos.x*32, tilePos.y*32);
enemy.position.copy(tilePos); enemy.position.copy(tilePos);
enemy.scale.set(2, 2); 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.addPhysics(new AABB(Vec2.ZERO, new Vec2(16, 25)));
enemy.colliderOffset.set(0, 6); enemy.colliderOffset.set(0, 6);
enemy.addAI(EnemyAI, aiOptions); //TODO - add individual enemy AI enemy.addAI(EnemyAI, aiOptions); //TODO - add individual enemy AI
@ -517,9 +520,11 @@ export default class GameLevel extends Scene {
tilemap: "Main", tilemap: "Main",
//actions:actions, //actions:actions,
goal: Statuses.REACHED_GOAL, goal: Statuses.REACHED_GOAL,
//TODO - test Add collision shape for each enemy type
//size: new AABB(Vec2.ZERO, new Vec2(16, 25))
}) })
break; break;
case "snake": case "snake": //snake enemies drop from sky("trees")? or could just be very abundant
this.addEnemy("snake", enemy.position.scale(32), { this.addEnemy("snake", enemy.position.scale(32), {
player: this.player, player: this.player,
health: 100, health: 100,
@ -528,7 +533,7 @@ export default class GameLevel extends Scene {
goal: Statuses.REACHED_GOAL, goal: Statuses.REACHED_GOAL,
}) })
break; break;
case "tiger": case "tiger": //tiger can be miniboss for now?
this.addEnemy("tiger", enemy.position.scale(32), { this.addEnemy("tiger", enemy.position.scale(32), {
player: this.player, player: this.player,
health: 100, health: 100,