1. Code
  2. Corona SDK

Corona SDK: Develop an Entertaining Magic Ball Application


In this tutorial, we'll use the Corona API's and the Lua programming language to create an entertaining Magic Ball App.

Brief Overview

Corona SDK Magic Ball - Figure 1

Using the Shake Event built in the Corona API, we'll create an application that generates a random result from predefined words.You'll also learn to create simple animations using the transition methods.

Select Target Device

Corona SDK Magic Ball - Figure 2

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

For Android 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/iPod touch as the platform.


Corona SDK Magic Ball - Figure 3

This is the graphic interface we'll be using, it includes a triangle graphic that will serve as the Octohedron found in Magic Balls.

Exporting PNG's

Corona SDK Magic Ball - Figure 4

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.


Corona SDK Magic Ball - Figure 5

Time to write our application!

Open your prefered Lua editor (any Text Editor will work, but you won't 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.


Now we add the app background.

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.


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

The Octothedron will be invisible by default, and will appear at the first device shake.


The following code creates the center TextField that will display the random sentence when a shake event is dispatched.

Necesary Variables

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

  • shake: A Table that will be used as a function listener for the shake event.
  • options: Stores the words that can be shown by the magic ball.

Shake Function

This function listens for a shake event and reveals the octohedron and text if true.

Accelerometer Listener

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


Corona SDK Magic Ball - Figure 6

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.


Shake events are easy to detect and really useful, you can give them any functionality such as erasing, undo, shuffle or get a random answer just like you did in this tutorial.

Thanks for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.