Phaser Always Fix Camera Position to Sprite

Question

I am developing a cross-platform overhead game using Phaser.

Is there a way to always fix the position of a camera to a sprite? The following function works great, but I want the camera to always be centered on the sprite - even when the sprite is nearing the edge of the tilemap.

this.game.camera.follow(this);

The reason I would like this capability is because I am developing a mobile game, and the player sprite manages to get in the way of crucial UI elements. This could be fixed by providing a constant camera on the sprite. Areas without tiles can be filled with a black background.

Here is my problem visualized. As you can see, when nearing the edge of the tilemap, the sprite is no longer centered and it is in the way of my joystick. Instead, I would like the sprite to be centered and the camera to display a black background past the tilemap when it gets near edges.

Thank you in advance,

Christopher

Answer 1

Following the documentation mentioned here, the camera bounds are set to the size of the world by default. What you can do is set the bounds of the world to be a bit bigger than what your game requires. Think of this in a way that if your game was first centered at (0,0) being the top-left corner, then you will increase your world bounds by (x,y) so that everything you now draw will be positioned at (x + sprite.x, y + sprite.y). This way the camera will move beyond the world and will show black (or whatever you colored your background) color.

Also, you would need to restrict player movement to a limit that it keeps within your game area (if you do not restrict it, then it would keep moving beyond the game area onto the black part and you would face the same problem that you are now).