How To Make a Breakout Game with Corona

But I Failed Physics in High School!

In order to get a handle on the physics required for this game, think back to the old school Breakout game, or have a quick read through the Wikipedia article on the game. Breakout consists of a moving ball, a player-controlled paddle to bounce the ball on, some walls to keep the ball in play, and rows of bricks that are destroyed when the ball comes in contact with them.

Does it sound like there might be physics involved? :] It sure does! Well then, you’d better get started coding your complex physics engine!

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

-- Physics Engine
local physics = require "physics";
physics.start();
physics.setGravity(0, 0);

Okay, you’ve just coded your complex physics engine. :] Believe it or not, that’s it!

The code above simply tells Corona to include the built-in physics engine, and to set the gravity of your game universe to zero in both the X-direction (side-to-side) and the Y-direction (up and down). There’s no gravity in this game — the physics is solely controlled by the bullet ricocheting off of your paddle, the walls, and of course, your zombies!

You’ll program the movement of the bullet a bit later in this tutorial, but for now, revel in the fact that you just added physics to your game in three lines! :]

Note: The code above creates a local variable named physics — hence the “local” keyword. It’s a good practice to use local instances of variables; otherwise, they will be “global” and require manual cleanup!

Games aren’t much fun without sound effects and music, so luckily the starter package provides some for you to use! The next section will get your app humming. :]

Music Makes the Rhythm

In order to make use of the included sound effect files, paste the following lines of code in main.lua and save:

-- Load Sounds
local bgMusic = audio.loadStream("sounds/ZombieBreakTheme.mp3");
local zombieKill = audio.loadSound("sounds/ow.mp3");

These two lines load the two sound effect files into the game so that they’re ready for playback when required. You haven’t actually instructed the files to play, so you won’t hear anything yet when the app is restarted in the simulator.

Even though Corona handles a lot of things for you, you’ll still need a host of variables to store information particular to the operation of your game. The next section shows you how! :]

Varying Variables

There’s a good number of variables that will be used in your game. The first two you’ll set up are _W and _H, which will help when working with on-screen placement of graphics.

Paste the following in main.lua and save:

-- "Constants"
local _W = display.contentWidth / 2;
local _H = display.contentHeight / 2;

_W and _H are technically variables, but in this case, treat them like constant values used to keep track of the device’s screen width and height.

As every device screen will vary in size, it is much more flexible in game development to place objects on the screen using relative placement, as opposed to absolute positioning. When you don’t know what the eventual screen resolution will be, it’s easier to say “10 pixels from the right edge” rather than “pixel 310”.

Knowing the center points rather than the full width and height is also really useful in Corona, as it handles placement based on the center of an object, unlike native iOS, which places objects based on the (0,0) coordinates of the object.

For example, placing an object at (0, 0) in Corona will put the center of the object in the top-left corner, leaving a portion of the object offscreen! :]

Next, you’ll create other variables that will be covered later in the tutorial.

Paste the following in main.lua and save:

-- Variables
local zombies = display.newGroup();
local zombieWidth = 50;
local zombieHeight = 50;
local row;
local column;
local score = 0;
local currentLevel;
local velocityX = 3;
local velocityY = -3;
local gameEvent = "";

A group is exactly what it sounds like: individual objects in your application that you can refer to as a whole. In this case, you created a new group called “zombies”, which will contain…you guessed it, zombies! The benefit to grouping zombies in this manner, as opposed to handling them all separately, will be seen later in the tutorial.

Each zombie will be 50 x 50 pixels in size, and will be placed in rows and columns across the screen. The score will start at 0 and the player will get to change levels as they progress.

The velocity variables velocityX and velocityY will be used to move the bullet on the screen, and the gameEvent variable will be used to keep track of what to do when the player wins or loses.

Now that you have that first set of variables defined, it’s time to get the rest of the variables in your code that manage on-screen activities. Paste the following into main.lua and save:

-- Menu Screen
local titleScreenGroup;
local titleScreen;
local playBtn;

-- Game Screen
local background;
local player;
local zombie;
local bullet;

-- Score/Level Text
local zombieKillText;
local zombieKillNum;
local levelText;
local levelNum;

-- textBoxGroup
local textBoxGroup;
local textBox;
local conditionDisplay;
local messageText;

The variables used above should be fairly self explanatory; the comments above each block indicate the purpose and function of the variables in that set.

Settings…Variables…Where are the Graphics?!

You’re probably getting pretty antsy right about now; a whole bunch of variables, and the only thing you have to show for your efforts is a black screen! :]

Fortunately, it’s time for the main event in your app…functions!

Functions in Lua are comparable to other languages such as C or Ruby, and similar to methods in Objective-C.

Create the main function that will initiate the app by pasting the following code at the bottom of main.lua :

-- Main Function
function main()
	showTitleScreen();
end

When the app starts, main() will call another function called “showTitleScreen”. Let’s solve the mystery of what showTitleScreen does and paste the following code into main.lua:.

-- Show the Title Screen
function showTitleScreen()	
	
	-- Place all title screen elements into 1 group
	titleScreenGroup = display.newGroup();

	-- Display background image
	titleScreen = display.newImage("images/titleScreen.png", 0, 0, true);
	titleScreen.x = _W;
	titleScreen.y = _H;
	
	-- Display play button image
	playBtn = display.newImage("images/playButton.png");
	playBtn.x = _W;
	playBtn.y = _H + 50;
	playBtn.name = "playbutton";

	-- Insert background and button into group
	titleScreenGroup:insert(titleScreen);
	titleScreenGroup:insert(playBtn);

	-- Make play button interactive
	playBtn:addEventListener("tap", loadGame);
end

Okay, so what does the showTitleScreen function do?

First, it sets up the variable titleScreenGroup as a group to hold every element that will be on the title screen. In this case, the elements of titleScreenGroup are just a background image (titleScreen) and a play button (playBtn).

The background image is placed in the center of the screen, and the play button is placed slightly below center. The positioning of the on-screen elements is made easy thanks to the handy _W and _H variables that were set up earlier.

The titleScreen and playBtn elements are then inserted into the titleScreenGroup.

Of course, there needs to be something to call the main() function and launch the game! Paste in the code below at the very bottom of main.lua.

-- Run the game
main();

You can define a function at any place in your code, and those functions can call other functions defined at any place in your code too. However, calling a function directly as we just did above for main() must be done after the function is defined. So in this example, that last bit of code to run the game must be at the very bottom of main.lua!

Note: Unlike C, C++, and even Objective-C, the main() function is not called automatically as you might expect. Remember to add that call to main() yourself when writing all those apps with Corona SDK! The line main(); should always be at the very bottom of main.lua; any code added from here on out must be strictly above this line!

Now, save the file to see the new result in the Corona SDK simulator:

Hooray…finally some artwork!

Every game needs some level of interaction with the user; or else it wouldn’t be much of a game! :] The next section will add some interaction to your app!