How To Make a Breakout Game with Corona

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!

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!

Listening for Interactions

The play button can be made interactive by assigning an event listener to it; let’s face it — what good is a button that doesn’t do anything?

Paste the following code into main.lua — above “main();” — and save:

-- When play button is tapped, start the game
function loadGame(event)
	if event.target.name == "playbutton" then
		audio.play(bgMusic, {loops =- 1});
		audio.setVolume(0.2)
		transition.to(titleScreenGroup,{time = 0, alpha=0, onComplete = initializeGameScreen});
		playBtn:removeEventListener("tap", loadGame);
	end
end

When the “tap” event happens (i.e. the user taps on the screen), Corona calls a function called ‘loadGame’. The loadGame() function starts the background music and adds a transition from the title screen group to the level 1 screen.

Since you no longer need to wait for the user to tap the play button, you use removeEventListener to stop waiting for that.

Reload the app in the simulator. Now, when you tap or click on the play button, the background music will begins to play in a loop. The volume for the music is set low so that it won’t be distracting to the player.

Note: If you’d like to stop the looping music and don’t want to mute your speakers, navigate to “File > Relaunch” in the Corona SDK simulator and to go back to the title screen. For a permanent fix while you’re coding the app, comment out the two lines of audio code to play no music at all!

And finally, the title screen will disappear and switch to the first level of the game. Sounds pretty great! However, there isn’t anything to display in the Level 1 screen as you haven’t built it yet! :]

Time to fix that! Move on to the section below to build your first level!

Oh, Give Me a Home Where the Zombies Will Roam

Now it’s time to build the first level of Zombie Break! The game will start out in Atlanta, GA, and once the southern zombies are terminated, the player will move onto New York City to wipe out some Yankee zombies.

To start the game, you’ll need to put a few things in place:

1. Create a player paddle and bullet at the bottom middle of the screen.
2. Show the city name and score in the heads up display.
3. Run the level.

Now that you’ve got your checklist of items, paste the following code into main.lua above “main();” and save:

-- Set up the game space
function initializeGameScreen()
	-- Place the player on screen
	player = display.newImage("images/player.png");
	player.x = _W;
	player.y = _H + 140;
	player.name = "player";
	
	-- Place bullet on screen
	bullet = display.newImage("images/bullet.png");
	bullet.x = _W;
	bullet.y = player.y - 30;
	bullet.name = "bullet";
	
	-- Score text
	zombieKillText = display.newText("Zombies Killed: ", 25, 2, "Arial", 14);
	zombieKillText:setTextColor(255, 255, 255, 255);
	zombieKillNum = display.newText("0", 150, 2, "Arial", 14);
	zombieKillNum:setTextColor(255, 255, 255, 255);
	
	-- Level text
	levelText = display.newText("City:", 360, 2, "Arial", 14);
	levelText:setTextColor(255, 255, 255, 255);
	levelNum = display.newText("Atlanta", 400, 2, "Arial", 14);
	levelNum:setTextColor(255, 255, 255, 255);
	
	-- Run level 1 
	changeLevel1();
end

The first part of this function places the player sprite (the paddle) toward the bottom of the screen, and places the bullet right above the paddle. It then displays the game status text in the upper left and upper right, using Corona’s handy display.newText method.

At this point, you’re ready to set up the contents of the first level. That bit of code should do a couple of things:

1. Set a background image in the center of the screen, just like you did for the title screen.
2. Make the player paddle interactive so the game starts when the user taps the paddle.

Paste the following code into main.lua above “main();” and save.

function changeLevel1()
	-- Level 1 background image will be Atlanta
	bg1 = display.newImage("images/atl.png", 0, 0, true );
	bg1.x = _W;
	bg1.y = _H;
	bg1:toBack();
	
	-- Start
	player:addEventListener("tap", startGame)

	-- Reset zombies
	gameLevel1();
end

This adds the background sprite in the center of the screen, and moves it to the back with the toBack function. It then adds an event listener waiting for the player to tap the scren – when that occurs, startGame will be called.

Run the app in the simulator! You’ll see the following setup:

Now when you tap the play button, you’ll see a background image, the player’s paddle, the bullet, the count of how many zombies have been killed, and the name of the city. There aren’t any zombies to kill yet, but it’s starting to look like a game! :]

However, the game needs some interaction with the various parts — although “interaction” seems like a pretty tame word for killing a zombie with a bullet! :] Looks like this game needs to make use of that physics engine you added some time ago.