[Urgent] Cater for different mobile screen sizes and mask anything outside of the stage

[Shaun Michael K. Stone]

This is a real issue for me at the moment. See attached example. How can I make sure that everything outside the stage is not visible (masked). Also I would like to centre the stage instead of it starting from the very top left of the screen.

var gameWidth:Int = 1920;

var gameHeight:Int = 1080;

...

addChild(new FlxGame(

gameWidth, 

gameHeight, 

initialState, 

zoom, 

framerate, 

framerate, 

skipSplash, 

startFullscreen

));

Lib.current.stage.align = StageAlign.TOP_LEFT;

Lib.current.stage.displayState = StageDisplayState.FULL_SCREEN;

var fill:RatioScaleMode = new RatioScaleMode();

FlxG.scaleMode = fill;

FlxG.camera.bgColor = 0xff000000;

On my mobile that is 1080x1920 it fits the screen fine, but when I use an average tablet that has different screen dimensions I get the bit at the bottom. Annoying.

I was thinking of creating a rectangle layer after everything has been drawn so it is hidden underneath.

Thanks,

Shaun.

[Andrei Regiani]

You are actually using RatioScaleMode, this keeps the 1920x1080 aspect ratio for every device, creating black fringes.

Use instead FillScaleMode, it fits the whole screen, no black fringes. You just need to UPDATE this line:



var fill:FillScaleMode = new FillScaleMode();

Also import:

import flixel.system.scaleModes.FillScaleMode;

[Shaun Michael K. Stone]

I tried, but no use. Exactly the same problem. :(

When I removed this from Main, it seemed to have fixed centering of stage and applies outside masking:

if (zoom == -1) {

var ratioX:Float = stageWidth / gameWidth;

var ratioY:Float = stageHeight / gameHeight;

zoom = Math.min(ratioX, ratioY);

gameWidth = Math.ceil(stageWidth / zoom);

gameHeight = Math.ceil(stageHeight / zoom);

}

I then set zoom to 1 when passed in:

addChild(new FlxGame(

gameWidth, 

gameHeight, 

initialState,

1, 

[Andrei Regiani]

Try to run with this custom Game.hx: http://hastebin.com/avejexakar.scala

It will lock the height to 1080px (for any resolution, bigger or smaller), and will leave the width dynamic.