Merge pull request #6 from JamesSkemp/add-splash-screen

Add example splash screen and preloader progress bar
JamesSkemp · Oct 23, 2018 · 5419cfb · 5419cfb
2 parents 94eb490 + 73752cd
commit 5419cfb
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 6 deletions.
diff --git a/v3/_starter-v3-vsc-ts-node/src/assets/phaser_pixel_medium_flat.png b/v3/_starter-v3-vsc-ts-node/src/assets/phaser_pixel_medium_flat.png
diff --git a/v3/_starter-v3-vsc-ts-node/src/index.html b/v3/_starter-v3-vsc-ts-node/src/index.html
@@ -4,14 +4,14 @@
 <head>
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />
-	<title>Starter Project for Phaser with TypeScript</title>
+	<title>Starter Project for Phaser 3 with TypeScript</title>
 	<link rel="shortcut icon" href="favicon.ico" />
 	<link rel="stylesheet" href="app.css" type="text/css" />
 	<script src="lib/phaser.min.js"></script>
 </head>
 <body>
 	<!--Update the heading below, and title above, as needed.-->
-	<h1>Starter Project for Phaser with TypeScript</h1>
+	<h1>Starter Project for Phaser 3 with TypeScript</h1>
 
 	<div id="content"></div>
 	<!--If using the project the TypeScript files will automatically be combined into the following file. Update as needed.-->

diff --git a/v3/_starter-v3-vsc-ts-node/src/ts/Game.ts b/v3/_starter-v3-vsc-ts-node/src/ts/Game.ts
@@ -2,6 +2,7 @@ import * as phaser from "phaser";
 import Boot from "./Scenes/Boot";
 import Preloader from "./Scenes/Preloader";
 import MainMenu from "./Scenes/MainMenu";
+import SplashScreen from "./Scenes/SplashScreen";
 import Utilities from "./Utilities";
 
 const gameConfig: GameConfig = {
@@ -20,6 +21,7 @@ export default class Game extends Phaser.Game {
 
 		this.scene.add(Boot.Name, Boot);
 		this.scene.add(Preloader.Name, Preloader);
+		this.scene.add(SplashScreen.Name, SplashScreen);
 		this.scene.add(MainMenu.Name, MainMenu);
 		this.scene.start(Boot.Name);
 	}

diff --git a/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/MainMenu.ts b/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/MainMenu.ts
@@ -7,8 +7,7 @@ export default class MainMenu extends Phaser.Scene {
 	public static Name: string = "MainMenu";
 
 	public preload(): void {
-		this.load.path = "assets/";
-		this.load.image("Phaser-Logo-Small");
+		// Preload as needed.
 	}
 
 	public create(): void {
@@ -18,5 +17,6 @@ export default class MainMenu extends Phaser.Scene {
 	}
 
 	public update(): void {
+		// Update logic, as needed.
 	}
 }
diff --git a/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/Preloader.ts b/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/Preloader.ts
@@ -1,4 +1,4 @@
-import MainMenu from "./MainMenu";
+import SplashScreen from "./SplashScreen";
 import Utilities from "../Utilities";
 
 export default class Preloader extends Phaser.Scene {
@@ -8,15 +8,90 @@ export default class Preloader extends Phaser.Scene {
 	public static Name: string = "Preloader";
 
 	public preload(): void {
+		this.addProgressBar();
+
 		this.load.path = "assets/";
+		this.load.image("phaser_pixel_medium_flat");
+		this.load.image("Phaser-Logo-Small");
+
+		// You should remove this logic; this is only included here to show off the progress bar.
+		for (let i = 0; i < 100; i++) {
+			this.load.image("Phaser-Logo-Small" + i, "Phaser-Logo-Small.png");
+		}
 	}
 
 	public create(): void {
 		Utilities.LogSceneMethodEntry("Preloader", "create");
 
-		this.scene.start(MainMenu.Name);
+		this.scene.start(SplashScreen.Name);
 	}
 
 	public update(): void {
 	}
+
+	/**
+	 * Adds a progress bar to the display, showing the percentage of assets loaded and their name.
+	 */
+	private addProgressBar(): void {
+		const width = this.cameras.main.width;
+		const height = this.cameras.main.height;
+
+		const progressBar = this.add.graphics();
+		const progressBox = this.add.graphics();
+		progressBox.fillStyle(0x222222, 0.8);
+		progressBox.fillRect(width / 4, height / 2 - 30, width / 2, 50);
+
+		const loadingText = this.make.text({
+			x: width / 2,
+			y: height / 2 - 50,
+			text: "Loading...",
+			style: {
+				font: "20px monospace",
+				fill: "#ffffff"
+			}
+		});
+		loadingText.setOrigin(0.5, 0.5);
+
+		const percentText = this.make.text({
+			x: width / 2,
+			y: height / 2 - 5,
+			text: "0%",
+			style: {
+				font: "18px monospace",
+				fill: "#ffffff"
+			}
+		});
+		percentText.setOrigin(0.5, 0.5);
+
+		const assetText = this.make.text({
+			x: width / 2,
+			y: height / 2 + 50,
+			text: "",
+			style: {
+				font: "18px monospace",
+				fill: "#ffffff"
+			}
+		});
+
+		assetText.setOrigin(0.5, 0.5);
+
+		this.load.on("progress", (value) => {
+			percentText.setText(parseInt(value * 100 + "", 10) + "%");
+			progressBar.clear();
+			progressBar.fillStyle(0xffffff, 1);
+			progressBar.fillRect((width / 4) + 10, (height / 2) - 30 + 10, (width / 2 - 10 - 10) * value, 30);
+		});
+
+		this.load.on("fileprogress", (file) => {
+			assetText.setText("Loading asset: " + file.key);
+		});
+
+		this.load.on("complete", () => {
+			progressBar.destroy();
+			progressBox.destroy();
+			loadingText.destroy();
+			percentText.destroy();
+			assetText.destroy();
+		});
+	}
 }
diff --git a/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/SplashScreen.ts b/v3/_starter-v3-vsc-ts-node/src/ts/Scenes/SplashScreen.ts
@@ -0,0 +1,44 @@
+import Utilities from "../Utilities";
+import MainMenu from "./MainMenu";
+
+export default class SplashScreen extends Phaser.Scene {
+	/**
+	 * Unique name of the scene.
+	 */
+	public static Name: string = "SplashScreen";
+
+	public preload(): void {
+		this.load.path = "assets/";
+	}
+
+	public create(): void {
+		Utilities.LogSceneMethodEntry("SplashScreen", "create");
+
+		const titleText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY * 0.5, "Starter Project for Phaser 3 with TypeScript")
+			.setOrigin(0.5, 0)
+			.setFontFamily("monospace").setFontSize(26).setFill("#fff");
+
+		const poweredByText = this.add.text(this.cameras.main.centerX, this.cameras.main.centerY - 25, "Powered By");
+		poweredByText.setOrigin(0.5, 0.5);
+		poweredByText.setFontFamily("monospace").setFontSize(20).setFill("#fff");
+		this.add.image(this.cameras.main.centerX, this.cameras.main.centerY, "phaser_pixel_medium_flat");
+
+		this.input.setDefaultCursor("pointer");
+		this.input.on("pointerdown", this.loadMainMenu, this);
+
+		this.time.addEvent({
+			// Run after three seconds.
+			delay: 3000,
+			callback: this.loadMainMenu,
+			callbackScope: this,
+			loop: false
+		});
+	}
+
+	/**
+	 * Load the next scene, the main menu.
+	 */
+	private loadMainMenu(): void {
+		this.scene.start(MainMenu.Name);
+	}
+}