Phaser: Feature Request: A rectangle object to represent visible window under scale manager

Created on 27 Feb 2019  ·  2Comments  ·  Source: photonstorm/phaser

Here is a demo of putting 4 game objects align left-top/right-top/left-bottom/right-bottom corners of visible area.

To put game objects align visible area, user should know this bounds of visible area. Mostly this visible area could be represented via {x:0, y:0, width: baseWidth, height: baseHeight}.
But in ENVELOP scale mode, this visible area might be offseted (i.e. x, or y might not be 0), and the width and height might not be baseWidth and baseHeight.

In this demo, I use this function to calculate this visible area --

var getViewport = function (scaleManager, out) {
    if (out === undefined) {
        out = new Phaser.Geom.Rectangle();
    }
    var bounds = scaleManager.canvasBounds;
    var scale = scaleManager.displayScale;
    var autoCenter = scaleManager.autoCenter;

    out.x = (bounds.x >= 0) ? 0 : -(bounds.x * scale.x);
    out.y = (bounds.y >= 0) ? 0 : -(bounds.y * scale.y);
    out.width = (bounds.width * scale.x) - out.x;
    out.height = (bounds.height * scale.y) - out.y;
    if ((autoCenter === 1) || (autoCenter === 2)) {
        out.width -= out.x;
    }
    if ((autoCenter === 1) || (autoCenter === 3)) {
        out.height -= out.y;
    }
    return out;
};

Is it possible to add this rectangle of visible area into scale manager? Or a custom plugin is a better solution?

💖 Feature Request 🖥️ Scale Manager

Most helpful comment

I agree we need this. The question is if it should be per Scene based on the cameras? Or is a single global rectangle enough?

All 2 comments

I agree we need this. The question is if it should be per Scene based on the cameras? Or is a single global rectangle enough?

The use-case of this visible area rectangle is setting position of UI game objects (i.e. scroll factor is 0), imo. Therefore a single global rectangle in scale manager might be enough.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

rootasjey picture rootasjey  ·  3Comments

sercand picture sercand  ·  3Comments

frob picture frob  ·  4Comments

JarLowrey picture JarLowrey  ·  4Comments

halilcakar picture halilcakar  ·  4Comments