Problem with Ultimate Config.lua and Image scaling for iPad devices

Hello,

Please can someone help me? I have a problem with the scaling of images on iPad Air/ Pro and Mini. The images are currently appearing too big for the screen.

attachment-8884503861213442191IMG_8461.P

I have looked at the most recent updates I can find on config scaling images and I have tried using 800 * 1200 ratio as well as doing a device check for iPad devices and changing the ratio to 360 * 480 but nither came close to working. Here is my current config in my config.lua:

local aspectRatio = display.pixelHeight / display.pixelWidth application = { &nbsp; &nbsp;content = { &nbsp; &nbsp; &nbsp; width = aspectRatio \> 1.5 and 320 or math.ceil( 480 / aspectRatio ), &nbsp; &nbsp; &nbsp; height = aspectRatio \< 1.5 and 480 or math.ceil( 320 \* aspectRatio ), &nbsp; &nbsp; &nbsp; scale = "letterBox", &nbsp; &nbsp; &nbsp; fps = 60, &nbsp; &nbsp; &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@2x"] = 1.5, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@4x"] = 3.0, &nbsp; &nbsp; &nbsp; }, &nbsp; &nbsp;}, &nbsp;&nbsp; }

The ratio works fine for all phone devices I’ve tested on and older tablet devices also worked fine so it only the above mentioned devices that I’ve had any problems with. Please can anyone help with this?

Many thanks

Kind Regards

Liam

https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Instead of “scale = “letterBox””, try ‘adaptive’.

Hi All,

Thank you for the responses. Unfortunatlety I’ve already tried the two above mentioned solution and sadly neither prevailed. Thank you though for your help and apologise I should have mentioned in my first email I had tried ‘adaptive’ and the scale ratio approach mentioned in the above article. I’ve pretty much exhausted all the possible ratio information I found in the most general stuff on config, sadly at this point I think the problem I’m having is mostly likely a more recent problem then most of the documents on config and has arisen because of the new devices been released by Apple that don’t seem to like the scaling methods used previously. I could be wrong but just from the experience I had with iPad and iPad retina, I never noticed at the time any problems with scaling images with the above ratio check the same for iPhone 6 of iPhone 6 Plus, its only the iPad Air, Pro and Mini that aren’t liking me at the mo. Thank you everyone for your help, if any one has any more possible solutions I’d be very greatful?

Many thanks

Kind Regards

Liam

If your images are going off screen, that is it is appearing too big, try this:

local screenHeight = display.contentHeight - screenTop * 2

local screenWidth = display.contentWidth - screenLeft * 2

myImage.width = screenWidth

myImage.height = screenHeight

This will make your image to appear of the screen area irrespective of any device.

Hi  akashkhatkaler10,

Thanks for the post, unfortunately I’m already using the above mentioned in main and even with that in place when using the app on the above mentioned devices the images still don’t fit the screen. It’s a bit worrying really as I’m at a complete loss as how to resolve this one. 

\_G.totalWidth = display.contentWidth-(display.screenOriginX\*2); \_G.totalHeight = display.contentHeight-(display.screenOriginY\*2); \_G.leftSide = display.screenOriginX; \_G.rightSide = display.contentWidth-display.screenOriginX; \_G.topSide = display.screenOriginY; \_G.bottomSide = display.contentHeight-display.screenOriginY; &nbsp; &nbsp;

Thank you though for having a stab at it, cheers.

Kind Regards

Liam

try using display.actualContentHeight and display.actualContentWidth

Post your code for more info where you are getting problem

The ultimate config.lua is designed to avoid having to constantly add display.screenOriginX/display.screenOriginY in positioning objects and to assure that display.contentWidth always equals display.actualContentWidth. This assures that the top, left will be 0,0 and the bottom right will be display.contentHeight, display.contentWidth on every device.

It really has nothing to do with scaling. I’ll address that in a bit.

