diff --git a/frontend/src/js/background_scene.ts b/frontend/src/js/background_scene.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a60dc4a1d19b64ad359cdc781b716f50c2e37663
--- /dev/null
+++ b/frontend/src/js/background_scene.ts
@@ -0,0 +1,56 @@
+import "phaser";
+
+const LAYERS_HEIGHT = 793;
+const LAYERS = {
+ b00: "assets/background_layers/Layer_0011_0.png",
+ b01: "assets/background_layers/Layer_0010_1.png",
+ b02: "assets/background_layers/Layer_0009_2.png",
+ b03: "assets/background_layers/Layer_0008_3.png",
+ b04: "assets/background_layers/Layer_0007_Lights.png",
+ b05: "assets/background_layers/Layer_0006_4.png",
+ b06: "assets/background_layers/Layer_0005_5.png",
+ b07: "assets/background_layers/Layer_0004_Lights.png",
+ b08: "assets/background_layers/Layer_0003_6.png",
+ b09: "assets/background_layers/Layer_0002_7.png",
+ b10: "assets/background_layers/Layer_0001_8.png",
+ b11: "assets/background_layers/Layer_0000_9.png",
+};
+
+export default class BackgroundScene extends Phaser.Scene {
+ layers: Phaser.GameObjects.TileSprite[];
+
+ constructor() {
+ super("head");
+ this.layers = [];
+ }
+
+ preload() {
+ Object.entries(LAYERS).forEach(([key, path]) => this.load.image(key, path));
+ }
+
+ createBackground() {
+ const scale = this.cameras.main.height / LAYERS_HEIGHT;
+ const width = this.cameras.main.width / scale;
+ const height = this.cameras.main.height / scale;
+ Object.keys(LAYERS).forEach((textureKey) => {
+ const tileSprite = this.add.tileSprite(0, 0, width, height, textureKey);
+ tileSprite.setOrigin(0).setScale(scale);
+ this.layers.push(tileSprite);
+ });
+ }
+
+ create() {
+ this.createBackground();
+ // this.scale.displaySize.setAspectRatio(
+ // this.cameras.main.width / this.cameras.main.height,
+ // );
+ // this.scale.refresh();
+ this.scene.launch("welcome");
+ }
+
+ update() {
+ this.layers.forEach((layer, index) => {
+ layer.tilePositionX -= 0.02 * index;
+ });
+ }
+}
diff --git a/frontend/src/js/fight_scene.ts b/frontend/src/js/fight_scene.ts
index 1a212eba4d2c552c26a294dbc0f73f77bf0aec1e..f73fbd82fa1e86bce8e841595aaf5d0a34a7a323 100644
--- a/frontend/src/js/fight_scene.ts
+++ b/frontend/src/js/fight_scene.ts
@@ -32,8 +32,7 @@ export default class FightScene extends Phaser.Scene {
}
preload() {
- this.preloadBackground();
-
+ this.load.image("ground", "assets/background_layers/ground.png");
this.load.spritesheet("oezi", "assets/sprites/player/oezi.png", {
frameWidth: 27,
frameHeight: 35,
@@ -78,7 +77,6 @@ export default class FightScene extends Phaser.Scene {
final: "",
};
this.initCluesGroup();
- this.createBackground();
createAnim(this, "player_idle", "oezi", 1, 5);
createAnim(this, "player_run", "oezi", 6, 13);
@@ -131,10 +129,10 @@ export default class FightScene extends Phaser.Scene {
},
});
- this.scale.displaySize.setAspectRatio(
- this.cameras.main.width / this.cameras.main.height,
- );
- this.scale.refresh();
+ // this.scale.displaySize.setAspectRatio(
+ // this.cameras.main.width / this.cameras.main.height,
+ // );
+ // this.scale.refresh();
this.initAndBindGuessPreview();
this.beGame = (await backend.createGame()).data;
@@ -257,43 +255,6 @@ export default class FightScene extends Phaser.Scene {
textEntry.text = inputStatus.final;
};
}
-
- preloadBackground() {
- this.load.image("b0", "assets/background_layers/Layer_0011_0.png");
- this.load.image("b1", "assets/background_layers/Layer_0010_1.png");
- this.load.image("b2", "assets/background_layers/Layer_0009_2.png");
- this.load.image("b3", "assets/background_layers/Layer_0008_3.png");
- this.load.image("b4", "assets/background_layers/Layer_0007_Lights.png");
- this.load.image("b5", "assets/background_layers/Layer_0006_4.png");
- this.load.image("b6", "assets/background_layers/Layer_0005_5.png");
- this.load.image("b7", "assets/background_layers/Layer_0004_Lights.png");
- this.load.image("b8", "assets/background_layers/Layer_0003_6.png");
- this.load.image("b9", "assets/background_layers/Layer_0002_7.png");
- this.load.image("b10", "assets/background_layers/Layer_0001_8.png");
- this.load.image("b11", "assets/background_layers/Layer_0000_9.png");
- this.load.image("logo", "assets/background_layers/Logo.png");
- this.load.image("ground", "assets/background_layers/ground.png");
- }
-
- createBackground() {
- ["b0", "b1", "b2", "b3", "b4", "b5", "b6", "b7", "b8", "b9", "b10"].forEach(
- (textureKey) => {
- const scale =
- this.cameras.main.height /
- this.textures.get(textureKey).getSourceImage().height;
- this.add
- .tileSprite(
- 0,
- 0,
- this.cameras.main.width / scale,
- this.cameras.main.height / scale,
- textureKey,
- )
- .setOrigin(0)
- .setScale(scale);
- },
- );
- }
}
// TODO: remove any
diff --git a/frontend/src/js/main.ts b/frontend/src/js/main.ts
index b2b4cbaca40cda5c0dfc1673f1a8fc7e8cdd72bf..de0045ee0e8ee1e64ffa4ab26114807a5dc593f5 100644
--- a/frontend/src/js/main.ts
+++ b/frontend/src/js/main.ts
@@ -1,16 +1,17 @@
import * as Phaser from "phaser";
+import BackgroundScene from "./background_scene";
+import WelcomeScene from "./welcome_scene";
import FightScene from "./fight_scene";
export const GRAVITY_Y = 200;
const config = {
type: Phaser.AUTO,
- width: window.innerWidth, // 1200,
- height: window.innerHeight, // 800,
+ // TODO: bound height, with responsive aspect ratio
pixelArt: true,
autoCenter: Phaser.Scale.CENTER_BOTH,
- scaleMode: Phaser.Scale.FIT,
+ scaleMode: Phaser.Scale.RESIZE,
physics: {
default: "arcade",
arcade: {
@@ -18,7 +19,7 @@ const config = {
// debug: true,
},
},
- scene: FightScene,
+ scene: [BackgroundScene, WelcomeScene, FightScene],
};
new Phaser.Game(config);
diff --git a/frontend/src/js/welcome_scene.ts b/frontend/src/js/welcome_scene.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d0fbda3a9d068a67fc6366cc3509900024eaea87
--- /dev/null
+++ b/frontend/src/js/welcome_scene.ts
@@ -0,0 +1,46 @@
+import "phaser";
+
+export default class WelcomeScene extends Phaser.Scene {
+ constructor() {
+ super("welcome");
+ }
+
+ create() {
+ this.drawTitle();
+ this.drawCTA();
+ this.bindEvents();
+ }
+
+ drawTitle() {
+ const text = "ÖTZI\nGAME";
+ const title = this.add.text(0, 0, text, {
+ font: "bold 64px Courier",
+ color: "#ffffff",
+ });
+ title.setPosition(
+ (this.cameras.main.width - title.width) * 0.5,
+ (this.cameras.main.height - title.height) * 0.4,
+ );
+ }
+
+ drawCTA() {
+ const text = "press to start";
+ const cta = this.add.text(0, 0, text, {
+ font: "bold 32px Courier",
+ color: "#ffffff",
+ });
+ cta.setPosition(
+ (this.cameras.main.width - cta.width) * 0.5,
+ (this.cameras.main.height - cta.height) * 0.7,
+ );
+ }
+
+ bindEvents() {
+ this.input.keyboard.once("keydown", this.startFight.bind(this));
+ this.input.once("pointerdown", this.startFight.bind(this));
+ }
+
+ startFight() {
+ this.scene.start("fight");
+ }
+}