How To Make a Breakout Game with Corona

This is a post by Tutorial Team Member Greg Pugh, author of the Colin Turtle children’s eBook app series. You can also find him on Google+.

Learn How to Make a Zombie Breakout Game with Corona SDK!

If you like to play video games, you’ve most likely played some variant of the classic game Breakout.

The goal of Breakout is to move a paddle on the bottom of the screen with the goal of bouncing a square ball to break through a wall of blocks and advance through the levels.

In this tutorial, you will create a game very similar to Breakout, except instead of breaking blocks, you’ll be killing zombies! :]

To build this game, you will use a game framework called Corona. Corona is a cross-platform software development kit, which means you can write your app once and then export it to multiple platforms such as iOS and Android.

Additionally, the application code is written in Lua, a simple and lightweight scripting language, which can be considerably easier to learn than compared to Objective-C or Java.

This tutorial is for complete beginners to Corona, or to Corona developers who’d like to brush up a bit more on the fundamentals.

So without further ado, let’s start breaking some zombies! :]

Install Some Refreshing Corona

The first thing you’ll need is the Corona SDK, so download the Corona SDK here.

Note: For this tutorial, you can just use the unlimited free trial version of the SDK. You’ll only need to purchase a license for Corona if you decide you want to distribute your app to the various app stores. You can read more about the Corona subscription pricing when you’re ready.

Once downloaded, installing the SDK is a fairly straightforward process if you’re on a Mac. Simply open the DMG, accept the software license agreement, and then drag the Corona folder to your Applications folder. That’s it!

If you’re on a Windows machine, the installer will take you through the installation process.

Open the Corona SDK Simulator to make sure that everything works. On a Macintosh, it will likely be located in Applications > CoronaSDK. If this the first time you run the simulator, you will need to accept the terms of the license agreement in order to continue.

At this point, you will be prompted to login to your Corona Developer account. If you don’t have one, don’t sweat it! :] Take the opportunity now to create one. This is a one-time operation, and you won’t have to perform this step again once you’ve created an account and logged in.

Once logged in, you should see the following screen:

If it looks like everything has been installed correctly, then you’re ready to start using Corona to fend off the zombie apocalypse! :]

Which Text Editor is Best?

Choosing which text editor to use will be a matter of personal preference and willingness to pay for software. For Mac users, you can use TextEdit that comes on OSX. PC users can use Notepad that comes pre-installed with Windows.

There are three editors that integrate nicely with Corona on the Mac:

• Sublime Text 2. Sublime Text 2 is a new and popular text editor for the Mac with autocomplete support for Corona (with a plugins). [Download Link] [Corona Plugin].
• TextMate. TextMate is an older but still very popular text editor for the Mac also with autocomplete support for Corona (with a plugins). [Download link] [Corona Plugin].
• CoronaComplete. A full featured IDE for Corona. [Download link]

Each software has their own advantage and disadvantages, so feel free to try them all to see which suits your style the best!

Note: To develop an app in Corona, you’ll use your own text editor and the Corona Simulator; you won’t be using Xcode or Eclipse as you would for regular iOS and Android apps.

Pre-Zombie Starter

Download the artwork, sound effects, and starter configuration files you’ll need from the resources for this project and unzip them to your desktop, or a folder of your choice.

The top-level folder from the resources archive, ZombieBreak, will be the project folder for your Corona application – this is where you will be saving your code files.

Feel free to take a peek at the beautiful artwork and cool sound effects inside!

Main is the Name of the Game

Start the Applications\Corona SDK\Corona SDK Simulator, and then navigate to File > Open. Browse to the ZombieBreak folder, and open the main.lua file. If Corona prompts you which device to simulate, choose iPhone.

To view the app running in the simulator, navigate to “Window > View As” in the Corona SDK Simulator menu to view your application running on different devices. For the purposes of this tutorial, use the iPhone simulator, as below:

And there you have it, your first Corona app!

Oh, wait — you don’t see anything but a black screen? Well, maybe it’s nighttime and the zombies are wearing black. :]

Okay, fair enough — time to add some graphics and gameplay to your app!

Zombies in the dark?

Files, Files, Everywhere

Take a look at main.lua — you’ll notice it’s empty! That would explain the blank screen when you first launched the app, wouldn’t it? :]

There are two other configuration files in the ZombieBreak folder: build.settings which contains settings that are used when the app is built; and config.lua which contains settings used when the app is run.

Both files contain good starter settings for your Zombie game, so you don’t need to alter them at this point. However, if you’re curious to learn more, check out the Configuration Options page at the Corona SDK documentation site.

Head right in to the next section to start working with code in Lua and Corona!

I Know the Status…Gone!

One of the first things you will do in this game is hide the status bar. This game is going to be so amazing that the player won’t care what time it is or how much battery life is left! :]

Paste the following lines of code into main.lua and save.

-- Hide Status Bar
display.setStatusBar(display.HiddenStatusBar);

If the simulator is still running, it should tell you that main.lua has changed, and offer to relaunch the app in the simulator to get your new code up and running. However, you can also navigate to “File > Relaunch” to do this step manually. You’ll need to remember to do this each time you update the code to see your work in action! :]

Comments in Lua are prefixed with “- -“, as seen above. Although it’s tempting to skip putting comments in your code, especially in a rapid-development language like Lua, you’ll be glad you did when you come back to a project weeks or months later! :]

The call to display.setStatusBar() hides the status bar, as shown below:

Abracadabra Status Bar Be Gone!

Did that seem a little too easy? If so, that’s just the power of Corona doing a lot of the heavy lifting for you!

The next section takes you through the basic physics of this game; you’ll see how Corona neatly handles the sticky bits of game physics for you! :]