When you tell Corona to create a content area that’s 320 x 480 or whatever, you’re saying 0, 0  is the top, left of that box.  That makes display.contentHeight, display.contentWidth bottom, right.  But very few devices today are the same aspect ratio (1.5:1 the same as 4x6 photo).  Most phones are HDTV shaped 16:9 or 1.7777778:1.  That means that are areas that are on screen that are outside of that 320x480 box. I’ll use an iPhone 5 to illustrate. Its a 640x1136 device, but when using 320x480 in config.lua, you have 320 x 568 content points to work with. 568 is 88 points bigger than 480. 44 of them will be on top (portrait apps) or to the left (landscape apps). I’m going to continue this assuming a landscape app since that’s the OP’s screenshot.  In a normal config.lua, The actual top left of the screen would be X = -44, Y = 0. The bottom right X would be 568 and Y = 320.  display.contentWidth would return 480, display.actualContentWidth would return 568.  The config.lua you’re using would the left, top be 0,0 and the right, bottom 568, 320. With the standard config.lua display.screenOriginX =  -44, display.screenOriginY = 0

Enter an iPad, it’s a 4:3 format (old school TV) or 1.25:1.  Given a content area of 320x480 (standard config.lua), the actual content area for a landscape iPad becomes 480 points wide and 360 points tall.  Now the left top is 0, -20 (360 - 320 = 40, half on top half on bottom) and the right bottom is 480, 360.  Now screenOriginX is 0 and screenOriginY = -20. But with your config.lua, you’re guarenteed of getting left, top 0, 0 and right bottom, 480, 360

None of this has anything to do with your backgrounds.  Before we get to the background you have to understand that regardless of the config.lua, on a phone you have extra area on the sides. On an iPad and some other tablets, you have extra area on top/bottom of the screen that you background needs to cover. These are called “bleed” areas since they will fall off the screen. To make a generic background that works on all devices, it needs to be 570 x 360. The 570 is similar to the iPhone 5’s 568 points but other Android devices actually works out to 570. This width will cover your 16:9 devices. The 360 covers the iPads. The iPads will loose 45 pixels outside the 480 content area. The HDTV phones will loose 20 points top and bottom. They will be off screen.  Generally you don’t want critical art in these areas. If you have UI elements that need to be in the corners or near the edges, they should be separate graphics that can be independently positioned around the edges/corners.

Now for scaling. No modern device today uses such a small content area as 320x480. Both Apple and Google highly suggest that we continue to use 320 points in our apps.

Since you have this in your config.lua:

&nbsp; &nbsp; &nbsp; imageSuffix = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@2x"] = 1.5, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["@4x"] = 3.0, &nbsp; &nbsp; &nbsp; },

For a config.lua of 320x480 + the aspect ratio adjustments, any images loaded at their normal size will be used on devices that go up to 480 points wide (config.lua is always referenced in portrait mode). From 480 to 959 pixels, you get your images with an @2x suffix. For devices  960 or greater it will use the @4x images.

For this to work, you have to use display.newImageRect(“yourbackgroundimage.png”, 570, 360) and let Corona scale the image for you. You can’t use display.newImage() it ignores the @2x and @4x images. It will grab your 1x image and then you have to stretch it to fit which will lead to blurry images if you size it up too much.

Now if you use 800x1200, then screens up to 1200 px wide will get the 1x images, 1200 to 2400 px will get @2x images and so on.

And for games, we do not recommend “adaptive”. It’s too much work to build both a 320x480 and 768x1024 game in the same code base.

Hi Rob,

Thank you for your post, apologise for the delay in responding. Thank you for breaking that down for me, was a real big help.  Makes a lot more sense to me now. Since reading your post I’ve managed to resolve the problem for the most part however I’ve come unstuck with the graphics.newImageSheet. It unfortunately doesn’t have the features from display.newImageRect which would allow me to set the screen height and width. Please can you help as my sprite images are still proving problematic when they are displayed on the iPad?

Apart from that though I have set the config 360X570 and used display.actualContentWidth for iPad devices and there been a remarkable improvement on how the app appears on iPad devices as well as on phone devices.

Many thanks

Kind Regards

Liam

I would still set your config.lua to 320 and 480.

Can you post your image sheet code?

Hi Rob,

Thank you for the message, here the sheet code for the start button and then the sheet code for the score button show in the picture at the top. Both START and SCORE are animated to have a wavy effect to replicate the behaviour of seaweed:

