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

fix: change line in text label and avoid reloading same resource

Browse Source
This commit is contained in:
Renge 2022-04-06 14:22:51 -04:00
parent c62bd6b209
commit ada01b6b8d
4 changed files with 114 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dist/shattered_sword_assets/jsons/samplestory.json vendored
View File

@ -44,7 +44,7 @@
] ]
}, },
{ {
"speaker": "world", "speaker": "",
"content": "this should hide the image", "content": "this should hide the image",
"actions": [ "actions": [
{ {
@ -54,7 +54,7 @@
] ]
}, },
{ {
"speaker": "world", "speaker": "",
"content": "this should show it again", "content": "this should show it again",
"actions": [ "actions": [
{ {

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
// 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;
} }
} }

6
src/Wolfie2D/ResourceManager/ResourceManager.ts
View File

@ -198,9 +198,9 @@ export default class ResourceManager {
*/ */
public getImage(key: string): HTMLImageElement { public getImage(key: string): HTMLImageElement {
let image = this.images.get(key); let image = this.images.get(key);
if (image === undefined) { // if (image === undefined) {
throw `There is no image associated with key "${key}"` // throw `There is no image associated with key "${key}"`
} // }
return image; return image;
} }

35
src/shattered_sword/Scenes/SceneWithStory.ts
View File

@ -41,6 +41,8 @@ export default class SceneWithStory extends Scene {
loadStory.borderColor = Color.WHITE; loadStory.borderColor = Color.WHITE;
loadStory.backgroundColor = Color.TRANSPARENT; loadStory.backgroundColor = Color.TRANSPARENT;
loadStory.onClickEventId = "loadStory"; loadStory.onClickEventId = "loadStory";
this.storyLayer = this.addUILayer("story");
this.storyLayer.disable();
this.receiver.subscribe("loadStory"); this.receiver.subscribe("loadStory");
@ -53,9 +55,12 @@ export default class SceneWithStory extends Scene {
* @param storyPath The path to the story JSON * @param storyPath The path to the story JSON
*/ */
async storyLoader(storyPath: string) { async storyLoader(storyPath: string) {
this.storyLayer = this.addUILayer("story"); // I may want to load multiple stories in a single scene, but this
// Layer with name story already exists
// so can i detect whether this layer exists?
const response = await (await fetch(storyPath)).json(); const response = await (await fetch(storyPath)).json();
this.story = <Story>response; this.story = <Story>response;
console.log("story:", this.story);
if (this.story.bgm) { if (this.story.bgm) {
this.storyBGMs = new Array; this.storyBGMs = new Array;
this.story.bgm.forEach((bgm) => { this.story.bgm.forEach((bgm) => {
@ -65,15 +70,21 @@ export default class SceneWithStory extends Scene {
// console.log("finished loading audio"); // console.log("finished loading audio");
// this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true }); // this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true });
// }); // });
this.load.singleAudio(bgm.key, bgm.path, () => {
if (this.load.getAudio(bgm.key)) {
this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true }); this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true });
}) }
else {
this.load.singleAudio(bgm.key, bgm.path, () => {
this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true });
})
}
this.storyBGMs.push(bgm.key); this.storyBGMs.push(bgm.key);
}) })
} }
this.currentSpeaker = this.story.texts[0].speaker; this.currentSpeaker = this.story.texts[0].speaker;
this.currentContent = this.story.texts[0].content; this.currentContent = this.story.texts[0].content;
this.storyLayer.enable();
this.storytextLabel = <Label>this.add.uiElement(UIElementType.LABEL, "story", { position: new Vec2(this.viewport.getHalfSize().x, this.viewport.getHalfSize().y + 240), text: "" }); this.storytextLabel = <Label>this.add.uiElement(UIElementType.LABEL, "story", { position: new Vec2(this.viewport.getHalfSize().x, this.viewport.getHalfSize().y + 240), text: "" });
this.storytextLabel.textColor = Color.WHITE; this.storytextLabel.textColor = Color.WHITE;
this.storytextLabel.font = "PixelSimple"; this.storytextLabel.font = "PixelSimple";
@ -110,12 +121,20 @@ export default class SceneWithStory extends Scene {
// tmp.scale.set(action.scale[0], action.scale[1]); // tmp.scale.set(action.scale[0], action.scale[1]);
// this.storySprites.push(tmp); // this.storySprites.push(tmp);
// }); // });
this.load.singleImage(action.key, action.path, () => { if (this.load.getImage(action.key)) {
tmp = this.add.sprite(action.key, "story"); tmp = this.add.sprite(action.key, "story");
tmp.position.set(action.positon[0], action.positon[1]); tmp.position.set(action.positon[0], action.positon[1]);
tmp.scale.set(action.scale[0], action.scale[1]); tmp.scale.set(action.scale[0], action.scale[1]);
this.storySprites.push(tmp); this.storySprites.push(tmp);
}) }
else {
this.load.singleImage(action.key, action.path, () => {
tmp = this.add.sprite(action.key, "story");
tmp.position.set(action.positon[0], action.positon[1]);
tmp.scale.set(action.scale[0], action.scale[1]);
this.storySprites.push(tmp);
})
}
break; break;
case "loadAnimatedSprite": case "loadAnimatedSprite":
this.load.spritesheet(action.key, action.path); this.load.spritesheet(action.key, action.path);
@ -152,7 +171,7 @@ export default class SceneWithStory extends Scene {
} }
this.currentSpeaker = this.story.texts[this.storyProgress].speaker; this.currentSpeaker = this.story.texts[this.storyProgress].speaker;
this.currentContent = this.story.texts[this.storyProgress].content; this.currentContent = this.story.texts[this.storyProgress].content;
this.storytextLabel.text = this.currentSpeaker + ':\n\n' + this.currentContent; this.storytextLabel.text = this.currentSpeaker?(this.currentSpeaker+":"):"" + '\n' + this.currentContent;
} }
else { else {
this.currentMode = Mode.GAME_MODE; this.currentMode = Mode.GAME_MODE;
@ -175,7 +194,7 @@ export default class SceneWithStory extends Scene {
this.storySprites = undefined; this.storySprites = undefined;
this.story = undefined; this.story = undefined;
this.storytextLabel = undefined; this.storytextLabel = undefined;
this.storyLayer = undefined; // this.storyLayer = undefined;
} }
} }