Time for action – displaying the timer and score

Let's set up the help screen and HUD elements that need to be displayed during the game:

1. Create a new local function called hud():

   local hud = function()

2. Display helpText at the start of the game for 10 seconds. Have it transition by sliding it to the left and turning visibility to false. Add helpText to the hudGroup group:

     local helpText = display.newImage("help.png")
     helpText.x = 240; helpText.y = 160
     helpText.isVisible = true
     hudGroup:insert( helpText )
   
     timer.performWithDelay( 10000, function() helpText.isVisible = false; end, 1 )
   
     transition.to( helpText, { delay=9000, time=1000, x=-320, transition=easing.inOutExpo })

3. Display counter and scoreText near the top of the screen. Add scoreText to the hudGroup group as well. Close the function with end:

     counter = display.newText( "Time: " .. tostring(numSeconds), 0, 0, "Helvetica-Bold", counterSize )
     counter:setFillColor( 1, 1, 1 )
     counter.xScale = 0.5; counter.yScale = 0.5
     counter.x = 60; counter.y = 15 
     counter.alpha = 0
   
     transition.to( counter, { delay=9000, time=1000, alpha=1, transition=easing.inOutExpo })
   
     hudGroup:insert( counter )
   
     scoreText = display.newText( "0", 470, 22, "Helvetica-Bold", 52 )
     scoreText: setFillColor( 1, 1, 1 )--> white
     scoreText.text = gameScore
     scoreText.xScale = 0.5; scoreText.yScale = 0.5
     scoreText.x = (480 - (scoreText.contentWidth * 0.5)) - 15
     scoreText.y = 15
     scoreText.alpha = 0
   
     transition.to( scoreText, { delay=9000, time=1000, alpha=1, transition=easing.inOutExpo })
   
     hudGroup:insert( scoreText )
   
   end

What just happened?

The helpText object appears before the game starts and stays on the main device display for 9 seconds and transitions to -320 in the x direction in 1 second. This happens through transition.to( helpText, { delay=9000, time=1000, x=-320, transition=easing.inOutExpo }).

The counter object displays "Time: " .. tostring( numSeconds ), where numSeconds denotes the seconds that are counted down, starting from 30. It is located near the top-left corner of the screen.

The scoreText object displays gameScore and is updated for every star collision made. This will be placed on the top-right corner of the screen. All the objects in local hud = function() are inserted in hudGroup.