Its a very common practice, to display countdown like 3, 2, 1 and then the game begins. So today we will see how can we make our own custom countdown.
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 we will make a translucent background where we will show our countdown number.
CODE BLOCK :
-- Define background to display count down
local countDownBackground = display.newRect(0, 0, displayWidth, displayHeight)
countDownBackground:setFillColor(140, 140, 140)-- Set the color of the block
countDownBackground.alpha = 0.5-- Define opacity to make it translucent
-- 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
-- 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
countDownBackground:removeSelf()-- Remove counttdown background
-- TODO : Code to start the game
else-- Condition to display countdown numbers
countDownText.text = countDownNum
countDownNum = countDownNum - 1
-- Defined timer to strat the countdown
timer.performWithDelay( 1000, showCountDown, 4 )
On above code block I have at first defined a translucent background and then the label which will display the numbers at the center of the screen.
Then I have defined a function called ‘showCountDown’ where I have mentioned the condition to display the numbers and after completion of the loop it will automatically remove the text and the background from the screen.
So now here we have seen how easily we can implement the countdown before starting a game. You can use different styles and animation along with that to make it more attracting.
Note : Tested in Android device.