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