Corona SDK: Create an Accelerometer Driven Application

The Corona SDK is a cross-platform framework that enables developers to create applications for both iPhone and Android using the Lua programming language. In this tutorial, we'll discover the capabilities of the Corona SDK to interact with the device Accelerometer. We will create a simple app that responds to accelerometer events.

Related Corona SDK Tutorials:

• Introduction to Corona SDK: Easy Cross-Platform Development
• Corona SDK: Creating an Analog Clock App
• Corona SDK: Create an Accelerometer Driven Application

Accelerometer Application Overview

Using the Corona API's, we'll create a basic application that registers the device movement based on the accelerometer value, moving an object on the screen.

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/iPod Touch: 320x480px, 163 ppi
• iPhone 4: 960x640px, 326 ppi

Because Android is an open platform, there are many different devices and resolutions. A few of the more common screen characteristics are:

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

In this tutorial we'll be focusing on the iOS platform, specifically developing for distribution to an iPhone/iPod touch.

Interface

This is the graphic interface we'll be using, it includes a triangle graphic that will serve as the position meter.

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 may not have syntax highlighting) and prepare to write your awesome app.

Hide Status Bar

First, we hide the status bar, this is the bar on top of the screen that shows the time, signal, and other indicators.

1

2

display.setStatusBar(display.HiddenStatusBar)

Background

Now we add the app background.

1

2

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 using the top left corner as the reference point.

Indicator

We repeat the process with the position indicator image, placing it in the center of the stage.

1

2

local indicator = display.newImage("indicator.png")

3

4

indicator:setReferencePoint(display.CenterReferencePoint)

5

indicator.x = display.contentWidth * 0.5

6

indicator.y = display.contentWidth * 0.5 + 100

Needed Variables

The next variables will be used to handle the accelerometer event.

• acc: A Table that will be used as a function listener for the accelerometer event.
• centerX: Stores the horizontal center value of the stage.

1

2

local acc = {}

3

local centerX = display.contentWidth * 0.5

Accelerometer Function

This function uses the acc table to create a listener for the accelerometer event, the xGravity property (part of the accelerometer event) and the centerX variable moves the position indicator according to the calculated position.

1

2

function acc:accelerometer(e)

3

	indicator.x = centerX + (centerX * e.xGravity)

4

end

This will make our indicator to balance when the device inclination changes, the xGravity property will handle the side movements, you can use the yGravity property to handle up/down inclination types.

Accelerometer Listener

The Accelerometer events are runtime based, so we use the Runtime keyword to add the listener.

1

2

Runtime:addEventListener("accelerometer", acc)

Icon

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

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

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

Conclusion

With this tutorial you've learn how to use Accelerometer events to manipulate elements in stage, there are many ways to apply this code, with basic character movement in a game one of the more prominent options.

Thanks for reading this tutorial, I hope you've found it useful. Have fun experimenting with the device accelerometer!