Feature request: parallax

[learnuidev]

How could this be achieved in kaboom?

[kgish]

Would be a nice demo example.

[vicentelyrio-yuca]

Hi, the “drive” example gives an idea of how to do it. Like the moving road, you can have other elements in different planes and speeds.

[DryCreations]

I've been looking into Kaboom.js and found this by searching for something similar. Since the "drive" link above appears to be dead now, I put together a quick attempt at Parallax scrolling:

function parallax(pf) {
  let globalPosition
  let parallaxFactor

  return {
    id: "parallax",
    require: ["pos", "fixed"],

    add() {
      globalPosition = this.pos.clone()
      parallaxFactor = isNaN(pf) ? pf : new Vec2(pf ?? 1, pf ?? 1)
    },

    update() {
      let cameraPosition = camPos()
      this.pos = new Vec2(
        -cameraPosition.x + cameraPosition.x * parallaxFactor.x + globalPosition.x,
        -cameraPosition.y + cameraPosition.y * parallaxFactor.y + globalPosition.y
      )
    },
  }
}

Here is a demo project on replit as well: https://replit.com/@HaydenMankin/Kaboom-Parallax-Testing?v=1

Hopefully this helps someone else searching for parallax backgrounds in kaboom!