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

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.

Necesary Classes

Variables and Constants

Declare Functions

	contructor (Main function)
	
	class methods (other functions)

call Main function

Step 7: Hide Status Bar

display.setStatusBar(display.HiddenStatusBar)

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:

--Physics Engine
local physics = require 'physics'
physics.start()
physics.setGravity(0, 0) -- Set gravity to 0 as we won't be needing it

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.

local BRICK_W = 41 --brick width
local BRICK_H = 21 --brick height
local OFFSET = 23 --an offset used to center the bricks
local W_LEN = 8 --the length of the levels, only 8 horizontal bricks should be created on stage
local SCORE_CONST = 100 --the amount to add to the score when a brick is hit
local score = 0 --stores the current score
local bricks = display.newGroup() --holds all the level bricks
local xSpeed = 5
local ySpeed = -5
local xDir = 1 -- x direction
local yDir = 1
local gameEvent = '' --stores game events (win, lose, finished)
local currentLevel = 1

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.

local background =  display.newImage('bg.png')
local menuScreen
local mScreen
local startB
local aboutB

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:

local aboutScreen

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:

local paddle
local brick
local ball

Step 13: Score & Level Text

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

local scoreText
local scoreNum
local levelText
local levelNum

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:

local alertScreen
local alertBg
local box
local titleTF
local msgTF

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:

local levels = {}
                levels[1] =             {{0,0,0,0,0,0,0,0},
                                         {0,0,0,0,0,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,1,1,1,1,1,1,0},
                                         {0,1,1,1,1,1,1,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,0,0,0,0,0,0,0},}
		
                levels[2] =             {{0,0,0,0,0,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,0,1,0,0,1,0,0},
                                         {0,0,0,0,0,1,0,0},
                                         {0,0,0,0,1,0,0,0},
                                         {0,0,0,1,0,0,0,0},
                                         {0,0,1,0,0,0,0,0},
                                         {0,0,1,1,1,1,0,0},}
					
                levels[3] =             {{0,0,0,0,0,0,0,0},
                                         {0,0,0,0,0,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,1,0,0,0,0,1,0},
                                         {0,1,1,1,1,1,1,0},
                                         {0,1,0,1,1,0,1,0},
                                         {0,0,0,0,0,0,0,0},
                                         {0,0,0,1,1,0,0,0},
                                         {0,0,0,0,0,0,0,0},}
				
                levels[4] =             {{0,0,0,0,0,0,0,0},
                                         {0,0,0,0,0,0,0,0},
                                         {1,1,1,1,1,1,1,1},
                                         {1,0,0,0,0,0,0,1},
                                         {1,0,0,0,0,0,0,1},
                                         {1,0,0,0,0,0,0,1},
                                         {1,0,0,0,0,0,0,1},
                                         {1,0,0,0,0,0,0,1},
                                         {1,1,1,1,1,1,1,1},}

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.

HIGHLIGHTS OF THE DAY