Hi everyone!
I’m developing a Phaser 3 game with a resolution of 1920x1200 and I’m using the following scale mode:
scale: {
mode: Phaser.Scale.FIT,
parent: 'phaser',
autoCenter: Phaser.Scale.CENTER_BOTH,
}
This setup works perfectly, with the game centered and scaled correctly. There are small bars on the left and right sides of the game, which is expected. However, when I run the game on mobile, it’s centered as well, but larger empty areas appear above and below the game scene, where the canvas doesn’t render anything and the screen remains blank.
I would like to place interactive buttons (e.g., images) in these empty spaces to control various functions in the game. However, since these areas are outside the game scene, I haven’t been able to successfully place objects (like this.add.image
) there, as they only render within the scene boundaries. Does anyone know the best approach to achieve this?
Thanks in advance for any advice!