diff --git a/frontend/src/js/background_scene.ts b/frontend/src/js/background_scene.ts index 551e3ec497b48d41bd7892a819d8a908f3a7044e..d532b7542a283ce762746b36d2d3bef4f7ece9bb 100644 --- a/frontend/src/js/background_scene.ts +++ b/frontend/src/js/background_scene.ts @@ -33,13 +33,12 @@ const COLORS = HSL_COLORS.map((pair) => ); export default class BackgroundScene extends Phaser.Scene { - layers: Phaser.GameObjects.TileSprite[]; - atmosphere: Phaser.Tweens.Tween; - curtain: Phaser.GameObjects.Rectangle; + layers!: Phaser.GameObjects.TileSprite[]; + atmosphere!: Phaser.Tweens.Tween; + curtain!: Phaser.GameObjects.Rectangle; constructor() { super("background"); - this.layers = []; } preload() { @@ -58,25 +57,27 @@ export default class BackgroundScene extends Phaser.Scene { ); } - createBackground() { + createLayers() { 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).setTint( - // NOTE: this is a bit lazy but meh. - this.interpColor(COLORS[0][0], COLORS[0][0], 0), - this.interpColor(COLORS[0][0], COLORS[0][0], 0), - this.interpColor(COLORS[0][1], COLORS[0][1], 0), - this.interpColor(COLORS[0][1], COLORS[0][1], 0), - ); - this.layers.push(tileSprite); - }); + return Object.keys(LAYERS).map((textureKey) => + this.add + .tileSprite(0, 0, width, height, textureKey) + .setOrigin(0) + .setScale(scale) + .setTint( + // NOTE: this is a bit lazy but meh. + this.interpColor(COLORS[0][0], COLORS[0][0], 0), + this.interpColor(COLORS[0][0], COLORS[0][0], 0), + this.interpColor(COLORS[0][1], COLORS[0][1], 0), + this.interpColor(COLORS[0][1], COLORS[0][1], 0), + ), + ); } createAtmosphere() { - this.atmosphere = this.tweens.addCounter({ + return this.tweens.addCounter({ paused: true, from: 0, to: 255 * (COLORS.length - 1), @@ -95,7 +96,7 @@ export default class BackgroundScene extends Phaser.Scene { } createCurtain() { - this.curtain = this.add + return this.add .rectangle( 0, 0, @@ -129,9 +130,9 @@ export default class BackgroundScene extends Phaser.Scene { } create() { - this.createBackground(); - this.createAtmosphere(); - this.createCurtain(); + this.layers = this.createLayers(); + this.atmosphere = this.createAtmosphere(); + this.curtain = this.createCurtain(); // this.scale.displaySize.setAspectRatio( // this.cameras.main.width / this.cameras.main.height, // );