1. Code
  2. Corona SDK

Create a Brick Breaker Game with the Corona SDK: Application Setup

This post is part of a series called Create a Brick Breaker Game with the Corona SDK.
Create a Brick Breaker Game with the Corona SDK: Game Controls

In this tutorial series, we'll be building a Brick Breaker game from scratch using the Corona SDK. The goal of this game is to control a pong-like paddle to knock a ball against a stack of bricks until they all break.

Step 1: Application Overview

The purpose of this game is to use a paddle to knock a ball into a stack of bricks until all the bricks are broken without allowing the ball to miss the paddle and fly off the screen. If successful, the user will progress to a new level, otherwise the game will end.

Step 2: Target Device

The first thing we have to do is select the platform we want to run our app within, this way we'll be able to choose the size for the images we 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:

  • Google Nexus One: 480x800px, 254 ppi
  • Motorola Droid X: 854x480px, 228 ppi
  • HTC Evo: 480x800px, 217 ppi

In this tutorial we'll be focusing on the iOS platform with the graphic design, specifically developing for distribution to an iPhone/iPod touch, but the code presented here should apply to Android development with the Corona SDK as well.

Step 3: Interface

A colorful nice looking interface will be displayed, this involves multiple shapes, buttons, bitmaps and more.

The interface graphic resources necessary for this tutorial can be found in the attached download.

Step 4: Export Graphics

Depending on the device you have selected, you may 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 on Mac OS X.

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

Step 5: Main.lua

Time to write our application!

Open your preferred Lua editor (any text editor will work, but not all editors provide Lua syntax highlighting) and prepare to write your awesome app. Remember to save the file as main.lua in your project folder.

Step 6: Code Structure

We'll structure our code as if it were a Class. If you know ActionScript or Java, you should find the structure familiar.

Step 7: Hide Status Bar

This code hides the status bar. The status bar is the bar on top of the device screen that shows the time, signal, and other indicators.

Step 8: Load Physics Engine

We'll make use of the poweful Box2D engine built into Corona, use this code to include it in your app:

Step 9: Game Variables & Constants

These are the basic variables and constants we'll use, read the comments in the code to learn more about them.

Step 10: Menu Screen

This is the main application screen, it will be the first interactive view to appear in our game. These variables store the background and the menu screen components.

Pay special attention to the line with display.newImage('bg.png'). This is responsible for displaying the initial background image on the screen.

Step 11: About Screen

The about screen will show the credits, year, and copyright of the game. This variable will be used to store a reference to the view:

Step 12: Game Screen

This is the game screen, it will be created when the Start button is tapped.

Variables to store the game screen:

Step 13: Score & Level Text

Local variables that store the score/level textfields and score/level numeric values:

Step 14: Alert Screen

This screen will appear when the game has been decided. The message will tell the player they either win or lose.

The Alert Screen is stored by the following variables:

Step 15: Levels

All our levels will be stored in tables (the Lua version of an array).

This is essentially a table containing a table. You could declare this in a single line, but, with the right formatting, spacing it out allows you to kind of actually see the form the levels will take:

In the multi-dimensional tables above, the 1's are representing the space in the stage where a brick will be placed, and the 0's are just empty space. Later on, the numbers will be read by a function that will place a brick on the game view. We've added four above, but you can add as many as you want!

Next Time. . .

You've now seen the interface and the basic setup of our game. Stay tuned for part two of this series, where we will add interactivity to the interface and collision detection between our game graphics.

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