Positioning gameobjects in a zoomed camera

Phaser 3
1

Hello,

I’m making a mobile game and when testing it on smaller phone screens the elements on screen seem too big and you cannot properly see the world surrounding the player.

My solution to this is to change zoom of the main camera to a smaller value ( ~ 0.6 ) at the start of the game if the display is too small.

My question is how can I properly position elements with scrollFactor = 0 on the screen when camera is zoomed ? How can I position something at top of screen for example ?

Also, is there a better way to resize game world for multiple screen sizes ( especially on mobile devices ) ?

Thank you all

2

Have you already used the scale manager? Or maybe try a custom scale strategy.

3

Many thanks for the links, I’ll look into using the custom scale strategy great work !

I’m using RESIZE scale mode for now which works for most devices. I’m wondering how did you position the score text which also has scrollFactor = 0 when camera is zoomed in/out ?

4

Actually the camera does not zoom, it only changed its width and height.

You have to adjust the position of the object which uses setScrollFactor(0) manually on each window resize event.

// at the end of your scene

const resize = () => {
  // adjust the position of the levelText
  levelText.setPosition(this.cameras.main.width/2, 50)
}

this.scale.on('resize', (gameSize: any) => {
  this.cameras.resize(gameSize.width, gameSize.height)
  resize()
})

resize()
1 Like
5

Thank you again :smiley: