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?
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.
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?