Consistent Camera Zoom

Phaser 3
1

Hello, I’m working on a game where you grow bigger as you collect coins. To prevent the player from covering the screen, I make the camera zoom out as the player grows. Here is my current code:

						if(player.scale < 0.75) this.cameras.main.setZoom(1.25-player.scale);
						if(player.scale >= 3) this.cameras.main.setZoom(0.56-((player.scale-1)/8));
						else if(player.scale >= 1) this.cameras.main.setZoom(0.56-((player.scale-1)/8));
            
						else if(player.scale >= 0.75) this.cameras.main.setZoom(0.56-((player.scale-0.75)/3));

This looks great on my current monitor (1920x1080), but when I try playing on my phone, the player look bigger than what I see on my monitor.

I also noticed that making the window bigger makes me see more of my surroundings.

Is there a way I could get a consistent camera zoom?

Like on smaller devices the camera is more zoomed out than on bigger devices? So it’s fair for people on all devices.

2

There are a lot of ways but you can start with something like

this.cameras.main.setZoom(
    Math.max(this.scale.width / LENGTH, this.scale.height / LENGTH)
);
1 Like
3

What is LENGTH

4

There it would be the maximum width or height of the camera view box, in game world pixels.

5

or full page game

6

Thanks so much.