Corona SDK Content Scaling – Beginner Series Part 2

In the first part of this tutorial on Corona SDK Content Area we looked at how we could alter the settings in the config.lua file and set a resolution for the content area. We learnt that the coordinate system for Corona SDK is independent of hardware. In this part we will discuss how Corona SDK handles content scaling.

Corona SDK Content Scaling

So far, all seems well and simple but alas no, life just isn’t like that. Aspect Ratio, the suspicious brown item floating the pool, has been sent to cause us nothing but trouble. If all devices had the same aspect ratio we could simply set the width and height we wanted in the config.lua and be done with it safe in the knowledge that our screen would scale up and down and be perfect no matter what device*, but they don’t. So how can we handle this?

First let see some examples of aspect ratios. An iPhone 4 has a resolution of 960×640 which is an aspect ratio of 1:1.5, but and iPad Air has a resolution of 2048×1536 which is an aspect ration of 1:1.33. But we don’t really need to break out the calculator to spot that we have a difference.

Aspect ratio differences

The iPhone is longer compared to its width whilst the iPad is wider compared to its length. If we designed a screen to fit the aspect ratio of an iPhone but ran the app on an iPad this would be the result

iphone 4 aspect ratio

iPhone 4

iPad aspect ratio

iPad

See how the iPad version is all stretched.

Corona SDK Content Scaling Modes

First off, let’s try some things so that we can get a feel of what we are talking about. And it’s also a good time to introduce some programming concepts. Using the project that we created in the previous tutorial (or just create a new one, it’s all good) delete any code from the main.lua file and set the width and height values in the config.lua to 640×960. Next we are going to look at the build.settings file. Find where it says orientation and change the default and supported values to landscape. If you save now your Corona SDK simulator should flip onto its side and give you a landscape view.

Next we need a 960×640 image, so here is one

960by480 image

Or feel free to create your own, but make sure it is 960×480. Add this into your project.

Variables

In the first part of this tutorial I mentioned that I would teach Lua programming in context of doing something fun (well, sort of fun) and in context of the Corona SDK. I have a big problem with programming books; they are often huge and more likely than not take you through each concept of programming giving you nothing more that “Hello World” displayed on a console window or a webpage. Well that’s fine but it doesn’t need to be that way.

In the first part of this tutorial we displayed a box by typing one line

display.newRect( 160, 240, 50, 50 )

And that’s great, it did exactly what we want. Now, we are going to do something similar to display the image. Open the main.lua file and type

display.newImage( “eciphonespect.png”, 0, 0)

NOTE: if you created your own image or saved the above image with a different name then substitute that for  the name in quotation marks

You should be able to guess what we are doing. We are creating a new image using an image file eciphoneaspect.png and we are positioning it 0 on the x axis and 0 on the y. But, we don’t seem to have achieved the desired result

iphone background image

So what has happened here? The problem is the Anchor Point of the image is set to be the center. We are going to talk about Corona SDK Anchor Points more in a later tutorial but for now just understand that most things have them in Corona SDK and you can set them to be different depending on how you want to use the object. In our case we want the Anchor Point to be at the top left of the image, so how do we set it? To get the image to display we simply typed:

display.newImage( “eciphonespect.png”, 0, 0)

But how do we reference that object again? As things are we can’t. It’s been created, but how to we talk to it or give it instructions? This is where variables come in. A variable is like giving something a name that we can then use to refer to it. Change our existing code to this:

local background = display.newImage(“eciphoneaspect.png”, 0,0 )

If you save you will see that your Corona SDK simulator still displays the same image in the same position, the difference is that we have now given it a name of “background”. Now below the display.newImage line we are going to add the following:

background.anchorX = 0

background.anchorY = 0

image with achor set to 0

 

save and now our image should be set correctly.

Leave a Reply

Your email address will not be published. Required fields are marked *