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

Also available in this series:

1. Create a Physics-Based Puzzle Game - Interface Creation
2. Create a Physics-Based Puzzle Game - Adding Interaction

Where We Left Off. . .

Make sure to read the first part of the tutorial to fully understand and prepare for this tutorial.

1. Start Button Listeners

This function adds the necessary listeners to the TitleView 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', -130, display.contentHeight-140)
	transition.to(creditsView, {time = 300, x = 65, 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)
	playBtn.isVisible = true
	creditsBtn.isVisible = true
	transition.to(creditsView, {time = 300, y = display.contentHeight+creditsView.height, onComplete = function() creditsView:removeEventListener('tap', hideCredits) display.remove(creditsView) creditsView = nil end})
end

4. Show Game View

When the play button is tapped, the title view is tweened and removed to reveal the game view. There are a lot of parts involved in this view so we'll split them up in the next step.

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

5. Instructions Message

The following lines add the instructions message. We'll show it for two seconds and then fade it out.

-- Instructions Message
	
	local ins = display.newImage('ins.png', 32, 182)
	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 end}) end) end})
	
	lvlImg = display.newImage('level.png', 202, 2)

6. Floor

This code creates a rectangle in the bottom of the stage to use as a floor.

-- Floor
	
local floor = display.newRect(0, 320, 480, 1)

7. Level Boxes

This part handles the level creation. It starts by creating the boxes in the stage. We'll learn more about this function in the next few steps.

-- Level boxes
	
	addBox('g', 60, 272)
	
	addBox('s', 148, 284)
	addBox('s', 148, 248)
	addBox('s', 148, 212)
	addBox('s', 148, 176)
	
	addBox('n', 297, 272)
	addBox('n', 297, 224)
	addBox('n', 297, 176)
	
	addBox('w', 148, 164)

8. Ball

This code adds the ball to the level.

	-- Ball
	
	ball = display.newImage('ball.png', 234, 138)
	ball.name = 'ball'

9. Physics

Here we add physics to the floor and the ball.

	-- Add Physics
	
	physics.addBody(floor, 'static')
	physics.addBody(ball, 'dynamic', {radius = 12})
end

10. Add Box Function

The next function uses three parameters to create a box object. You can specify the type of box in the first parameter and its position in the next two. With this method you can create complex levels using just a few lines of code. It'll add physics to the new box as well as a tap listener.

function addBox(type, X, Y)
	local b = display.newImage(type .. 'Box.png', X, Y)
	physics.addBody(b, 'dynamic')
	
	if(type ~= 'g') then
		b:addEventListener('tap', removeBox)
	elseif(type == 'g') then
		b:addEventListener('collision', onCollision)
	end
end

11. Remove Box

This function removes the target box when it's tapped.

function removeBox(e)
	display.remove(e.target)
end

12. Collisions

We'll use this code to see if the ball collides with the goal box and call an alert if it's true.

function onCollision(e)
	if(e.other.name == 'ball') then
		display.remove(ball)
		alert()
	end
end

13. 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

14. Call Main Function

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

Main()

15. Loading Screen

The default.png file is an image that will be displayed right when you start the application. It will automatically be added by the Corona compiler when you add it to your project source folder.

16. Icon

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

It doesn't need to have rounded corners or a transparent glare. iTunes and the iPhone will do that for you.

17. 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!

18. Build

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

Conclusion

In this series, we learned about physics behaviour, tap listeners, and collisions. These are skills that can be really useful in a wide number of games.

Experiment with the final result and try to make your own custom version of the game!

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