Letterbox, it's not displaying the complete game

Solar2D General Questions/Discussion
#1

Hello, I have finished a game and while developing I have tested it on few real devices and some devices in simulator. I use ultimate config lua file. Now, I test the game in other devices in simulator (Kindle, iPhone 4, Nokia…) and I realise that small part of the game is not visible. It’s the part on the right side of the screen.

I have a button in top-right corner and it’s not visible at all.

What I did wrong?

Sorry, I am bad at explaining things in english, so I made two screenshots.

Correct

Wrong

#2

That looks more like zoomeven than letterbox.  With letterbox you would get black bars

https://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

What you will need to do is not absolutely position your UI elements.  Instead relatively position them based.

#3

I understand what is “letterbox” and what is “zoomeven”.

That’s why this is weird to me, I am definitely using letterbox, only “width” and “height” are different for different models.

        content =

        {           

            fps = 30,

            width = 360,

            height = 480,

            scale = “letterBox”,

            xAlign = “center”,

            yAlign = “center”,

            imageSuffix = 

            {

                ["@2x"] = 1.5,

                ["@4x"] = 3.0,

            },

        }

#4

try “letterbox” and not “letterBox”

#5

I have tried and the result is the same as before.

#6

letterbox will always fit your content on screen.  Are you scaling any display groups in code?

Also what does it look like with just this?

    content =

    {

        width = 320,

        height = 480,

        scale = “letterbox”,

    }

#7

Are you Build and chose Copy To Device? 

I have your same problem.

But I Build and chose Do nothing and copy to Device with XCode it’s WORK !!

Try.

#8

Hi @clarusgames,

You mentioned above you’re using the old “ultimate config”. That’s not “true letterbox” in its most pure form, which is what I use (pure letterbox is beautifully predictable and I always get what I expect to get).

Brent

#9

Can you post your entire config.lua?

The whole idea behind the “Ultimate config.lua” tutorial and it’s “Modernized” version was to make sure that 0, 0 is the left, top of the screen and that display.contentWidth, display.contentHeight is the right, bottom corner. This works for some games, but not for others. It’s easier to explain the primary situation where it’s not the best choice.  Take a game like Angry Birds, regardless of the device the sling shot and the distance to the pigs has to be the same regardless of the device you’re on. You can’t place the sling shot 50 pixels from the left edge and you can’t place the pigs 50 pixels from the right edge. Doing so would make the game play differently since you would have to shoot your bird a different distance on each device.

Regardless of your config.lua, when you have different shape devices, some of the screen is either going to be off-screen or you are going to have black bars filling the empty space.  Most people will define a fixed content area that’s 320x480. They will make the background 360x570. On phones that are basically 16:9 devices, 40 points of content area (360-320) will be cut off the sides. When you’re on an iPad you will get the full 360px but you are going to loose 90 pixels on the top and bottom (570-480). You just don’t put anything important in those areas of your background since they are going to “bleed” off the screen. 

You then use display.actualContentWidth and display.actualContentHeight to get the real edges of the bottom and right sides of the screen and use display.screenOriginX and display.screenOriginY to get the left and top sides of the screen.

Using “letterbox” assures that when you change your device’s screen shape something’s either going to get cut off or you’re going to get black bars. zoomEven forces part of the screen to be cut off.

Rob

#10

Thanks Rob, that’s helpful. 

#11

My game has always built full screen onto my iPhone.  It’s full screen on the simulator.  My iPhone 7+ suddenly this weekend on a new build of the app is displaying with black bars on top and bottom of the game.

How to fix this and why the sudden change in corona build behavior?

Erik 

#12

Hi @erikpmr1,

Can you please install any of the Corona sample apps onto your iPhone 7+ and see if the same thing happens? You can choose anything from the Corona application directory in the SampleCode sub-folder.

Thanks,

Brent

#13

Interestingly, the sample code plays full screen.

Another unusual thing that just started happening is, when the app icon is pressed to start the game it enlarges to full screen and then the splash screen appears.

Any ideas?

Again, it looks fine in the simulator.

Erik

#14

Hi Erik,

Most likely, you didn’t include or reference the launch screen file/setup fully or properly. See this page/section for details:

https://docs.coronalabs.com/guide/distribution/buildSettings/index.html#ios-launch-screen

Note that you can include the basic (default) file we provide initially, until at some point you may want to create your own custom one, which is outlined here. Also, note that you have to reference the file within your “build.settings” file as outlined in that same section.

Brent

#15

I figured it out.  

My fault.  I had moved some graphical assets into their own folder and thought I adjusted all of the programming to accommodate that move (added “GFX/” to the beginning of the file names to point to the folder I placed them in.)  Apparently, I moved something I shouldn’t have (not sure what).  Thankfully, I had backed up my program and went to a version from prior to the problem.  Then, I moved the graphical assets in smaller groups to see if I could figure out what I had moved improperly.  Fortunately, everything works perfectly again.  Unfortunately, I could not figure out what I had moved to cause this, in hopes of preventing it from reoccurring.

Thanks for your help.  As is typical, it’s the programmer’s fault. 

#16

That looks more like zoomeven than letterbox.  With letterbox you would get black bars

https://docs.coronalabs.com/guide/basics/configSettings/index.html#contentscaling

What you will need to do is not absolutely position your UI elements.  Instead relatively position them based.

#17

I understand what is “letterbox” and what is “zoomeven”.

That’s why this is weird to me, I am definitely using letterbox, only “width” and “height” are different for different models.

        content =

        {           

            fps = 30,

            width = 360,

            height = 480,

            scale = “letterBox”,

            xAlign = “center”,

            yAlign = “center”,

            imageSuffix = 

            {

                ["@2x"] = 1.5,

                ["@4x"] = 3.0,

            },

        }

#18

try “letterbox” and not “letterBox”

#19

I have tried and the result is the same as before.

#20

letterbox will always fit your content on screen.  Are you scaling any display groups in code?

Also what does it look like with just this?

    content =

    {

        width = 320,

        height = 480,

        scale = “letterbox”,

    }