Update cutscenes with multiple lines

Chocobois · Aug 20, 2024 · 5cfc9e1 · 5cfc9e1
1 parent 4e9b032
commit 5cfc9e1
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 28 deletions.
diff --git a/src/components/Intermission.ts b/src/components/Intermission.ts
@@ -22,6 +22,7 @@ export class Intermission extends Phaser.GameObjects.Container {
 
 	private rect: Phaser.GameObjects.Rectangle;
 	private subtitles: Phaser.GameObjects.Text;
+	private queuedLines: string[];
 
 	private button: Button;
 
@@ -73,15 +74,18 @@ export class Intermission extends Phaser.GameObjects.Container {
 		this.subtitles.setStroke(ColorStr.White, 16);
 		this.add(this.subtitles);
 
+		this.queuedLines = [];
+
 		/* Button */
 
 		this.button = new TextButton(
 			scene,
 			scene.W - 240,
 			scene.H - 120,
-			300,
+			280,
 			120,
-			"OK"
+			">",
+			130
 		);
 		this.add(this.button);
 		this.button.on("click", this.proceed, this);
@@ -101,53 +105,90 @@ export class Intermission extends Phaser.GameObjects.Container {
 	setMode(mode: Mode) {
 		this.mode = mode;
 
-		// Show or hide elements
-		switch (mode) {
-			case Mode.IntroCutscene1:
-			case Mode.IntroCutscene2:
-			case Mode.IntroCutscene3:
-			case Mode.NextLevelCutscene:
-				this.cutscene.setVisible(true);
-				this.button.setVisible(true);
-				this.subtitles.setVisible(true);
-				break;
-
-			default:
-				this.cutscene.setVisible(false);
-				this.button.setVisible(false);
-				this.subtitles.setVisible(false);
-		}
-
 		// Set content
 		switch (mode) {
 			case Mode.IntroCutscene1:
 				this.cutscene.setTexture("cutscene_dummy1");
-				this.subtitles.setText("Somewhere in Chocoland");
+				this.queuedLines = [
+					"Somewhere in Chocoland",
+					"What a nice day for a walk.",
+					"Nothing can go wrong...",
+				];
 				break;
 
 			case Mode.IntroCutscene2:
 				this.cutscene.setTexture("cutscene_dummy2");
-				this.subtitles.setText("If only my scales weren't so dirty...");
+				this.queuedLines = [
+					"Oh no!",
+					"Not the mud...!",
+				];
 				break;
 
 			case Mode.IntroCutscene3:
 				this.cutscene.setTexture("cutscene_dummy3");
-				this.subtitles.setText("Lets go to the Scale Salon™!");
+				this.queuedLines = [
+					"Are you OK?",
+					"My scales are all dirty.",
+					"Let's get you cleaned up.",
+					"(*gasp* A customer!)",
+				];
 				break;
 
 			case Mode.NextLevelCutscene:
 				this.cutscene.setTexture("cutscene_dummy4");
-				this.subtitles.setText("Wow! A new location!");
+				this.queuedLines = ["Congratulations!", "Wow! A new location."];
 				break;
 
 			case Mode.TheEnd:
-				this.subtitles.setText("The End");
+				this.queuedLines = ["The End"];
+		}
+
+		// Show or hide elements
+		switch (mode) {
+			case Mode.IntroCutscene1:
+			case Mode.IntroCutscene2:
+			case Mode.IntroCutscene3:
+			case Mode.NextLevelCutscene:
+				// Fade in cutscene image
+				this.cutscene.setVisible(true);
+				this.cutscene.setAlpha(0);
+				this.scene.tweens.add({
+					targets: this.cutscene,
+					alpha: { from: 0, to: 1 },
+					duration: 500,
+				});
+
+				this.button.setVisible(false);
+				this.subtitles.setVisible(false);
+				this.scene.addEvent(1000, this.showNextLine, this);
+				break;
+
+			default:
+				this.cutscene.setVisible(false);
+				this.button.setVisible(false);
+				this.subtitles.setVisible(false);
+		}
+	}
+
+	showNextLine() {
+		let line = this.queuedLines.shift();
+		if (line) {
+			this.subtitles.setText(line);
+			this.subtitles.setVisible(true);
+			this.button.setVisible(true);
 		}
 	}
 
 	proceed() {
 		this.scene.sound.play("scroll", { volume: 0.3 });
 
+		if (this.queuedLines.length > 0) {
+			this.button.setVisible(false);
+			this.subtitles.setVisible(false);
+			this.scene.addEvent(500, this.showNextLine, this);
+			return;
+		}
+
 		switch (this.mode) {
 			case Mode.IntroCutscene1:
 				this.setMode(Mode.IntroCutscene2);
@@ -158,7 +199,7 @@ export class Intermission extends Phaser.GameObjects.Container {
 				break;
 
 			case Mode.IntroCutscene3:
-				this.emit("close");
+				this.emit("startDay");
 				break;
 
 			case Mode.NextLevelCutscene:

diff --git a/src/components/TextButton.ts b/src/components/TextButton.ts
@@ -10,7 +10,7 @@ export class TextButton extends Button {
 	private background: RoundRectangle;
 	private text: Phaser.GameObjects.Text;
 
-	constructor(scene: GameScene, x: number, y: number, width: number, height: number, text: string) {
+	constructor(scene: GameScene, x: number, y: number, width: number, height: number, text: string, textSize: number = 48) {
 		super(scene, x, y);
 		scene.add.existing(this);
 		this.scene = scene;
@@ -32,7 +32,7 @@ export class TextButton extends Button {
 		this.add(this.background);
 
 		this.text = this.scene.addText({
-			size: 48,
+			size: textSize,
 			color: "#FFFFFF",
 			text,
 		});

diff --git a/src/components/UI.ts b/src/components/UI.ts
@@ -101,12 +101,14 @@ export class UI extends Phaser.GameObjects.Container {
 		this.nextButton = new TextButton(scene, 0, 600, 300, 90, "Start day");
 		this.panel.add(this.nextButton);
 		this.nextButton.on("click", () => {
+			this.scene.sound.play("scroll", { volume: 0.3 });
 			this.emit("nextDay");
 		});
 
 		this.newLocationButton = new TextButton(scene, 0, 400, 300, 200, "...");
 		this.panel.add(this.newLocationButton);
 		this.newLocationButton.on("click", () => {
+			this.scene.sound.play("score", { volume: 1.0 });
 			this.emit("nextLevel");
 		});
 	}

diff --git a/src/scenes/GameScene.ts b/src/scenes/GameScene.ts
@@ -180,8 +180,9 @@ export class GameScene extends BaseScene {
 
 		this.intermission = new Intermission(this);
 		this.intermission.setDepth(10000);
-		this.intermission.on("close", () => {
+		this.intermission.on("startDay", () => {
 			this.intermission.fadeToGame();
+			this.startDay();
 		});
 		this.intermission.on("nextLevel", () => {
 			const nextLevel = {