brianfertig
/
LegendsOfCoyoteGulch
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Add Cutscene1 scene and update menu transition with fade effects 

- 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
This commit is contained in:
Brian Fertig 2025-08-14 20:28:13 -06:00
parent 238df24684
commit 7411ae3a27
6 changed files with 220 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
raw/Tile-Project-Legends.tiled-session
View File

@ -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,
"y": 1600
"x": 3302,
"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,

BIN
raw/quantum-tiles.psd Normal file
View File

Binary file not shown.

2
src/main.js
View File

@ -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,

150
src/scenes/Cutscene1.js Normal file
View File

@ -0,0 +1,150 @@
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');
}
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);
// 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();
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 have to rescue him!",800,800);
}
});
});
}
})
});
}
});
});
}
});
}
});
}
// 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) {
}
}

25
src/scenes/MenuScene.js
View File

@ -176,8 +176,29 @@ export class MenuScene extends Phaser.Scene {
// Add keyboard input
this.input.keyboard.on('keydown-SPACE', () => {
this.bgMusic.stop();
this.scene.start('Gulch');
// 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('Cutscene1');
}
});
}
});
});
}
}

0
src/scenes/introCutscene.js
View File