How to place game objects align left/right bounds of visible game window in ENVELOP scale mode?

#1

In ENVELOP scale mode, the visible game window might smaller then the visible game window defined in game config.

I would like to place game objects (i.e. UI objects) align left/right bounds of visible game window. The left/right bounds will be changed when resize browser, in ENVELOP mode.

Here is a demo of ENVELOP scale mode. You could see the world position of touch/mouse pointer at each corner of visible game window.

But I could not find any propertie about the world position of visible game window.

#2

Here is a possible solution, the rectangle of visible window could be calculated via scene.scale.canvasBounds and scene.scale.displayScale.

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;
};

Here is a simple example of aligning game object at lett-top and right-top of visible window.