reverted UIElementRenderer
This commit is contained in:
parent
928027f1f5
commit
f58333aaaa
|
@ -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
|
||||||
|
// 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
|
// 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);
|
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
|
// 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.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.strokeStyle = label.calculateBorderColor().toStringRGBA();
|
||||||
this.ctx.globalAlpha = label.textColor.a;
|
this.ctx.globalAlpha = label.borderColor.a;
|
||||||
this.ctx.fillText(label.text, offset.x - label.size.x/2, offset.y - label.size.y/2);
|
this.ctx.lineWidth = label.borderWidth;
|
||||||
|
this.ctx.strokeRoundedRect(-label.size.x / 2, -label.size.y / 2,
|
||||||
this.ctx.globalAlpha = previousAlpha;
|
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
|
* @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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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,
|
||||||
|
|
Loading…
Reference in New Issue
Block a user