Automating GameObject Scaling and Positioning Based on Screen Size in Phaser 3

[monteiz]

I often encounter the need to adjust game object positions and scales based on the screen size. My approach typically involves setting the positions and scales of game objects relative to a "reference object", which could be the main camera or a specially chosen object within the game.

To handle screen resizing, I use the scene.scale.on('resize', ...) event to recalculate and reassign positions based on this reference object. While this method works, it can become quite tedious and repetitive, especially in more complex scenes.

Here's a simplified version of my current approach:

// Initial setup
const referenceObject = this.cameras.main;

this.scale.on('resize', (gameSize, baseSize, displaySize, resolution) => {
    const width = gameSize.width;
    const height = gameSize.height;

    // Recalculate positions and scales based on reference object
    gameObject.x = referenceObject.width / 2;
    gameObject.y = referenceObject.height / 2;
    gameObject.setScale(referenceObject.width / 1000);
}, this);

My Questions:

1. Is there an existing mechanism or pattern in Phaser 3 that can help automate this process, reducing the manual effort required for resizing and repositioning game objects?

2. Are there any best practices or utilities within Phaser 3 that are specifically designed to handle dynamic scaling and positioning efficiently?

3. Would it be beneficial to create a plugin or helper function to manage these adjustments, or is there a simpler solution I'm overlooking?

[rexrainbow]

Here is a 3rd party solution. (Demo)