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

dist/shattered_sword_assets/jsons/samplestory.json

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

src/Wolfie2D/Rendering/CanvasRendering/UIElementRenderer.ts

@@ -33,9 +33,48 @@ 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
+        // // 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
+        // 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;
 
@@ -53,13 +92,22 @@ export default class UIElementRenderer {
         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);
+            label.size.x, label.size.y + ((lines.length - 1) * label.fontSize), 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);
+        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;
     }
 
     /**

src/Wolfie2D/ResourceManager/ResourceManager.ts

@@ -198,9 +198,9 @@ export default class ResourceManager {
      */
     public getImage(key: string): HTMLImageElement {
         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;
     }
 

src/shattered_sword/Scenes/SceneWithStory.ts

@@ -41,6 +41,8 @@ export default class SceneWithStory extends Scene {
         loadStory.borderColor = Color.WHITE;
         loadStory.backgroundColor = Color.TRANSPARENT;
         loadStory.onClickEventId = "loadStory";
+        this.storyLayer = this.addUILayer("story");
+        this.storyLayer.disable();
 
 
         this.receiver.subscribe("loadStory");
@@ -53,9 +55,12 @@ export default class SceneWithStory extends Scene {
      * @param storyPath The path to the story JSON
      */
     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();
         this.story = <Story>response;
+        console.log("story:", this.story);
         if (this.story.bgm) {
             this.storyBGMs = new Array;
             this.story.bgm.forEach((bgm) => {
@@ -65,15 +70,21 @@ export default class SceneWithStory extends Scene {
                 //     console.log("finished loading audio");
                 //     this.emitter.fireEvent(GameEventType.PLAY_SOUND, { key: bgm.key, loop: false, holdReference: true });
                 // });
+
+                if (this.load.getAudio(bgm.key)) {
+                    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.currentSpeaker = this.story.texts[0].speaker;
         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.textColor = Color.WHITE;
         this.storytextLabel.font = "PixelSimple";
@@ -110,12 +121,20 @@ export default class SceneWithStory extends Scene {
                             //     tmp.scale.set(action.scale[0], action.scale[1]);
                             //     this.storySprites.push(tmp);
                             // });
+                            if (this.load.getImage(action.key)) {
+                                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);
+                            }
+                            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;
                         case "loadAnimatedSprite":
                             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.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 {
             this.currentMode = Mode.GAME_MODE;
@@ -175,7 +194,7 @@ export default class SceneWithStory extends Scene {
             this.storySprites = undefined;
             this.story = undefined;
             this.storytextLabel = undefined;
-            this.storyLayer = undefined;
+            // this.storyLayer = undefined;
         }
     }