How To Make a Breakout Game with Corona

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.

Let’s Get Physical

Now that you have the player and bullet on screen, you’ll need to give them some physics properties. But wait a second…didn’t you already enable physics in the game in the very beginning?

That’s correct, you did. However, just because the physics routines exist, that doesn’t mean that they apply to anything on the screen – unless you write some code! :]

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

-- When the game starts, add physics properties to player and bullet
function startGame()
	physics.addBody(player, "static", {density = 1, friction = 0, bounce = 0});
	physics.addBody(bullet, "dynamic", {density = 1, friction = 0, bounce = 0});
	player:removeEventListener("tap", startGame);
	gameListeners("add");
end

In the code above, you tell the player object and bullet object how dense they are, if they have any friction and if they’ll add any bounce to the collision. The call to “removeEventListener” on the player is there so the game doesn’t listen for a user tap once the game has already started.

Note: It’s good practice to remove event listeners when they aren’t needed to free up memory and device resources.

Now that you have most of the important elements on screen, the next section will get things moving around!