Added Cutscene 1

- Added new Cutscene1 scene implementation
- Modified MenuScene to include fade-out music and camera effects before transitioning to Cutscene1
- Updated project configuration to reference new level files (level2-tropical.tmx, level3-winter.tmx)
- Reordered scene loading sequence in main.js
- Adjusted file states and view centers for multiple TMX files in the session

raw/Tile-Project-Legends.tiled-session

@@ -3,9 +3,8 @@
         "height": 4300,
         "width": 2
     },
-    "activeFile": "proedge.tmx",
+    "activeFile": "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx",
     "expandedProjectPaths": [
-        "."
     ],
     "file.lastUsedOpenFilter": "All Files (*)",
     "fileStates": {
@@ -13,11 +12,42 @@
             "scaleInDock": 1,
             "scaleInEditor": 1
         },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level2-tropical.tmx": {
+            "scale": 0.12362837837837838,
+            "selectedLayer": 0,
+            "viewCenter": {
+                "x": 3700.606656828989,
+                "y": 857.4083183035468
+            }
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level2-tropical.tmx#cave-tiles": {
+            "scaleInDock": 1
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level2-tropical.tmx#tropical-tiles": {
+            "scaleInDock": 1
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx": {
+            "scale": 0.33,
+            "selectedLayer": 0,
+            "viewCenter": {
+                "x": 5653.030303030303,
+                "y": 2693.939393939394
+            }
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx#cave-tiles": {
+            "scaleInDock": 1
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx#tropical-tiles": {
+            "scaleInDock": 1
+        },
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx#winter-tiles": {
+            "scaleInDock": 1
+        },
         "NNDungeon.tmx": {
             "expandedObjectLayers": [
-                5,
                 4,
-                3
+                3,
+                5
             ],
             "scale": 0.5,
             "selectedLayer": 2,
@@ -66,14 +96,14 @@
         },
         "proedge.tmx": {
             "expandedObjectLayers": [
-                5,
+                3,
-                3
+                5
             ],
             "scale": 0.25,
             "selectedLayer": 1,
             "viewCenter": {
-                "x": 2102,
+                "x": 3302,
-                "y": 1600
+                "y": 2220
             }
         },
         "proedge.tmx#boss-tiles": {
@@ -100,14 +130,18 @@
     "openFiles": [
         "proedge.tmx",
         "NNDungeon.tmx",
-        "gulch.tmx"
+        "gulch.tmx",
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx",
+        "C:/Git/BurliMonsterWorld/assets/source-images/level2-tropical.tmx"
     ],
     "project": "Tile-Project-Legends.tiled-project",
     "property.type": "bool",
     "recentFiles": [
-        "gulch.tmx",
-        "NNDungeon.tmx",
         "proedge.tmx",
+        "NNDungeon.tmx",
+        "gulch.tmx",
+        "C:/Git/BurliMonsterWorld/assets/source-images/level2-tropical.tmx",
+        "C:/Git/BurliMonsterWorld/assets/source-images/level3-winter.tmx",
         "gluch.tmx"
     ],
     "tileset.embedInMap": true,

src/main.js

@@ -1,4 +1,5 @@
 import { MenuScene } from './scenes/MenuScene.js';
+import { Cutscene1 } from './scenes/Cutscene1.js';
 import { Gulch } from './scenes/gulch.js';
 import { NNDungeon } from './scenes/NNDungeon.js';
 import { GlobalState } from './globalState.js';
@@ -24,6 +25,7 @@ const config = {
     backgroundColor: '#000000',
     scene: [
         MenuScene,
+        Cutscene1,
         Gulch,
         NNDungeon,
         ProEdge,

src/scenes/Cutscene1.js

@@ -0,0 +1,210 @@
+export class Cutscene1 extends Phaser.Scene {
+    constructor() {
+        super({ key: 'Cutscene1' });
+    }
+
+    preload() {
+        this.load.image('saloon-background', 'assets/Cutscene/saloon-background.png');
+        this.load.image('emily-paper-1', 'assets/Cutscene/emily-paper-1.png');
+        this.load.image('emily-paper-2', 'assets/Cutscene/emily-paper-2.png');
+        this.load.image('luke-worried', 'assets/Cutscene/luke-worried.png');
+        this.load.image('luke-wanted', 'assets/Cutscene/luke-wanted.png');
+        this.load.image('ransom', 'assets/Cutscene/ransom.png');
+
+        this.load.audio('cutscene-1', 'assets/music/cutscene-1.mp3');
+    }
+
+    create() {
+        // Add background image
+        const background = this.add.image(0, 0, 'saloon-background').setOrigin(0, 0);
+        background.scaleX = this.scale.width / background.width;
+        background.scaleY = this.scale.height / background.height;
+        background.setScrollFactor(0);
+
+        // Background Music
+        this.bgMusic = this.sound.add('cutscene-1', { volume: 0.5 });
+        this.bgMusic.loop = true;
+        this.bgMusic.play();
+
+        // Fade in camera
+        this.cameras.main.fadeIn(1000, 0, 0, 0);
+
+        // Caption Box   
+        const caption = this.add.rectangle(
+            800,
+            800,
+            1400,
+            100,
+            0xFFFFFF,
+            .6
+        ).setOrigin(0.5);
+
+        // Typewriter effect function
+        const cap1 = this.typewriterEffect("It was a day like any other in Coyote Gulch...", 800, 800);
+
+        // Destroy the text box after 5 seconds
+        this.time.delayedCall(4000, () => {
+            if (cap1 && !cap1.destroyed) {
+                cap1.destroy();
+                const emily1 = this.add.image(
+                    500,
+                    400,
+                    'emily-paper-1',
+                ).setOrigin(0.5).setScale(0.2).setAngle(-5);
+                emily1.postFX.addGlow();     
+                this.tweens.add({
+                    targets: emily1,
+                    scale: 0.5,
+                    angle: -10,
+                    duration: 1000,
+                    onComplete: () => {
+                        const cap2 = this.typewriterEffect("...Sheriff Emily was enjoying her paper, when...", 800, 800);
+                        this.time.delayedCall(4000, () => {
+                            cap2.destroy();
+                            const luke1 = this.add.image(
+                                1100,
+                                400,
+                                'luke-worried'
+                            ).setOrigin(0.5).setScale(0.2).setAngle(5);
+                            luke1.postFX.addGlow();
+                            this.tweens.add({
+                                targets: luke1,
+                                scale: 0.5,
+                                angle: 10,
+                                duration: 1000,
+                                onComplete: () => {
+                                    const cap3 = this.typewriterEffect('Sheriff Emily, we got us a problem!',800, 800);
+                                    this.time.delayedCall(4000, () => {
+                                        cap3.destroy();
+                                        emily1.destroy();
+                                        const emily2 = this.add.image(
+                                            500,
+                                            400,
+                                            'emily-paper-2'
+                                        ).setOrigin(0.5).setScale(0.5).setAngle(-10);
+                                        emily2.postFX.addGlow();
+                                        this.tweens.add({
+                                            targets: emily2,
+                                            scale: .6,
+                                            duration: 500,
+                                            yoyo: true,
+                                            onComplete: () => {
+                                                const cap4 = this.typewriterEffect('What is it Bootstrap??!!',800,800);
+                                                this.time.delayedCall(4000, () => {
+                                                    cap4.destroy();
+                                                    luke1.destroy();
+                                                    const luke2 = this.add.image(
+                                                        1100,
+                                                        400,
+                                                        'luke-wanted'
+                                                    ).setOrigin(0.5).setScale(0.5).setAngle(10);
+                                                    luke2.postFX.addGlow();
+                                                    this.tweens.add({
+                                                        targets: luke2,
+                                                        scale: .6,
+                                                        duration: 500,
+                                                        yoyo: true,
+                                                        onComplete: () => {
+                                                            const cap5 = this.typewriterEffect("The 99 Boys have Fat Hawk. We gots to rescue him!",800,800);
+                                                            this.time.delayedCall(4000, () => {
+                                                                cap5.destroy();
+                                                                emily2.destroy();
+                                                                luke2.destroy();
+                                                                const ransom = this.add.image(
+                                                                    800,
+                                                                    400,
+                                                                    'ransom'
+                                                                ).setOrigin(0.5).setScale(0.2).setAlpha(0.2);
+                                                                ransom.postFX.addGlow();
+                                                                this.tweens.add({
+                                                                    targets: ransom,
+                                                                    angle: 5,
+                                                                    scale: .5,
+                                                                    alpha: 1,
+                                                                    duration: 500,
+                                                                    onComplete: () => {
+                                                                        const cap6 = this.typewriterEffect("Better head up North East into the Gulch and into their LAIR!!", 800, 800);
+                                                                        this.time.delayedCall(5000, () => {
+                                                                            cap6.destroy();
+                                                                            const cap7 = this.typewriterEffect("Press SPACE to Continue", 800, 800);
+                                                                            // Add keyboard input
+                                                                            this.input.keyboard.on('keydown-SPACE', () => {
+                                                                                // Fade out music
+                                                                                this.tweens.add({
+                                                                                    targets: this.bgMusic,
+                                                                                    volume: 0,
+                                                                                    duration: 1000,
+                                                                                    ease: 'Linear',
+                                                                                    onComplete: () => {
+                                                                                        // Stop the music after fading out
+                                                                                        this.bgMusic.stop();
+                                                                                        
+                                                                                        // Fade out camera
+                                                                                        const fadeOut = this.tweens.add({
+                                                                                            targets: this.cameras.main,
+                                                                                            alpha: 0,
+                                                                                            duration: 1000,
+                                                                                            ease: 'Linear',
+                                                                                            onComplete: () => {
+                                                                                                // Start the next scene after both effects complete
+                                                                                                this.scene.start('Gulch');
+                                                                                            }
+                                                                                        });
+                                                                                    }
+                                                                                });
+                                                                            });
+                                                                        });
+                                                                    }
+                                                                });
+                                                            });
+                                                        }
+                                                    });
+                                                });
+                                            }
+                                        })
+                                    });
+                                }
+                            });
+                        });
+                    }
+                });
+            }
+        });
+    }
+
+    // Reusable typewriter effect function
+    typewriterEffect(text, x, y, delay = 50) {
+        const textBox = this.add.text(
+            x, 
+            y, 
+            '', 
+            { 
+                fontSize: '32px',
+                fontFamily: 'Oldenburg, cursive', 
+                fill: '#000000',
+                align: 'center',
+                wordWrap: { width: 1350, useAdvancedWrap: true }
+            }
+        ).setOrigin(0.5);
+        
+        let i = 0;
+        const typing = this.time.addEvent({
+            delay: delay,
+            callback: () => {
+                if (i < text.length) {
+                    textBox.text += text.charAt(i);
+                    i++;
+                } else {
+                    typing.remove();
+                }
+            },
+            loop: true
+        });
+
+        return textBox;
+    }
+
+    update(time, delta) {
+
+    }
+}

src/scenes/MenuScene.js

@@ -176,8 +176,29 @@ export class MenuScene extends Phaser.Scene {
         
         // Add keyboard input
         this.input.keyboard.on('keydown-SPACE', () => {
+            // Fade out music
+            this.tweens.add({
+                targets: this.bgMusic,
+                volume: 0,
+                duration: 1000,
+                ease: 'Linear',
+                onComplete: () => {
+                    // Stop the music after fading out
                     this.bgMusic.stop();
-            this.scene.start('Gulch');
+                    
+                    // Fade out camera
+                    const fadeOut = this.tweens.add({
+                        targets: this.cameras.main,
+                        alpha: 0,
+                        duration: 1000,
+                        ease: 'Linear',
+                        onComplete: () => {
+                            // Start the next scene after both effects complete
+                            this.scene.start('Cutscene1');
+                        }
+                    });
+                }
+            });
         });
     }
 }