Black bars are driving me crazy - aspect ratios and resolutions

0 favourites
  • 8 posts
From the Asset Store
Adjusting the game screen for different resolutions (Letterbox scale)
  • Good evening!

    I'm testing my app on my phone.

    It is a Huawai P30 Pro which has a screen resolution of 1080 x 2340 , which is a 19.5:9 aspect ratio.

    If I put this exact resolution into the Construct 3 editor as a viewport size it tells me that it is an aspect ratio of 6:13.

    When I then enter fullscreen mode in the remote preview in chrome I get two lines about 25 pixels width on the left and right of the screen. Why is that?

    I tried scale inner, scale outer. I tried a wider viewport, a thinner viewport. A different aspect ratio. A greater layout width, a smaller layout width. I tried having the viewport width wider than the layout widht, thinner than the layout width. And I tried many many things more.

    No matter what I do it will have bars somewhere! And no I do not want letterbox scale as that will always get me ugly bars which are unacceptable in mobile apps.

    This is making me mad as it should generally be so simple.

    It would be soooo useful to have an example on this in the Beginner or Intermediate Examples section inside the editor. And yes I already read this many times and, although it is useful for having a general understanding, it lacks of examples.

    Just a small project containing some text which supports multiple screen sizes without being cut and without bars, that would be so valuable and I'm sure I'm not the only one out there.

    What am I doing wrong? Any advices?

    Thank you dear reader!

  • The browser address bar takes up some of the vertical screen space, which also changes the aspect ratio of the remaining space.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • just a note: 1080/2340 = 6/13 = 9/19,5. so those ratios are the same

    to avoid any black bars you should normally use 'scale outer' and 'cover', and a large layout and scroll to the center of it.

  • eleanorjmorel Thanks I will look into this!

    Ashley Yes, but this persists even in fullscreen mode where is no bar.

    fredriksthlm Thanks for the explanation. Now I changed the layout size to 10000 x 19200 and the viewport size to 4320 x 9360. On start of layout I scroll to LayoutWidth/2, LayoutHeight/2.

    But the bars on the side have still the exact same size as before. Am I stupid or something?

  • The huawei p30 pro has a notch. Have you set the viewport fit property to cover?

  • Yes I did that. What is strange is following behavior:

    When I start the remote preview it opens in the android chrome browser and is without bars but not fullscreen.

    When I enable fullscreen I have two bars (red) left and right and no browser bar on the top.

    When I then press back to "close" the fullscreen mode the borders on the sites will disappear but it will still be kinda fullscreen. But the status bar will be visible on the top.


    Holy moly. Sorry for that gigantic pictures. Took them from my phone.

  • I'd try a different phone and/or browser, and look into filing a bug report on github then so they can proceed with a more thorough investigation.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)