add parallax background object

src/classes/Environment/ParallaxBackground.ts

@@ -0,0 +1,82 @@
+import { GameObjects, Geom, Math as PhaserMath, Types } from 'phaser';
+
+import { Config } from '../../config';
+import { Layer } from '../../data/layers';
+import { Data as ParallaxData } from '../../data/parallaxBackground';
+import { LazyInitialize } from '../../data/types';
+import { Game } from '../../scenes/Game';
+import { shouldInitialize } from '../../utils/util';
+import { Player } from '../Player/Player';
+
+export class ParallaxBackground extends GameObjects.Container implements LazyInitialize {
+  initialized = false;
+  center: PhaserMath.Vector2;
+  player: Player;
+  layers: GameObjects.TileSprite[] = [];
+
+  info: ParallaxData;
+
+  constructor(scene: Game, info: ParallaxData) {
+    const { position, size } = info;
+    super(scene, position.x, position.y);
+    this.name = `ParallaxBackground-${position.x}-${position.y}`;
+
+    this.info = info;
+    this.player = scene.player;
+
+    this.setDepth(Layer.Backgrounds);
+
+    this.center = new PhaserMath.Vector2(position.x + 0.5 * size.x, position.y + 0.5 * size.y);
+
+    if (Config.debug) {
+      this.add(
+        scene.add.rectangle(this.center.x, this.center.y, size.x, size.y).setStrokeStyle(10, 0x006666).setOrigin(0.5)
+      );
+    }
+  }
+
+  lazyInit(forceInit?: boolean) {
+    if (!forceInit && (this.initialized || !shouldInitialize(this.center, this.player, 2000))) return;
+
+    this.scene.add.existing(this);
+    this.scene.physics.add.existing(this);
+
+    const { position, size, scale, images, skipLighting } = this.info;
+    images.forEach(({ texture, scale: imgScale, speed }) => {
+      const img = this.scene.add.tileSprite(position.x, position.y, size.x, size.y, texture);
+      img
+        .setOrigin(0)
+        .setTileScale((scale || 1) * (imgScale || 1))
+        .setData('speed', speed);
+
+      if (!skipLighting) img.setPipeline('Light2D');
+      img.setPostPipeline('XRayPipeline');
+
+      this.add(img);
+      this.layers.push(img);
+    });
+
+    if (Config.debug) {
+      this.setInteractive({
+        draggable: true,
+        hitArea: new Geom.Rectangle(position.x, position.y, size.x, size.y),
+        hitAreaCallback: Geom.Rectangle.Contains,
+      } as Types.Input.InputConfiguration);
+    }
+
+    this.initialized = true;
+  }
+
+  update() {
+    this.lazyInit();
+
+    if (!this.initialized || !this.getBounds().contains(this.player.x, this.player.y)) return;
+
+    const { size } = this.info;
+    const distance = PhaserMath.Clamp(this.player.x - this.center.x, -0.5 * size.x, 0.5 * size.x) / size.x;
+
+    this.layers.forEach((img) => {
+      img.tilePositionX = distance * img.getData('speed') * size.x;
+    });
+  }
+}

src/data/parallaxBackground.ts

@@ -0,0 +1,39 @@
+import { Types } from 'phaser';
+
+export type Data = {
+  position: Types.Math.Vector2Like;
+  size: Types.Math.Vector2Like;
+  scale?: number;
+  images: {
+    texture: string;
+    scale?: number;
+    speed: number;
+  }[];
+  skipLighting?: boolean;
+};
+
+export const ParallaxBackgroundData: Data[] = [
+  // {
+  //   position: { x: 0, y: 0 },
+  //   size: { x: 1920, y: 1080 },
+  //   scale: 3.5,
+  //   images: [
+  //     {
+  //       texture: 'layer5',
+  //       speed: 0,
+  //     },
+  //     {
+  //       texture: 'layer4',
+  //       speed: 0.01,
+  //     },
+  //     {
+  //       texture: 'layer3',
+  //       speed: 0.02,
+  //     },
+  //     {
+  //       texture: 'layer2',
+  //       speed: 0.03,
+  //     },
+  //   ],
+  // },
+];

src/scenes/Game.ts

@@ -8,6 +8,7 @@ import { Fireflies, FireflyPositions } from '../classes/Environment/Fireflies';
 import { HelperText } from '../classes/Environment/HelperText';
 import { Item } from '../classes/Environment/Item';
 import { NPC } from '../classes/Environment/NPC';
+import { ParallaxBackground } from '../classes/Environment/ParallaxBackground';
 import { Prop } from '../classes/Environment/Prop';
 import { Slope } from '../classes/Environment/Slope';
 import { Walls } from '../classes/Environment/Walls';
@@ -21,6 +22,7 @@ import { helperTextList, npcList, propList, warpList } from '../data/arrays';
 import { BackgroundData } from '../data/background';
 import { Layer } from '../data/layers';
 import { LightData } from '../data/lights';
+import { ParallaxBackgroundData } from '../data/parallaxBackground';
 import { SlopeData } from '../data/slope';
 import { Interactive } from '../data/types';
 import { Colors, getColorNumber } from '../utils/colors';
@@ -60,6 +62,7 @@ export class Game extends Scene {
     this.player = new Player(this);
 
     const backgrounds = this.createBackgrounds();
+    const parallaxBackgrounds = this.createParallaxBackgrounds();
 
     // objects without side effects
     const walls = new Walls(this, this.player);
@@ -94,7 +97,7 @@ export class Game extends Scene {
 
     // update items added to the group
     const updateables = this.add.group(
-      [this.player, forestFireflies, lakeFireflies, ...slopes, walls, ...backgrounds],
+      [this.player, forestFireflies, lakeFireflies, ...slopes, walls, ...backgrounds, ...parallaxBackgrounds],
       {
         runChildUpdate: true,
       }
@@ -154,6 +157,10 @@ export class Game extends Scene {
     return BackgroundData.map((b) => new Background(this, b, this.player));
   }
 
+  createParallaxBackgrounds() {
+    return ParallaxBackgroundData.map((b) => new ParallaxBackground(this, b));
+  }
+
   createWarpers(): Warp[] {
     return warpList.map((warp) => new Warp(this, warp, this.player));
   }

src/scenes/Intro.ts

@@ -11,7 +11,6 @@ export function preloadIntro(scene: Scene) {
 
   scene.load.image('train', 'maps/intro/train.png');
 
-  scene.load.image('layer1', 'maps/intro/layer1.png');
   scene.load.image('layer2', 'maps/intro/layer2.png');
   scene.load.image('layer3', 'maps/intro/layer3.png');
   scene.load.image('layer4', 'maps/intro/layer4.png');