Building Circle Pop with Corona SDK – Part 1 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!

When I learn a new language or a new SDK, I find myself learning faster and quicker when I have a project. In this tutorial, I’ll teach you how to build Circle Pop. You can download the final version of the code at gamebuildingtools.com/product/circle-pop-for-corona-sdk/.

Before getting started, you’ll need the following:

The latest version of Corona SDK
A text editor, I like to use Sublime Text
To get started, we will create a new project that’s 400×600. Corona provides an easy way to create new projects so fire up Corona SDK and click on New Project. Set the screen size to 400×600.

With the project set up, we’ll start editing main.lua. Open up main.lua in your favorite text editor and we will hide the status bar and use composer to move to the menu scene. Composer is Corona’s official scene management library and gives us an easy way to create scenes and manage scenes.

-- Hide the status bar
 display.setStatusBar( display.HiddenStatusBar )

-- Go to the menu scene
 local composer = require( "composer" )
 composer.gotoScene("scene-menu")

Next, create a new file in the same project folder and name it scene-menu.lua. This file will contain the menu for our game circle pop. The menu will be simple and consist of a background, a logo, and a play button. I’m keeping the menu simple so you can pick up on the basics first. You need to walk before you can run!

And to make things even easier, we will use Corona’s scene template to create our menu scene. Head on over to https://docs.coronalabs.com/api/library/composer/index.html#scene-template and copy everything from ‘local composer’ to ‘return scene’. Once you have this copied, copy the code over to scene-menu.lua.

The first item we will add to our game template is to require in the widget library. Corona provides this built-in library and allows for you to create UI elements even faster. Add the following line after local scene = composer.newScene():

local widget = require( "widget" )

Next, we’ll create some variables that will make positioning our elements even easier. After the widget library, enter the following code:

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

These variables get the actual content width, actual content height, the center x and y locations, and the bottom most point of the app. Then, we’ll create a function that will respond to the play button. This function is called onPlayTouch and will send the player to the game scene. Here’s the code:

-- This function will send the player to the game scene
local function onPlayTouch( event )
 if ( "ended" == event.phase ) then
  composer.gotoScene("scene-game")
 end
end

When the player touches the play button, which we will add later, the function onPlayTouch will be called. This function accepts a variable as a parameter and this variable lets us know quite a few things. For our purposes, we want to know when the event is in the ended phase. The ended phase is when the player stops interaction with the button, i.e. remove their finger from the screen, and in this phase, we’ll whisk the player off to the game scene.

If you’ve been following along, your code should look something like this:

Menu Scene Screenshot

With our scene setup with variables and a function, we’ll start to add in our background, our logo, and our play button. To keep things simple, Circle Pop does not use any images. Instead, we’ll be using built-in text objects and basic shapes. We’ll add the following pieces of code to the scene:create function.

Within local function scene:create, we want a simple white background to cover up the background. We’ll use display.newRect to make this happen.

-- Code here runs when the scene is first created but has not yet appeared on screen
local background = display.newRect(sceneGroup, 0, 0, acw, ach)
background.x = cx
background.y = cy

The function display.newRect accepts the parameters in this order – parent, x location, y location, width, and height. We are sending in sceneGroup first because we want to attach the background object to the menu scene. When we transition to another scene, Corona will know this object belongs to this scene and will appropriately move it off scene or remove it from device memory. The x and y location are set to 0 at the creation of the object and we set the width and height to actual content width and height. We wrap up the object by positioning it on the center of the screen.

Then, we will create the title of the game using display.newText. This function accepts the parameters in this order – parent, string, x location, y location, font name, and font size. After the object is declared, we’ll position the object and set the color of the text to black.

-- Create the title
local title = display.newText(sceneGroup, "Circle Pop", 0, 0, native.systemFont, 72)
title.x = cx
title.y = 100
title:setFillColor(0)

The last object we’ll add is the play button. The play button uses the widget library and will trigger the onPlayTouch function when touched. Here’s the code:

-- Create a start playing button. When touched, trigger the onPlayTouch function
local btn_play = widget.newButton({
left = 100,
top = 200,
label = "Start Playing",
fontSize = 48,
onEvent = onPlayTouch
})
btn_play.x = cx
btn_play.y = cy
sceneGroup:insert(btn_play)

Here’s a screenshot with the code in place:

Screenshot 2016-07-06 11.18.41

Finally, we’ll want to add in another function called composer.removeScene in the function scene:show. This remove scene function will destroy the game scene when the player leaves the game scene. This will make sure the player starts a new game every time the player hits the play button.

local prevScene = composer.getSceneName( "previous" )
if(prevScene) then
 composer.removeScene( prevScene )
end

And that’s it for the first part of creating Circle Pop with Corona SDK! In Part 2, we will create the game scene and allow the player to play the game. If you have questions, comments, or just want to say thanks, please leave your comment below. Thanks for reading and make sure to read Part 2.

Leave a Reply

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