Issue with Camera setBounds & follow player

Phaser 3
1

I am creating an “underwater diving game” where the backgrounds are set to repeated tileSprite, and players can swim up with key presses.

I managed to make camera follow my player with:
this.cameras.main.startFollow(this.player.sprite);

However, when I try to set bounds for avoiding the display going into “black space”, the outcome is either camera no longer follows the player, or it displays a strange sizing portion between the background and rest of black space.
this.cameras.main.setBounds(0,0, config.width, config.height);

My problem may due to the following misunderstandings:

  • my lack of knowledge in setting up the background properly
  • not specifying bounds in pixel? (I also don’t know how to convert background size to pixel)
  • not understanding the setOrigin() method of backgrounds/sprite

My ultimate goal is to have a long background (width:height = 1:4), and the player can start at any random location within that background while the camera follows the player when it’s swimming up.

Any ideas or suggestions will be appreciated!

2

What does this look like?

3

I tried again this morning with the same camera code, and it worked. So it seems like it was the problem with origin setting of the background, and I was placing player outside of the background (so the camera moves with the player hence showing half the image background and half the default black background)

:thinking:

4

That part is normal, as the camera can’t leave the bounds even while following a target.

1 Like