Corona SDK: Creating an Analog Clock App

In this tutorial, we will discover the capabilities of the Corona SDK and use the Lua programming language to learn more about how to develop a simple cross-platform application.

Brief Overview

Using the Corona API's, we'll create a basic analog clock. The graphics will be PNG's exported from the image editor of your choice and then powered by Lua. You will also learn how to test your application using the simulator and build your app for device testing.

Select Target Device

The first thing you have to do is select the platform you want to run your app, this way you'll be able to choose the size for the images you will use.

The iOS platform has these characteristics:

iPad: 1024x768px, 132 ppi
iPhone/iPodTouch: 320x480px, 163 ppi
iPhone 4: 960x640px, 326 ppi

For Android it is a little different, being an open platform, you may encounter many different screen resolutions:

Nexus One: 480x800px, 254 ppi
Droid: 854x480px, 265 ppi
HTC Legend: 320x480px, 180 ppi

In this tutorial we'll be using the iPhone/iPodTouch platform.

Interface

This is the graphic interface we'll be using. If you follow the Tuts+ network, you may notice that these are the graphics from my tutorial Create an Analog Clock Screensaver with Screentime for Flash. If you'd like, you can follow that tutorial to create the graphics or just download the project file from this post.

Exporting PNG's

Depending on the device you have selected, you will need to export the graphics in the recommended PPI. You can do that in your favorite image editor. I used the Adjust Size... function in the Preview app in Mac OS X.

Remember to give the images a descriptive name and to save them in your project folder.

Code!

Time to write our application!

Open your prefered Lua editor (any Text Editor will work, but you won't have syntax highlighting). Now, prepare to write your first awesome app!

Background

The first thing we'll do is to add the clock background:

1	local background = display.newImage("background.png")

This line creates the local variable background and uses the display API to add the specified image to the stage. By default, the image is added to 0,0.

Display Clock Hands

We repeat the process with the clock hands and the clock center images, placing them in the center of the stage:

1	local hourHand = display.newImage("hourHand.png", 152, 185)
2	local minuteHand = display.newImage("minuteHand.png", 152, 158)
3	local center = display.newImage("center.png", 150, 230)
4	local secondHand = display.newImage("secondHand.png", 160, 155)

Reference Point

To position the images correctly, we modify the reference point in order to move images relatively to the bottom center:

1	hourHand:setReferencePoint(display.BottomCenterReferencePoint)
2	minuteHand:setReferencePoint(display.BottomCenterReferencePoint)
3	secondHand:setReferencePoint(display.BottomCenterReferencePoint)

Initial Position

Here we set the initial position of the clock hands. Wait, didn't we do that already? Yes, but this time we set the rotation according to the system time:

local timeTable = os.date("*t") --Returns a table containing the hour, minutes and seconds at the call moment

--Set the rotation according to the timeTable values

hourHand.rotation   = timeTable.hour * 30 + (timeTable.min * 0.5) --The hours are separated by 30 degrees, plus 0.5 degrees per minute
minuteHand.rotation = timeTable.min * 6 --6 degrees separates the minutes and seconds
secondHand.rotation = timeTable.sec * 6

Memory Practices

The timeTable variable will be used just once at the application launch, so there's no need to keep it in memory. To release the memory used by the variable (which is almost nothing, but you MUST get used to deallocate unused vars or objects) we set its value to nil, this way garbage collection takes care of it:

1	timeTable = nil

MoveHands Function

The next lines of code handle the clock hands rotation, it is the same code as before, only this time wrapped into a function that will be executed every second by a Timer:

local function moveHands(e)
	local timeTable = os.date("*t") --get time again, every second
	hourHand.rotation = timeTable.hour * 30 + (timeTable.min * 0.5)
	minuteHand.rotation = timeTable.min * 6
	secondHand.rotation = timeTable.sec * 6
end --the local variable is destroyed here

Timer

The Timer, it executes every second and performs the specified function, this is the moveHands function we created in the last step. The times it's executed are set by the third parameter, 0 is infinity.

1	timer.performWithDelay(1000, moveHands, 0)

Test in Simulator

That will finish our app! Save the file as Main.lua in your project folder and launch the Corona Simulator. An open dialog will appear. Select your project folder and (hopefully) see your app working!

Icon

If everything is working as expected, we are almost ready to build out the app for device testing. Just one more thing is needed: our application icon.

You can create a nice and good looking icon using the graphics you created before. The icon size for the iPhone icons is 57x57px, but the iTunes store uses a 512x512px image, so it's better to create your icon in this size and then scale down for the icon.

It doesn't need to have the rounded corners or the transparent glare -iTunes and the iPhone will do that for you automatically.

Build for Device

Once you're finished with your icon, place it in your project folder and prepare for build.

You will need a developer account to build an app for the iPhone. You'll need to follow the instructions in the Apple Development Program to get one and then install a developer certificate.

When done, open the Corona Simulator again, but this time use the Open for Build option in the File menu.

You'll be asked to select your project and the platform to build the application for.

After that, a new window will appear where you can name your application, select the version number, and select the developer identity.

Press the build button when done and prepare to test in your device!

Conclusion

Congratulations on your first iPhone App using the Corona SDK!

You can see how easy it is to use the Corona API's and the Lua programming language. Try to build your own apps and wait for more basic to advanced tutorials!

Thanks for reading this tutorial. Hopefully you have found it useful!