Building Circle Pop With Corona SDK Part 2 of 2

Please note, due to some unforeseen circumstances, I’ve lost my screenshots. If you would like to see screenshots, let me know in the comments!

In part 2 of building circle pop with Corona SDK, we will create the game scene. The game scene will task the player with popping circles. These circles will be randomly positioned with random colors and we’ll even keep track of how many circles they are popping. If you haven’t read part 1, please read part 1 first before continuing with this tutorial.

Open up your project folder, create a new file called scene-game.lua, and open it up in your favorite text editor. Similar to the menu scene, we’ll require in the widget library as well as our positioning variables.

local widget = require( "widget" )

-- These values are set for easier access later on.
local acw = display.actualContentWidth
local ach = display.actualContentHeight
local cx = display.contentCenterX
local cy = display.contentCenterY
local bottom = display.viewableContentHeight - display.screenOriginY

We’ll continue with our variable declarations by creating variables for our circles, counter, and player score. I’ve placed comments next to each line so you know what each one is used for.

-- The next lines are forward declares
local createCircles, timerForCircles -- forward declare for timer
local enemyCircle = {} -- a table to store the enemy circles
local enemyCounter = 1 -- a counter to store the number of enemies

local playerScore -- stores the text object that displays player score
local playerScoreCounter = 0 -- a counter to store the players score

Screenshot 2016-07-06 12.59.43

In the menu scene, we have a function that whisks the player to the game scene. In the game scene, we’ll add a function that will send the player back to the menu scene. We’ll also cancel the timer by calling timer.cancel(timerForCircles). This cancellation will stop the circles from being created.

-- This is called when the menu button is touched. This will send the player back to the menu.
local function onPlayTouch( event )
 if ( "ended" == event.phase ) then
  timer.cancel(timerForCircles)
  composer.gotoScene("scene-menu")
 end
end

We’ll also add another function that will respond to the player touch. While I have a comment in the code below, the function onCircleTouch is called when a circle is touched. On the ended phase, the circle is removed, the player gets a point, and the event returns true. The last part is important because it’ll stop the player from touching multiple circles at once.

-- This function will remove the circle on touch, increment the player score by 1, and return true. The return true means the function was called successfully.
local function onCircleTouch(event)
 if ( "ended" == event.phase ) then
  display.remove(event.target)

  playerScoreCounter = playerScoreCounter + 1
  playerScore.text = "Score: "..playerScoreCounter

  return true
 end
end

Screenshot 2016-07-06 13.00.32

Within the scene:create function, we’ll add in our background, a bottom bar, and the player score text object. The background will cover the entire screen, the bottom bar is where the menu button will be located at, and the player score will keep track of the player score.

-- Create the background
local background = display.newRect(sceneGroup, 0, 0, acw, ach)
background.x = cx
background.y = cy

-- Create the black bar at the bottom of the screen
local bottombar = display.newRect(sceneGroup, 0, 0, acw, 54)
bottombar:setFillColor(0)
bottombar.anchorY = 1
bottombar.x = cx
bottombar.y = bottom

-- Create a text object to keep track of the player score
playerScore = display.newText(sceneGroup, "Score: "..playerScoreCounter, 0, 0, native.systemFont, 20)
playerScore:setFillColor(0)
playerScore.x = cx
playerScore.y = bottombar.y - 70

Next, we’ll add in a button to allow the player to return to the menu. This button will call the function onPlayTouch.

-- Create a button to allow the player to return to the menu
local btn_menu = widget.newButton({
 left = 100,
 top = 200,
 label = "Menu",
 fontSize = 40,
 onEvent = onPlayTouch
})
btn_menu.anchorY = 1 -- anchorY changes the anchor point of the object. By setting it to 1, the anchor point is at the bottom of the object.
btn_menu.x = cx
btn_menu.y = bottom - 5
sceneGroup:insert(btn_menu)

Screenshot 2016-07-06 13.00.58

Finally, we’ll create a function that will be called by the timer. The function will be creating circles and assigning them to the table enemyCircle. We’ll be randomizing the position and color of the circle to provide some playability to our game. Feel free to swap these out with moles, nails, or any other image object that might be a good fit for this style of game.

-- This function will create an enemy circle, assign a random color, assign a random position, and attach the touch event listener. At the end, the enemy counter variable is increased by 1.
createCircles = function()
 enemyCircle[enemyCounter] = display.newCircle(sceneGroup, 0, 0, 25)
 enemyCircle[enemyCounter]:setFillColor(math.random(1,255)/255, math.random(1,255)/255, math.random(1,255)/255)
 enemyCircle[enemyCounter].x = math.random(20, acw-20)
 enemyCircle[enemyCounter].y = math.random(20, ach-130)
 enemyCircle[enemyCounter]:addEventListener("touch", onCircleTouch)

 enemyCounter = enemyCounter + 1
end

And the last piece to Circle Pop with Corona SDK is to create the timer! This timer will run every 1000 milliseconds (1 second) and will run forever until canceled. If you’d like to set a hard cap to the timer, change the 0 to a different number.

timerForCircles = timer.performWithDelay(1000, createCircles, 0) -- Create timer for circle creation

Thank you so much for reading this tutorial series on building a game with Corona SDK. If you have questions or comments, please leave them in the comments below. Thank you for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *