Skip to main content
dd410
Participating Frequently
May 22, 2018
Question

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

  • May 22, 2018
  • 1 reply
  • 1688 views

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

This topic has been closed for replies.

1 reply

Colin Holgate
Inspiring
May 22, 2018

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?

dd410
dd410Author
Participating Frequently
May 22, 2018

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.

Colin Holgate
Inspiring
May 22, 2018

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.