diff --git a/index.html b/index.html
index 3f3ce7142f1..cd6aa57effd 100644
--- a/index.html
+++ b/index.html
@@ -28,6 +28,8 @@
justify-content: center;
}
+
+
diff --git a/src/loading-scene.ts b/src/loading-scene.ts
new file mode 100644
index 00000000000..0c8580cf368
--- /dev/null
+++ b/src/loading-scene.ts
@@ -0,0 +1,103 @@
+class LoadingScene extends Phaser.Scene {
+ constructor() {
+ super("LoadingScene");
+ }
+
+ preload() {
+ this.loadLoadingScreen();
+ }
+
+ loadLoadingScreen() {
+ let progressBar = this.add.graphics();
+ let progressBox = this.add.graphics();
+ progressBox.fillStyle(0x222222, 0.8);
+
+ let width = this.cameras.main.width;
+ let height = this.cameras.main.height;
+
+ let loadingText = this.make.text({
+ x: width / 2,
+ y: height / 2 - 50,
+ text: "Loading...",
+ style: {
+ font: "20px emerald",
+ color: "#ffffff",
+ },
+ });
+ loadingText.setOrigin(0.5, 0.5);
+
+ let percentText = this.make.text({
+ x: width / 2,
+ y: height / 2,
+ text: "0%",
+ style: {
+ font: "18px emerald",
+ color: "#ffffff",
+ },
+ });
+ percentText.setOrigin(0.5, 0.5);
+
+ let assetText = this.make.text({
+ x: width / 2,
+ y: height / 2 + 50,
+ text: "",
+ style: {
+ font: "18px monospace",
+ color: "#ffffff",
+ },
+ });
+ assetText.setOrigin(0.5, 0.5);
+
+ this.load.on("progress", (value: string) => {
+ const parsedValue = parseInt(value);
+ percentText.setText(parsedValue * 100 + "%");
+ progressBar.clear();
+ progressBar.fillStyle(0xffffff, 0.8);
+ progressBar.fillRect(
+ this.gameWidth / 2 - 160,
+ 280,
+ 300 * parsedValue,
+ 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();
+ });
+ }
+
+ isLocal() {
+ return location.hostname === "localhost" ||
+ location.hostname === "127.0.0.1"
+ ? true
+ : false;
+ }
+
+ gameHeight() {
+ return game.config.height as number;
+ }
+
+ gameWidth() {
+ return game.config.width as number;
+ }
+
+ create() {
+ // const logoExposeSetting: number = this.isLocal ? 300 : 2000;
+
+ // this.cameras.main.fadeIn(1000, 255, 255, 255);
+
+ // setTimeout(() => {
+ // this.scene.start("battle");
+ // }, logoExposeSetting);
+ }
+}
+
+export default LoadingScene;
diff --git a/src/main.ts b/src/main.ts
index a9cbd364149..0a4c2910320 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,5 +1,6 @@
import Phaser from 'phaser';
import BattleScene from './battle-scene';
+import LoadingScene from './loading-scene';
import InvertPostFX from './pipelines/invert';
const config: Phaser.Types.Core.GameConfig = {
@@ -12,7 +13,7 @@ const config: Phaser.Types.Core.GameConfig = {
},
pixelArt: true,
pipeline: [ InvertPostFX ] as unknown as Phaser.Types.Core.PipelineConfig,
- scene: [ BattleScene ]
+ scene: [ LoadingScene, BattleScene ]
};
const setPositionRelative = function (guideObject: any, x: number, y: number) {