Show Countdown Before Starting of your Game with Corona

Background:

Few months ago I was just making a prototype of a gaming app. After few days when it reaches a position where a user can check it, I have shown it to one of my friend. After looking to its every corner we found some flaws and also listed some points that I need to implement to make it more presentable. He asked me why I don’t add a countdown before jumping to the game directly. Then I realized, it’s not a bad idea. After that I have implemented that without wasting any time in second thought. I manage to display countdown like 3, 2, 1 and then the game begins. So today we will see how we can make our own custom countdown.

Description:

So let’s say we have a gaming board page where we will play the game but before starting we will add countdown like 3, 2, 1 and after that user can play the game. So for that lets make a translucent background where we will show our countdown number.


Code block in lua file


– Define a group
local gameBoardGroup = display.newGroup()
– Define background to display count down
local countDownOverlay = display.newRect(0, 0, displayWidth, displayHeight)
countDownOverlay:setFillColor(140, 140, 140)    – Set the color of the block
countDownOverlay.alpha = 0.5            – Define opacity to make it translucent
– Insert backround to the display group
gameBoardGroup : insert( countDownOverlay )
– Define label to display number
local countDownText = display.newText( “”,0, 0, native.systemFont, displayHeight * 0.5 )
countDownText:setTextColor( 131, 255, 131 )

 – Define text color
countDownText:setReferencePoint( display.TopLeftReferencePoint )    – Define text position reference
– Insert text to the display group
gameBoardGroup : insert( countDownText )

– Set the text position at center
countDownText.x = ((displayWidth * 0.5) – (countDownText.contentWidth * 0.5))
countDownText.y = ((displayHeight * 0.5) – (countDownText.contentHeight * 0.5))
– Define count down number
local countDownNum = 3
– Define function to show countdown numbers
local showCountDown = function()

– Condition to show and hide countdown
    if countDownNum == 0 then
        countDownText:removeSelf()    – Remove countdown text
        countDownOverlay:removeSelf()    – Remove countdown background
        – TODO : Code to start the game
    else    – Condition to display countdown numbers
        countDownText.text = countDownNum
    end
    countDownNum = countDownNum – 1
end
– Defined timer to strat the countdown
timer.performWithDelay( 1000, showCountDown, 4 )

On above code block at first I have defined a display group where we add our all UI elements that need to display on screen and then define a translucent background and then the label which will display the numbers at the center of the screen.

Then I have mentioned a function called ‘showCountDown’ where I have mentioned the condition to display the numbers and after completion of countdown state it will automatically remove the text and the background from the screen and will implement the further game logic.

Summary:

So now design your own countdown and add an extra star to your game. You can use different styles and animation along with that to make it more attracting.

Note: Tested in Android device

Written ByRaju Mahato, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s