Highlighted

How to add black borders to screens wider than 16:9

New Here ,
May 21, 2018

Copy link to clipboard

Copied

I am trying to make my app look good on galaxy s8 which has screen aspect ratio 18.5:9.

My game is made for 16:9 and i would like to display it with black dorders on smartphones that have this very wide screens.

Is there any way in AIR to make that happen or maybe ANE that can fix it ?

I noticed that after instaling, app is forced in "full screen aspect ratio". Here is this option from galaxy s8 explained How to enable a full-screen size ratio in Galaxy S8

My old apps made with AIR dont have this issue they work perfectly fine on galaxy s8.

Thanks

TOPICS
Development

Views

678

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How to add black borders to screens wider than 16:9

New Here ,
May 21, 2018

Copy link to clipboard

Copied

I am trying to make my app look good on galaxy s8 which has screen aspect ratio 18.5:9.

My game is made for 16:9 and i would like to display it with black dorders on smartphones that have this very wide screens.

Is there any way in AIR to make that happen or maybe ANE that can fix it ?

I noticed that after instaling, app is forced in "full screen aspect ratio". Here is this option from galaxy s8 explained How to enable a full-screen size ratio in Galaxy S8

My old apps made with AIR dont have this issue they work perfectly fine on galaxy s8.

Thanks

TOPICS
Development

Views

679

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 21, 2018 0
Adobe Community Professional ,
May 21, 2018

Copy link to clipboard

Copied

You didn't ask about this, but if you ever plan on making the app work for iPhone, you're required to support the iPhone X 19.5:9 screen. Just having black borders doesn't count, the app would be rejected. An easy solution is to extend your background beyond the stage, and if you used the default stage scale mode of ShowAll, that extra background would show up on wider screens.

Is it possible your older apps were using a different scale mode than you're trying now?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 21, 2018 1
New Here ,
May 22, 2018

Copy link to clipboard

Copied

thanks for the tips

Right now i am using StageScaleMode.NO_BORDER to stretch SWF to screen width and cut out top and bottom parts.

But on wide screens it cuts too much.

So looks like i will have to adjust my design cos iPhoneX is widest shit on the market

Is there a way to detect which device is wider than 16:9 ? That way i could use NO_BORDER for tablets and 16:9 phones and SHOW_ALL for wide screen phones.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

No_Border works differently, but should still fill the screen. But, you want a stage size ratio that can cope with the range you want to support. I've previously used a 14:9 stage, and that's enough content to take care of a 16:9 or a 4:3 screen without cropping into it too much.

Sideline things never get revealed with No_Border, so, to support 19.5:9 the easiest solution is to have a stage that was, for example 1950x900, and where only the middle 1200x900 was important. The other 750 pixels would need to be background that it doesn't matter if the user never sees it, so that iPad users wouldn't miss out.

Buttons that need to be on the left or right edges of the screen can be positioned using code, to make them be on the edges on all screens.

You could make your stage be 16:9, so 1600x900 for example. Again, 1200x900 of that is what iPad users would see, and iPhone X users would see 1600x738 of the stage. That could be good enough.

If you did change to StageScaleMode.SHOW_ALL, or just remove any stage scale mode code (because showAll is the default anyway), then you would want a stage that is the width and height of the important content, and also have bits off the edges that might get revealed. That's the mode I generally use, and for an action game I would have a 16:9 stage that had extra content above and below for iPad uses to see. For a book like app, where I need them to see the whole of the vertical page (in a landscape app), I have the stage at 4:3, with extra content to the left and right.

I am currently updating an app that is that way, and so I will have to add in extra content to the left and right of the 16:9 stage, to cope with S8 and iPhone X.

From the sound of it, I think your best option to try first is a 16:9 No_Border stage, and see if the crop into the left and right on iPad, and top and bottom on S8 and iPhone X, are acceptable.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 1
New Here ,
May 22, 2018

Copy link to clipboard

Copied

Thanks for help.

Last thing, to position buttons in corners and on top i use:
Capabilities.screenResolutionX  and Capabilities.screenResolutionY  that would work on both iOS and Android and this new wide screens ?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0
Adobe Community Professional ,
May 22, 2018

Copy link to clipboard

Copied

There are some complications with the Android versions that can pop in and out of full screen. Amazon Fire HD is one example. But, it's a good starting point, and you could alter the graphics to work around the issue of which the button ends up only slightly cut off when the problem happens.

Here's how I get the width and height, for a landscape app:

private var screenwidth: int = Math.max(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

private var screenheight: int = Math.min(Capabilities.screenResolutionX, Capabilities.screenResolutionY);

I do it that way because phones and tablets use different orientations. screenResolutionX is the width of a portrait iPhone, or the width of a landscape iPad. My way gets around worrying about that.

Then when I need to calculate a button position I know the ratio of the device screen, and I know the width of the stage, and can something like:

yposition = stage.stageWidth * screenheight / screenwidth;

That's for showAll, it's a little harder with noBorder, you have to work out how much of the height or width of the stage is currently showing.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 1
dd410 LATEST
New Here ,
May 22, 2018

Copy link to clipboard

Copied

I am thinking i will do showAll for wide screen devices and draw missing backgrounds.
And for 4:3 and 16:9i will keep noBorder cos my code works there.

Thank again bro you helped me a lot.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 22, 2018 0