Is corona cannon still a good reference for beginners.

Woah, thanks for the in-depth explanation of pros and cons about scaling and config.lua, i did check out your article before posting this topic, it helped me understand scaling perfectly, as it didn’t thoroughly cover on how to deal with an app suitable for both normal aspect ratio devices and newer extreme aspect ratio devices, i felt the need to ask around

Since you mentioned that you are working on a side-scrolling app. I’m curious whether you are using an image for a background or in-engine rendering. If you are using images for background, how do you plan on making it work on both iPhoneX and iPhone5 screens.

I apologize if i seem to be pestering you, but i want to know how each of you are dealing with newer screens as well as making it look good enough in the older ones.

One of the ways i think of is using a 360*695 (iphoneX) resolution image or multiples of it.

Problem is there will be a large portion(hidden) of image will bleed out, which will be unused in Iphone5.

Other is to have two images according to the aspectRatio of these devices and use it dynamically.

Which way seems to be the better one. Please reply

Thank you

Are you planning on creating an app with a static view or will you have some camera control where the background moves around? The answers really change a lot depending on your goals.

I personally prefer the route of least amount of work paired with most universal solution. This means that designing my apps with bleed in mind is essential. You seem to have misunderstood me earlier, as my solutions work on all aspect ratios and resolutions.

Creating full screen sized background images that fit every aspect ratio on iOS is a lot of hard work. Trying to do the same for Android is an infeasible task. Now, whether you create one image or multiple versions of an image for different aspect ratios, you’ll run into the bleed issue in either case. It’s just a matter of where the bleed is applied.

For example, if you were to create two images: 960x640px for iPhone 4S and 1136x640px for iPhone 5. If those images are used as the background and they are centered on the screen, then they cover the entire screen on their respective devices. However, when you create that 1136x640px image in your image editor, you have to fill those extra regions on the sides with something that doesn’t exist on the smaller image. Or, in other words, this would be the bleed area. If you just ignored the 960x640px image and only created the larger image to begin with, then Corona would handle that bleed instead of you in Photoshop.

Ultimately, there are as many solutions managing different aspect ratios and resolutions across devices as there are developers, so I’ll just mention a few.

If you have just a single static background, then one approach would just be to create a large image that fits within every possible display resolution that you target, but this might be a lot of work and you’d do so knowing that some parts of the image would bleed out on every device. This means that you’d have to create your image with the safe area in mind, i.e. the area that wont bleed out. You’d want to place all of your gameplay elements within the safe area to ensure that they will be visible regardless of the device.

Alternatively, you could also create the background out of multiple images. This becomes almost necessary if you want a non-static background. Take a look at these two images from Jetpack Joyride (Image 1 & Image 2). Image 1 is a screenshot of the game on a phone and image 2 is on a tablet. The background is simply a series of images placed after one another on the x-axis. All of those images are created tall enough so that they accommodate tablets. On more narrow phone devices, those top and bottom areas simply bleed out. Knowing this, the developers didn’t place any gameplay related stuff there and it doesn’t matter that it gets cut off. The UI, i.e. the distance and coin counters and the pause button are simply attached to the top left and top right corners of the screen, so they are resolution independent.

Creating backgrounds like this means that some parts of your images/background will be cut out, but it will be the non-essential parts. If you opened the game on iPhone X, then you’d simply see additional images (tiles) on the x-axis. I also included iPhone 4s and iPhone X screenshots of one endless level select module that I’ve created. It is still using the prototype images, but you’ll get the point. In this case, I’ve locked the ground to the bottom of the screen and the clouds to the top of the screen. If I were to run this on a tablet, then the only thing that would get extended is the sky itself, so in this particular case, nothing would technically bleed out. This design is also future proof, unless we get those banana screens that Nick was talking about :stuck_out_tongue:

I hope this wall of text helped you out.

Bravo, xedur. That was a clear explanation, man this is what i wanted to know. I was totally confused and afraid that i might be doing something wrong. Especially with these devices with extreme screens popping all over the place. I hope these bannana screens doesn’t get developed.

A big thanks to all of you prominent members of corona community. I have gone through the forum and found you guys seem to have exceptional and clear replies. Especially Rob.

Thanks again Xedur, for posting couple of images from the jet pack game, and explaining the design.

I agree with @XeduR, people don’t understand bleed very well. You make your background big enough to fit all the screens you want to support. Used to 16:9 screens were the tallest/narrowest form factors while 4:3 was the most square format.  I’m stuck in the old 320x480 content area. To make a background fit both 16:9 and 4:3, you need a 360x570 (portrait, or 570x360 landscape) screen. With the Samsung Galaxy S8/9 at 2:1 and the iPhone X family at 19.5:9 being the current extremes, that formula becomes backgrounds that are 360x694 (portrait or 694x360 landscape). If your background is that big, it will fit on all screens. If you use something other than 320x480 for the content area, you, of course, would need to recalculate these:

Assuming portrait:

imageHeight = 19.5 / 9 * contentWidth

imageWidth = contentHeight / (4 / 3)

Now how do you make a bleedable background? Consider this:

It might be tempting to build all those UI elements into the background like this:

But in the game, this is actually made up of 7 images:

  1. the gradient which is full screen using the above formula

  2. the gray silhouette skyscrapers. There are two-three versions that are wider than the widest screen and I stack them end to end and use an enterFrame listener to move them.

  3. the foreground buildings. Like the more distance buildings, there are multiple of them wider than the widest screen.

4-7: These are the UI elements that I draw my lives, health, score and other UI elements. They get positioned on top of everything else using edge positioning techniques so that on a widescreen the health and score are further apart. On an iPad they will be closer to each other, but maintain the same distance from the left and right edges.

This lets you constuct the total UI and make the different screen sizes work.

I totally understood now rob, thanks for giving a clear steps on how to do it. I’m trying to create a demo project on how these things work. Maybe i will post the link once its done. And one more thing that you mentioned in the article, which is to use the display.safe* API’s.

I’ll try to incorporate those and see how it works on positioning the UI Elements on different devices.

Thanks a lot for giving a clear picture on how i should be going with the design.

I went ahead and created the demo project. Its on github.

         https://github.com/MrQile/CoronaScalingDemo.git

Can anyone take a look and see if i have done it right.

Thanks

You seem to have it!

Rob

Thanks for going through it.