Okay, let me try to provide a little more clarity and what’s tripping you up.
Let’s start with an assumption (probably a bad one that’s hung on since iPhone 3/4 days). The most commonly defined content area has an aspect ratio of 1:1.5. In the old days (and this still holds true for a lot of things today), a phone was 320px wide and 480px high. 480 / 320 = 1.5, so the content area is 50% taller than it is wide (I’m doing everything in portrait). To this day, Apple still considered phones to be 320 points wide. Web Browsers treat all portrait phones at 320px wide. Ad provider banner ads are 320x50px even though the physical devices have much higher resolutions. These virtual points will be with us for a very long time. But I digress. The common content definition is usually 1.5x bigger than the width.
Why that value? Well it fits on both tablets which tend to be more square and it fits on phones which are more taller and thinner. The area outside of the content area is known as the “letterbox” area. On phones, you will have more pixels on the top and bottom. On iPads the extra space is on the sides. There is a very important tutorial that you need to read that helps explain this part more in depth: https://coronalabs.com/blog/2018/08/08/understanding-content-scaling-in-corona/
I’m not going to repeat the stuff in the tutorial. I want to stay focused on dynamic images and programming the config.lua and creating your images.
You are using the Samsung S5 skin (1080x1920) and the iPad Pro (2048x2732). If you look at the width, the iPad Pro is 1.89 x the Samsung’s screen. The iPad is a more square tablet, so instead of comparing widths to get the scale difference, Corona uses the height, in this case 2732/1920 = 1.42x. The content area is going to scale to fit the iPad based on the height, the phone based on the width. This is a weird quirk, but it makes sense when you consider trying to make your defined shape fit different shaped screens.
Since the tablet vs. phone is in effect here. If you used the 1.5 value as I suggested above, then it’s not going to work because of this issue. If you adjust the config.lua to 1.4 instead of 1.5 it will work as it should.
Consider this:
-- -- For more information on config.lua see the Project Configuration Guide at: -- https://docs.coronalabs.com/guide/basics/configSettings -- application = { content = { width = 1080, height = 1920, scale = "letterbox", fps = 60, imageSuffix = { ["@2x"] = 1.4, }, }, }
And our main.lua:
-- Your code here local title = display.newImageRect("title.png", 540, 120) title.x = display.contentCenterX title.y = 150
I created two title images - title@2x.png that’s 1080x240 (2x the base)
and title.png that’s 540x120:
Each image is labeled as being normal or @2x so you can visually change it.
With all this information, conduct two experiments. Set the content area to 1.5x of the width or 1620. This will cause the scaling to be more like 2048/1620 or 1.68x. Now change your suffix setting in config.lua between 1.6 and 1.7 and you can see in one case it will load the @2x image on the iPad and in the other it wont. Since you’re content area is much taller (1.7888 aspect ratio), you have to divide the 2732/1920 is 1.42x, so if you want the @2x images to load on the iPad Pro, you have to set the scale to 1.4 in config.lua. Try changing it between 1.4 and 1.5 and see the difference.
Why did I make the 1x image 540px wide? Well that’s half of 1080, so the title will take up 50% of the screen, which feels right for a title. But on the iPad, you have that extra letterbox area (2048 - 1080 = 968 extra pixels) so even the @2x image is going to look small.
There is no “right” or “wrong” way to setup up the config.lua. You set it up to work for you. But if I would make one recommendation if you want to support both iPads and tall phones is to make that content area closer to 1.5x instead of 1.788x. In other words, width 1080, height 1620. and use the tutorial I linked to above to help you deal with positioning things into the areas outside of the defined content area.
Rob
