Different Screen Widths

Getting Started Newbie Questions
#21

Awesome and I feel your pain.  There’s a reason I toggle between devices in the simulator early and often during development. :wink:  I’m actually glad to hear you’re reworking things.  I’m sure you’ll be much happier with the results when all is said and done.

To answer your other question the short answer is “yes” but there are a few gotchas to watch out for.  Your main code will largely remain the same.  Things get a little trickier when you start dealing with in app purchases, game centers, advertising, fonts, etc.  Corona has done a really good job documenting where the two platforms diverge and how to handle them.

#22

Can you post your config.lua?

#23

Yes Rob, it’s one I got from one of your tutorials.

local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
   content = {
   
      width = aspectRatio > 1.5 and 800 or math.ceil( 1200 / aspectRatio ),
      height = aspectRatio < 1.5 and 1200 or math.ceil( 800 * aspectRatio ),
      scale = “letterBox”,
      fps = 30,

      imageSuffix = {
         ["@2x"] = 1.3,
      },
   },
}

#24

Since config.lua is always thought of in vertical space (even though you have a landscape app), you want your app to always be 1200 points high, but you want the width to vary based on the shape of the device.  This way you won’t have to change anything size wise and side to side.  You will just get more real estate when you’re on a more square device.

I’m not going to work out the math, but something like:

local aspectRatio = display.pixelHeight / display.pixelWidth
application = {
   content = {
   
      width = math.ceil( 1200 / aspectRatio ),
      height = 1200 ,
      scale = “letterBox”,
      fps = 30,

      imageSuffix = {
         ["@2x"] = 1.3,
      },
   },
}

I’ve not tested it, but something like that might work for you.

#25

Thanks very much for the quick reply, on a Sunday too!

I will give that a try, it didn’t even cross my mind that the config could solve my issue.

B.T.W Could you give me an answer to the @2x question, when is it used exactly? Do I need it for Android devices?

Thanks Rob!

#26

Hi

I tried changing the config settings but it made the problem even worse still. I tried all sorts of different settings nothing helps.

The config I’ve been using based on the ultimate config, then the updated ultimate config since I started creating the game stated that the optimal screen width and height was 900x1425 for those settings. I’ve based all my graphics on this, over 300 of them, months of work.

Anyhow, the background images are not the issue here, even though a huge part of the background image is bleeding off the screen on some devices like the i-phone4 and kindle fire 7"

I’m still at a loss on how to solve the issue of fitting 11 buttons across the screen on square screens as apposed to wide screens.

My buttons are 121x121 pixels (121x11=1331) which fill the width of the screen, the reason for this is that on small high res screens any smaller than this makes them hard to touch accurately and hard to see.

So when I test the game on an i-phone 4 which I believe is 960 pixels wide the buttons overlap each other, not just the buttons but my score, pass & lives containers and many other elements throughout the game that I’ve made as big as possible so you can see them clearly on devices like smart phones with 4" screens.

It must be an issue with scaling, surely.

Take a look at this screenshot on the i-phone 4 as compared to the screenshot in my original post at the top.

screenshot2.jpg

#27

Can someone please help?

I’ve spent the day reading and reading everything I can find on the subject of image scaling.

From what I’ve read everything should be scaled up or down automatically, but the background image and all of my graphics remain the same size. The background image simply gets cropped, not stretched or scaled or zoomed, nothing.

All my images remain the same size so you get the squashed together problem in the picture above.

I’ve tried every scaling method in the config, letterbox, zoomEven, adaptive and zoomStretch. Nothing changes.

In case you’re wondering I am using display.newImageRect for ALL my graphics…

local background = display.newImageRect( “images/backdrop.jpg”, 1425, 900 )

local wheel = display.newImageRect(“images/wheel.png”, 500, 500)

Somebody surely must have come across this before, can you please help It’s driving me mad.

#28

In your new ultimate config do you use 1200 or 1425 for the height?  I’m counting ~10 tiles across the bottom of the screen and at 121 pixels each that implies your height might be set at 1200.

#29

Actually try setting the width in the code above to 1425 and see how that works.  Like I said I didn’t work out the math.

Rob

#30

I changed the height to 1425, which is the width in landscape and it works.

Now I have black bars top and bottom and everything is squashed vertically now instead?

#31

This seems quite odd but after tinkering around and changing both the height and width to 1425 it’s just about perfect, just a small black bar top and bottom on i-phone 4 which I could fill out by putting something behind it.

width = math.ceil( 1425 / aspectRatio ),
      height = 1425,
      scale = “letterBox”,
      fps = 30,

#32

Try setting your width to 900.  That should take care of things being squashed vertically.  You will have black bars on either the sides or top and bottom depending on the device’s aspect ratio but your game should be completely visible and maintain it’s aspect ratio across all the different devices in the simulator.

#33

Something’s not right.

You would think that setting the width to 900 would sort it out but it actually squashes everything vertically even more?

width = math.ceil( 900 / aspectRatio ),
      height = 1425,
      scale = “letterBox”,
      fps = 30,

at the moment the only thing I have in the build settings is…