&nbsp; &nbsp;local options = {};&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; options = { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = 327, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = 221, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numFrames = 4, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetContentWidth = 1308,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetContentHeight = 221&nbsp; &nbsp; &nbsp; }; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; local startButtonSheet = graphics.newImageSheet("IMG/startButton.png", options);&nbsp; &nbsp; &nbsp; local startButtonAnim ={ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{name = "wave", frames = {1,2,3,4}, time = 700, loopCount = 0}, &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; startButton = display.newSprite(group, startButtonSheet, startButtonAnim); &nbsp; &nbsp; startButton.x,startButton.y = centerX + 225,centerY + 25; &nbsp; &nbsp; startButton:setSequence("wave"); &nbsp; &nbsp; startButton:play(); &nbsp; &nbsp; startButton:scale(0.3,0.3); &nbsp; &nbsp; options = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width = 327, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height = 221, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; numFrames = 5, &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetContentWidth = 1635,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; sheetContentHeight = 221&nbsp; &nbsp; &nbsp; }; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; local scoreButtonSheet = graphics.newImageSheet("IMG/scoreButton.png", options);&nbsp; &nbsp; &nbsp; local scoreButtonAnim ={ &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{name = "wave", frames = {1,2,3,4,5}, time = 800, loopCount = 0}, &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; scoreButton = display.newSprite(group, scoreButtonSheet, scoreButtonAnim); &nbsp; &nbsp; scoreButton.x,scoreButton.y = centerX + 225,centerY + 65; &nbsp; &nbsp; scoreButton:setSequence("wave"); &nbsp; &nbsp; scoreButton:play(); &nbsp; &nbsp; scoreButton:scale(0.3,0.3);

Kind Regards

Liam

What you’re doing seems to be right. Can you provide a better description of what you’re seeting and what you expect to see? Are you getting errors, what’s not working?

Rob

https://coronalabs.com/blog/2012/12/04/the-ultimate-config-lua-file/

Instead of “scale = “letterBox””, try ‘adaptive’.

Hi All,

Thank you for the responses. Unfortunatlety I’ve already tried the two above mentioned solution and sadly neither prevailed. Thank you though for your help and apologise I should have mentioned in my first email I had tried ‘adaptive’ and the scale ratio approach mentioned in the above article. I’ve pretty much exhausted all the possible ratio information I found in the most general stuff on config, sadly at this point I think the problem I’m having is mostly likely a more recent problem then most of the documents on config and has arisen because of the new devices been released by Apple that don’t seem to like the scaling methods used previously. I could be wrong but just from the experience I had with iPad and iPad retina, I never noticed at the time any problems with scaling images with the above ratio check the same for iPhone 6 of iPhone 6 Plus, its only the iPad Air, Pro and Mini that aren’t liking me at the mo. Thank you everyone for your help, if any one has any more possible solutions I’d be very greatful?

Many thanks

Kind Regards

Liam

If your images are going off screen, that is it is appearing too big, try this:

local screenHeight = display.contentHeight - screenTop * 2

local screenWidth = display.contentWidth - screenLeft * 2

myImage.width = screenWidth

myImage.height = screenHeight

This will make your image to appear of the screen area irrespective of any device.

Hi  akashkhatkaler10,

Thanks for the post, unfortunately I’m already using the above mentioned in main and even with that in place when using the app on the above mentioned devices the images still don’t fit the screen. It’s a bit worrying really as I’m at a complete loss as how to resolve this one. 

\_G.totalWidth = display.contentWidth-(display.screenOriginX\*2); \_G.totalHeight = display.contentHeight-(display.screenOriginY\*2); \_G.leftSide = display.screenOriginX; \_G.rightSide = display.contentWidth-display.screenOriginX; \_G.topSide = display.screenOriginY; \_G.bottomSide = display.contentHeight-display.screenOriginY; &nbsp; &nbsp;

Thank you though for having a stab at it, cheers.

Kind Regards

Liam

try using display.actualContentHeight and display.actualContentWidth

Post your code for more info where you are getting problem