Adding Buttons to the Empty Space Above and Below the Game Scene on Mobile

Phaser 3
1

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!

image
image834×1456 53.4 KB

2

For the areas outside of the HTML Canvas element, you would want to use native HTML Elements instead of using Phaser to create Game Objects (like the Image Game Object). There are a few different ways you could do this.

You could manually create these elements in the index.html file of your game, and then use CSS to position the elements were you would like. This would also allow you to use media queries to hide the elements when not on mobile.

You could also programmatically create these elements in your code. In your example were you are trying to place the Image Game Object, you would need to things like create a div, button, etc., and then position those elements as well. Example: Document: createElement() method - Web APIs | MDN

In both examples, you would need to connect those elements to your game code, so you can trigger actions in your game.

3

Thank you for your reply, unless there is no other solution, we can close the topic.