Small parallaxed background for a large world

Phaser 2 / CE
1

I have a large world (10000 x 10000) and a relatively small background (like 1600 x 1200) that can’t be stretched to world size because it looks ugly this way. Camera is centered on a player and player sees a small part of the world, that part is equal to browser’s viewport (like 1000 x 700 or whatever innerWidth and innerHeight is). I want the background to fit viewport (be stretched proportionally if needed) but always be a bit larger than viewport to let it act as parallaxed image. As player moves, the background image should move slightly too. Real-world analogy would be person sitting in front of a window (my world) looking at the landscape (background) outside the window. As person changes position (from top left corner to window center, for example) landscape in the distance moves slightly to reveal more of its top-left side.

Hope it all makes sense. How can I achieve this with phaser 2? Pure CSS/JS non-phaser solution (maybe with a background div behind the canvas) would also work.

2

Have you seen how this game work ? http://phaser.io/news/2019/02/xevious-mini
It looks like using a small parllaxed background

3

Doesn’t look like what I need.

4

Set background’s fixedToCamera to true and then update with something like

bg.cameraOffset.set(
  -0.1 * this.camera.x,
  -0.1 * this.camera.y
);
5

Nice, thanks!