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

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

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.

Interface

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

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) 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.

display.setStatusBar(display.HiddenStatusBar)

Background

Now we add the app background.

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.

Octohedron

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

local octohedron = display.newImage("octohedron.png", 110, 186)
octohedron.isVisible = false

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

TextField

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

local textfield = display.newText("", 0, 0, native.systemFontBold, 14) -- Create the TextField
textfield:setReferencePoint(display.CenterReferencePoint) -- Change reference point to center for easy positioning
textfield.x = display.contentWidth * 0.5 -- Center TextField
textfield.y = display.contentHeight * 0.5
textfield:setTextColor(255, 255, 255) -- Set text color to white

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.

local shake = {}
local options = {"Probably Not", "No.", "Nope", "Maybe", "Yes", "Probably", "It's Done", "Of Course"}

Shake Function

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

function shake:accelerometer(e)
	if(e.isShake == true) then
		octohedron.isVisible = true
		transition.from(octohedron, {alpha = 0}) -- Show octohedron, animates alpha from 0 to 1
		textfield.text = options[math.random(1, 8)] -- Selects a random sentence from the options variable
		transition.from(textfield, {alpha = 0}) -- fades in the text
	end
end

Accelerometer Listener

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

Runtime:addEventListener("accelerometer", shake)

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

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!