Camera issue causing game to have black screen

Phaser 3
1

Whenever I add this.cameras.main.startFollow(this.player) to my Game.js file the game no longer renders and all I see is a black screen. If I remove it the the game renders fine.

What I am going for is to have the scroll follow the player only when they are not at the edge of the map. I have also tried using setBounds() with it.

    this.cameras.main.setBounds(0, 0, map.width, map.height); //also tried 1600, 1760 for w&h
    this.cameras.main.startFollow(this.player)

Like I said if I take those lines out the game comes back and I can move the player but obviously the camera doesn’t move.

Here is the part from the create() method in the Game.js file.

//...more stuff before here

        this.player = new Player(this, 100, 100);

        this.cameras.main.setBounds(0, 0, map.width, map.height);
        this.cameras.main.startFollow(this.player)
    }

Any help would be great.

2

Log the camera scrollX and scrollY values in update().

3

Ok in the Game.js file, in the update() method, I added these lines and they both log NaN

    console.log(this.cameras.main.scrollX)
    console.log(this.cameras.main.scrollY)
4

Anyone have any idea why the scrollX and scrollY would be NaN? I can’t seem to find any kind of answer to this.

5

It can come from this.player.x and this.player.y but in that case you’d expect the player wouldn’t render correctly either.

I think you have to step through Phaser.Cameras.Scene2D.BaseCamera#preRender and find the bad value.

Remove setBounds(…) for now just in case.

6

Unfortunately nothing in the preRender hits me as to why it wouldn’t work. The scrollX/Y values should be set to 0. There is no rotation or scaling or other transforms. I’ve taken my player Class down to bare minimum also

export default class Player {
    constructor(scene, x, y) {
      this.scene = scene;
  
      this.sprite = scene.matter.add.sprite(0, 0, "hero", 0);
  /*
      const { Body, Bodies } = Phaser.Physics.Matter.Matter;
      const { width: w, height: h } = this.sprite;

      const mainBody = Bodies.rectangle(0, 0, w*0.6, h*0.7, { chamfer: { radius: 3 } });
      this.sensors = {
        bottom: Bodies.rectangle(0, h * 0.5, w * 0.25, 2, { isSensor: true }),
        left: Bodies.rectangle(-w * 0.35, 0, 2, h * 0.5, { isSensor: true }),
        right: Bodies.rectangle(w * 0.35, 0, 2, h * 0.5, { isSensor: true })
      };
      const compoundBody = Body.create({
        parts: [mainBody, this.sensors.bottom, this.sensors.left, this.sensors.right],
        render: { sprite: { xOffset: 0.5, yOffset: 0.6 } },
      });
*/
      this.sprite
        //.setExistingBody(compoundBody)
        .setFixedRotation()
        .setPosition(x, y)
    }
    update(cursors)
    {
        const leftDown = cursors.left.isDown
        const rightDown = cursors.right.isDown
        const upDown = cursors.up.isDown
        const downDown = cursors.down.isDown

        if (leftDown) {
            this.sprite.setVelocity(-2, 0)
        }
        else if (rightDown) {
            this.sprite.setVelocity(2, 0)
        }
        else if (upDown) {
            this.sprite.setVelocity(0, -2)
        }
        else if (downDown) {
            this.sprite.setVelocity(0, 2)
        }
        else {
            this.sprite.setVelocity(0, 0)
        }
    }
  }

This seems like something that should just work. Please if you have any other ideas or need any parts of the code let me know.

EDIT: if I just use

this.player = {
            x: 600,
            y: 100,
            width: 32,
            height: 32
        }

in my Game.js file and startFollow that object it works. Something wrong with my player class but I don’t know what as it works otherwise.

7

Not sure about matter, but with arcade, when i make a Player class, i extend Phaser.GameObjects.Sprite

export default class Player extends Phaser.GameObjects.Sprite
{
    constructor (scene, x, y, config: { key: any; })
    {
        super(scene, x, y, config.key);
        this.scene = scene;
    }

    public preUpdate (time, delta)
    {
        super.preUpdate(time, delta);
        // ... ...
    }
}
8

It should be

this.cameras.main.startFollow(this.player.sprite);
1 Like
9

That was it. Thanks for the assist.