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

Getting Started Newbie Questions
#21

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:

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

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.

#22

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

#23

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

Can you post your image sheet code?

#24

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:

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

Kind Regards

Liam

#25

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

#26

The link is in 404 error not found.

#27

The link is in 404 error not found.