settings =
{
    orientation =
    {
        default = “landscape”,
        supported = { “landscapeLeft” },
    },

So I can’t see that doing anything.

Like I said earlier, the best setting so far has been 1425x1425 which doesn’t make sense and it nearly works perfect in the simulator on all devices (except ipad and ipad retina which look terrible)

How can setting the the width and height the same come out alright on a wide screen?

#34

The math actually works out to 1422.2222 or so based on your original 800 point wide area.  800 * 1.5 (the default ratio that we tend to use) is 1200.  The screen shot you showed above shows you used a skin that’s from a 16:9 type device.  800 points (your base) * 16 / 9 means your width is 1422.2222  for the skin you used.  I saw your background was 1425, so I just rounded that off.

Since your game is designed to fit a landscape 1422 point device (i.e. the “height” in config.lua terms), you need to fix that side of your config.lua.   But because devices can have different aspect ratios and you don’t want letterboxing, you need to compute your height (i.e config.lua width) using the formula I provided.  This should give you 800 (if you plugin 1422 into both) on most phones which is what you designed for.  However for the 1.6:1 Android tablets, the 1.5:1 phones and the 1.25:1 iPad, you are going to end up with extra real estate.  You have to figure out how to manage that space.

If I were building your app, I would make sure the background would look well on the squarest device an IPad.  I would position all of the score boxes from the top just setting the .y to some distance from the top.  For the letters along the bottom, I would position them at .y - display.contentHeight - some distance.  That way they stay the same relative distance from the bottom.   The parts in the middle I would position with .y = display.contentCenterY + or - some relative distance from the center.   That way your UI will stretch or compress based on the shape of the device.

But your background has handle this. In other words you can’t build in frames for things into the background because things will move depending on the device.

#35

Thanks Rob and thanks J&J for your input.

That’s a lot to take in Rob.

So what you’re saying is that setting my height and width to 1422 will be fine but I will end up with some space top and bottom on some devices. So theoretically can’t I just make my background a bit bigger to fill the gaps?

I’m already positioning my score boxes as you suggested, I’m actually positioning the letters - (display.contentHeight*0.9) should I be doing it the other way - (display.contentHeight - y) , for example?

Thanks again Rob.

#36

Sorry, I meant setting “width = 900”, not “width = math.ceil( 900 / aspectRatio ),”.  That should take care of the scaling issues.  Next I’d try scaling up the size of the background image to cover the black bars you’ll get from the letterbox scaling.  It’s OK for the image to extend beyond the dimensions you set in config.lua.  The positioning might be a little tricky though.

For my own apps I use the same technique Rob mentioned.  Basing the coordinates off of the display coordinates has saved a lot of headaches for me. 

#37

@jandjstudiosllc, it’s important that he use 1422 because he needs to maintain the width on a landscape app.  The config.lua is always specified as if it’s a portrait app, which confuses this conversation because when we look at the screen shot the width is the long side but for config.lua the height is always the long side.  Since @QuizMaster’s graphics are designed for an 800x1425 pixel screen, we have to maintain that 1425 and allow the other side to vary.

@QuizMaster, you want your background to be bigger than the largest screen you’re likely to support.  In this case, the iPad is the greatest difference, so if you’re going to use 1422 as your fixed sized side, then you want 1422 / 1.33333 (it.s 1.25 when multiplying, 1.3333 when dividing). or 1067 would be the max the variable dimension would be.  So a background of 1425 x 1070 would bleed off screen just a little on most devices.  Be aware that most phones are 16:9 however I ran into a Samsung device once that didn’t count the soft button bar as part of the content area.  It ended up with a 1.825:1 aspect ratio which was thinner than expected and the background had position dependent items in it. 

Your use of display.contentHeight * 0.9 should still work.

Rob

#38

Thanks again!

This has been very educational and although it has created a lot of extra work from me at least I’m going in the right direction now.

I have 3 level screens that DO have a lot of items that are background dependent, there is no way around it without making over 50 backgrounds to replace the little words that light up when you touch it.

I was hoping to have this game out well before Christmas, I’m convinced it will be a huge hit and it’s totally one of a kind. Maybe I should get some help from someone like you and give you a cut of the profits! I only have a Windows PC right now so I can’t make i-phone versions of it yet.

Thanks again for taking the time to help me, it’s very much appreciated.

#39

In this case letterboxing might be the best solution.  A simple config.lua like the one below will preserve all of the content in the right location at the cost of having black bars on devices with a different aspect ratio.  You mentioned part of your background image is already bleeding off the screen on some devices so the black bars may not even be an issue.

Also, check out http://www.macincloud.com/ for your iOS development needs.  I do all of my development on a Windows PC and use them when I’m ready to start building for iPhones/iPads.

application = { content = { width = 900, height = 1425, scale = "letterbox"&nbsp; }, }
#40

Thanks J&J for the link to macincloud, I’ve had a quick look and bookmarked it.

I’ve only briefly looked at iOS on Corona because I have Windows, just a quick question - Does my main code remain the same?

Thanks for the advice with config but I’ve decided it’s worth the extra work resizing all my backgrounds and go with Robs solution.

Using Robs settings…

width = math.ceil( 1422 / aspectRatio ),
      height = 1422,
      scale = “letterBox”,
      fps = 30,

and making my backgrounds 1425X1070 they fit perfect on every device, I’m actually a third of the way through re positioning about a hundred images that are background dependent. What I did was to simply add and extra bit of sky to the top or grass to the bottom of my existing backgrounds preserving the center portion. Then I divided the extra 170 pixels gained by 2 and either move my overlayed images up or down 85 pixels. Works a treat.

It’s such a relief knowing that my game will look perfect on any device, I just wish I’d looked into this when I started it 8 months ago!