Corona SDK and other Game Development Tutorials
@gamebuilding

Creating Circle Pop – Part 4

Hello and welcome to another post by That’s So Panda! In today’s post, we will be covering how to create the main menu for our game Circle Pop with Corona SDK. The main menu will allow players to start the game and see how many circles they have popped so far. To get started, create a new file in your project folder named mainmenu.lua.

If you would like to purchase this as a template to support this website or to avoid having to retype all of this code, you can buy the template at thatssopanda.com/corona-sdk-templates/

To start out our mainmenu.lua, we will require in the storyboard module.

local storyboard = require( "storyboard" )

Next, we will use the loadTable function to load information our saved file into a table. This way, we can show the number of popped circles over the lifetime of our game.

savedInfo = loadTable("savedInfo.json")

After our loadTable function we will are going to declare some variables and functions that we can use within our app. In this case, we only need to declare our scene variable.

local scene = storyboard.newScene()

Since we want to make our game look cool, we will will create a table that will hold a gradient. This gradient will be using on our background rectangle and you can feel free to change the colors as you see fit.

local backgroundGradient = graphics.newGradient(
        { 3, 88, 140 },
        { 100, 200, 200 },
        "down" )

Then we will create a function that fire when the start game text object is touched. When using touch events, Corona passes the event parameter to the function. The event parameter tells us what stage the touch is in – began, moved, cancelled or ended. Since we only want to know when the user has touched the text object, we only want to track the began phase. If we didn’t track the phases, then the contents of the function could potentially fire off multiple times and cause errors.

local function onStartGameTouch(event)    
    if(event.phase == "began") then
        storyboard.gotoScene( "game" ) -- switch to the game scene
    end
    return true -- return true to signify a successful touch event. 
end

It’s also important to remember that return true at the end of the function. The return true statement lets our game know that the function has been successful and will stop other events from firing. This gets even more important when you have multiple objects on top of each other.

Next, we will write our createScene function. The create scene function is where all of the images, objects, and graphics are created. Think of this function as the drawing/starting scene. I’ve placed comments within this function to give you a better understanding of what’s happening.

function scene:createScene( event )
local group = self.view

— Create a background that fills up the entire screen. We will also apply our gradient and insert it into the group object.
local background = display.newRect(0,0,display.contentWidth,display.contentHeight)
background:setFillColor( backgroundGradient )
group:insert(background)

— Create a text objects – Start Game – and attach a touch event listener to switch scenes.
local txt_startGame = display.newText(“Start Game”,0,0,native.systemFontBold,34)
txt_startGame.x = display.contentWidth*0.5
txt_startGame.y = display.contentHeight*0.4
txt_startGame:addEventListener(“touch”,onStartGameTouch)
group:insert(txt_startGame)

— Create another text object to display the total number of objects popped so far.
local txt_circlesPopped = display.newText(“Circles Popped So Far: “..savedInfo.circlesPopped,0,0,native.systemFont,20)
txt_circlesPopped.x = display.contentWidth*0.5
txt_circlesPopped.y = txt_startGame.y + 125
group:insert(txt_circlesPopped)
end

The next function is the the enterScene function. The enterScene function is a good place to start running your app – start times, move objects, etc. In our case, we will use this to remove the previous scene from memory. This will give us a clean slate when returning from the game scene.

function scene:enterScene( event )
    local group = self.view
    local previous_scene = storyboard.getPrevious()

    if(previous_scene ~= nil) then
        storyboard.removeScene(previous_scene)
    end
end
end

For the next to last step, you have to run two event listeners to fire the functions createScene and enterScene. Without this, mainmenu.lua will not run!

scene:addEventListener( "createScene", scene )
scene:addEventListener( "enterScene", scene )

Finally, this is the last piece of code, but an important one. You have to return the scene to make Corona’s storyboard to work.

return scene

Thank you for reading! If you have questions or comments, please leave them below. Otherwise, stay tuned for Part 5!

2 Comments
  1. Thanks for the good tutorial!
    Note that there are one too many “end” in the scene:enterScene function:

    function scene:enterScene( event )
    local group = self.view
    local previous_scene = storyboard.getPrevious()

    if(previous_scene ~= nil) then
    storyboard.removeScene(previous_scene)
    end
    end <–extra "end"
    end

Leave a Reply