This is the second installment in our Corona SDK Sound Memory tutorial. In today's tutorial, we'll add to our interface and the game interaction. Read on!

Also available in this series:

1. Create a Sound Based Memory Game - Interface Creation
2. Create a Sound Based Memory Game - Game Logic

Where We Left Off. . .

Please be sure to check part one of the series to fully understand and prepare for this tutorial.

1. Start Button Listeners

This function adds the necessary listeners to the Title View buttons.

function startButtonListeners(action)
	if(action == 'add') then
		playBtn:addEventListener('tap', showGameView)
		creditsBtn:addEventListener('tap', showCredits)
	else
		playBtn:removeEventListener('tap', showGameView)
		creditsBtn:removeEventListener('tap', showCredits)
	end
end

2. Show Credits

The credits screen is shown when the user taps the About button, a tap listener is added to the credits view to remove it.

function showCredits:tap(e)
	playBtn.isVisible = false
	creditsBtn.isVisible = false
	creditsView = display.newImage('credits.png', 0, display.contentHeight)
	
	lastY = title.y
	transition.to(title, {time = 300, y = display.contentHeight * 0.5 - title.height - 25})
	transition.to(creditsView, {time = 300, y = display.contentHeight * 0.5 + creditsView.height, onComplete = function() creditsView:addEventListener('tap', hideCredits) end})
end

3. Hide Credits

When the credits screen is tapped, it'll be tweened out of the stage and removed.

function hideCredits:tap(e)
	transition.to(creditsView, {time = 300, y = display.contentHeight, onComplete = function() creditsBtn.isVisible = true playBtn.isVisible = true creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
	transition.to(title, {time = 300, y = lastY});
end

4. Show Game View

When the Play button is tapped, the title view is tweened and removed revealing the game view. There are many parts involved in this view so we'll split them up in the next steps.

function showGameView:tap(e)
	transition.to(titleView, {time = 300, x = -titleView.height, onComplete = function() startButtonListeners('rmv') display.remove(titleView) titleView = nil end})

5. Add Square Buttons

This code places the game button images in the stage.

-- Add Squares
	
r.gfx = display.newImage('red.png', 75, 155)
g.gfx = display.newImage('green.png', 165, 155)
ye.gfx = display.newImage('yellow.png', 75, 245)
b.gfx = display.newImage('blue.png', 165, 245)
	
r.gfx.name = 'r'
g.gfx.name = 'g'
ye.gfx.name = 'ye'
b.gfx.name = 'b'

6. Instructions Message

The following lines will add the instructions message, show it for two seconds and then fade it out.

-- Instructions Message
	
local ins = display.newImage('message.png', 61, 373)
transition.from(ins, {time = 200, alpha = 0.1, onComplete = function() timer.performWithDelay(2000, function() transition.to(ins, {time = 200, alpha = 0.1, onComplete = function() display.remove(ins) ins = nil gameTimer = timer.performWithDelay(500, playLevel, #currentLevel) end}) end) end})

7. Check Button

This button is used to test the user input and make sure it equals the level sounds. It is invisible by default.

-- Check Button
	
check = display.newImage('checkBtn.png', 135, 406)
check.isVisible = false

8. Game Listeners

This function adds the necessary listeners to start the game logic.

function gameListeners(action)
	if(action == 'add') then
		r.gfx:addEventListener('tap', onTap)
		g.gfx:addEventListener('tap', onTap)
		ye.gfx:addEventListener('tap', onTap)
		b.gfx:addEventListener('tap', onTap)
		check:addEventListener('tap', checkInput)
	else
		r.gfx:removeEventListener('tap', onTap)
		g.gfx:removeEventListener('tap', onTap)
		ye.gfx:removeEventListener('tap', onTap)
		b.gfx:removeEventListener('tap', onTap)
		check:removeEventListener('tap', checkInput)
		gameTimer = nil
	end
end

9. Play Level Function

This function reads the currentLevel variable to determine which level to play. It also uses a transition to visually point to the button associated to the sound. When the level sequence is done the check button becomes visible.

function playLevel()
	if(times <= #currentLevel) then
		transition.from(currentLevel[times].gfx, {time = 200, alpha = 0.1})
		audio.play(currentLevel[times].s)
		times = times + 1
	end
	
	if(times == #currentLevel+1) then
		check.isVisible = true
		gameListeners('add')
	end
end

10. Record User Input

Pressing the buttons in the center will call this function. It will play a sound and record its value in the userInput table. This table will be used in the next function to compare the sounds.

function onTap(e)
	if(e.target.name == 'r') then
		table.insert(userInput, r.gfx)
		audio.play(r.s)
		transition.from(e.target, {time = 200, alpha = 0.1})
	elseif(e.target.name == 'g') then
		table.insert(userInput, g.gfx)
		audio.play(g.s)
		transition.from(e.target, {time = 200, alpha = 0.1})
	elseif(e.target.name == 'ye') then
		table.insert(userInput, ye.gfx)
		audio.play(ye.s)
		transition.from(e.target, {time = 200, alpha = 0.1})
	elseif(e.target.name == 'b') then
		table.insert(userInput, b.gfx)
		audio.play(b.s)
		transition.from(e.target, {time = 200, alpha = 0.1})
	end
end

11. Check Input

This function compares the names of the buttons pressed to the level table, and calls an alert with the corresponding message.

function checkInput(e)
	check.isVisible = false
	
	for i = 1, #currentLevel do
		if(userInput[i].name == currentLevel[i].gfx.name) then
			correct = correct + 1
		end
	end
	
	if(correct == #currentLevel) then
		alert('win')
	else
		alert('lose')
	end
end

12. Alert

The Alert function creates an alert view, animates it, and ends the game.

function alert(action)
	gameListeners('rmv')
	
	if(action == 'lose') then
		alertView = display.newImage('lose.png', 110, 218)
	else
		alertView = display.newImage('win.png', 110, 218)
	end
	
	transition.from(alertView, {time = 200, alpha = 0.1})
end

13. Call Main Function

In order to start the game, the Main function needs to be called. We'll do that here with the above code in place.

Main()

14. Loading Screen

The Default.png file is an image that will be displayed right when you start the application while the iOS loads the basic data to show the main screen. Add this image to your project source folder; it will be automatically added by the Corona compliler.

15. Icon

Using the graphics you created before, you can now create a nice icon. The icon size for an iPhone without retina display is 57x57px, but the retina version is 114x114px and the iTunes store requires a 512x512px version. I recommend creating the 512x512 version first and scaling down for the other sizes.

iTunes and the iPhone will create the rounded corners and transparent glare.

16. Testing in Simulator

It's time to do the final test. Open the Corona Simulator, browse to your project folder, and click open. If everything works as expected, you are ready for the final step!

17. Build

In the Corona Simulator go to File and Build and select your target device. Fill in the required data and click build. Wait a few seconds, and your app will be ready for device testing and/or submission for distribution!

Conclusion

In this series, we've learned about sound loading, playing, and table comparison. These are skills that can be very useful in a wide number of games.

You can experiment with the final result, and try to make your custom version of the game!

I hope you liked this tutorial series and found it helpful. Thank you for reading!