I'm working on a 2D space shooter type of game in typescript using Phaser 3 and am trying to get a parallax background with different depths going. But I'm having trouble getting the math right.

You can see my work in progress here: https://www.youtube.com/watch?v=Pea9yVbTD64

As stated in the video everything works if the players x and y are positive, but breaks when they are negative, and I can't figure out what I am doing wrong. Any help would be greatly appreciated. Or perhaps there is a better way to accomplish this?

What I'm doing is randomly generating out a bunch of the Sprites, storing them in an Array, and then updating their position with this code.

  • _Nebulas: is an Array<NebulaParticle>.
  • p.distance: is a number between 1 and 5 to signify how far away the sprite is and is used to make them move slower when they are furher away.
  • _Width and _Height are both arbitrary numbers to signify how big the area is that the parallax should cover, in the video they are both set to 80.
  • OriginalOffsetX/Y is the original random position the Sprite was given.

(this line is here because the below code formatting wont work otherwise.)

public update(delta: number, playerx: number, playery: number) {
    console.log(playerx + ", " + playery );
    for (let i = 0; i < this._Nebulas.length; i++) {
        let p = this._Nebulas[i];          
        p._Sprite.x = (playerx + (this._Width / 2)) - (((playerx / p.distance) + p.OriginalOffsetX) % this._Width);
        p._Sprite.y = (playery + (this._Width / 2)) - (((playery / p.distance) + p.OriginalOffsetY) % this._Height);

class NebulaParticle {
    public _Sprite: Phaser.GameObjects.Sprite;
    public OriginalOffsetX: number;
    public OriginalOffsetY: number;
    public distance: number;

Just use a camera with the gameobject method setScrollFactor. Setting 0 makes it fixed to the camera; setting a number between 0-1 will make it scroll at varying rates, which you can use to set up parallax scrolling layers.

See an example here

  • \$\begingroup\$ Thank you, but I can get this to work, the problem comes in when I want to loop around an object so that when it leaves the trailing edge it comes in on the leading one. That is I want the parallax background to be infinite and self looping in all directions forever. \$\endgroup\$ – JensB Dec 5 '18 at 8:03
  • \$\begingroup\$ In the example you linked the hotdog should come back in on the leading edge when it goes out of the screen view from being left behind, it's that part which I can't get right. \$\endgroup\$ – JensB Dec 5 '18 at 8:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.