Corona SDK Content Area – Beginner Series

Corona SDK is back in favour!

Some of you may have read my Unity 3D article where I confidently proclaimed that Unity was the only game development platform for me. Well, in many ways it still is. But didn’t some cheesy philosopher once state that we must be flexible like the willow? Maybe, but the point is that now Corona Labs has been bought by Fusepowered, and as Fusepowered’s business model is monetization it was a logical decision for them to offer Corona SDK for free. And as such it deserves revisiting.

For people who have no programming experience but want to develop apps for phones, Corona SDK is the perfect platform.

Corona SDK, the basics

Corona SDK is a multi-platform 2D development platform. Actually, that’s not entirely true, it’s not just a game development platform, it’s an app development platform (arguably you could also make business apps with Unity too). It’s true benefit is that you can achieve very complex things with just a few lines of code; to display an image is a simple as:

display.newImage(“imageName.png”)

That’s it! And not only that but you could release that on a variety of devices including Android, iPhone, Kindle etc.

The programming language that Corona SDK uses is Lua. Lua is used widely through the gaming industry and is incredibly simple to use. I will go over Lua in a separate beginners tutorial, but sometimes I find that trying to learn a programming language outside of the context of something fun can be a bit boring, so I will explain things as we do various exercises.

Corona SDK IDE

For those of you that do not know what and IDE is, it is an Integrated Development Environment. It’s simply an application that can make software development a little easier by offering features such as code completion, debugging etc. Well corona has many commercial IDE’s but it also has many free ones. If you take my advice then all you need is Sublime Text and the Corona SDK package (Corona Labs have called this combination Corona Editor). It’s can be obtain from here:

https://coronalabs.com/products/editor/

Once you have that installed we are ready to go. Erm… except you may also want to create an account with Corona Labs and install Corona SDK. This can be done from here:

https://coronalabs.com/

Got it all installed? Ok, let’s move on.

NOTE: In later tutorials I will introduce you to a commercial IDE called Levelhelper 2 Pro.

Create your first Corona SDK project

Start Corona SDK and you should see a screen like this:

corona sdk opening screen

NOTE: If you had Corona SDK installed before Fusepowered made it freely available you will need to log out and log back in for the license to update.

Click on New Project:

corona sdk new project

For now just give it a name and leave everything else as is. Click on next. You will choose a location for you project, save it wherever you like.

You should be presented with a iphone type device. Click on the File menu and select Open Project in Editor. If you installed Corona Editor (Sublime) then it should open and present something like this:

corona editor

Corona SDK Content Area

We are going to learn by doing, by far the best way to learn. And we are going to start right at the beginning with Corona SDK Content Area. So what is the content area? Well, very simplistically it can be thought of as the screen, but as we will see it’s not quite as simple as that. First in Corona Editor open up the file called config.lua, you should see something like this:

config.lua

Notice the width and height values in the content section, those figures seem quite low when you consider the resolution of the latest phones of today? Well let’s try something. Open up the file main.lua and type:

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

Corona SDK: the code above draws a rectangle 50 wide and 50 high at 160 x and 240 x. Please note that at this time I am not specifying what the measurement is.

If you press ctrl+s (or file menu and save) you should see the iphone simulator change and display a white square roughly in the center of the screen

iphone rectangle

NOTE: while you were typing Sublime should have color coded what you were typing and suggeted code completion. If it didn’t then click on the View menu, then Syntax and make sure that Corona SDK Lua is selected.

Now as a test make sure Corona Simulator is the active application then click on the window menu item and then View As and select a different device

kindle corona sdk rect

The white square is still roughly in the center. That’s weird. Surely these two devices have different resolutions?

Let’s try something else. open up the config.lua file and change the width and height values to 640 and 960 (these values may be familiar to iPhone 4 users). Now press ctrl + s and see what happens.

iphone 4

Well now the square is no longer in the center and it also appears to be smaller. Well, I think you can figure out what is going on here. We have effectively doubled the resolution of our content area so now our square is half the size and it’s position is now commensurate with the increase in pixels. So from this we can infer that the coordinate system in Corona SDK is independent of hardware. This is a good thing because it makes developing apps for various devices easier. However, there are some other things to consider which we will discuss in the next part.

Leave a Reply

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