Time for action – designing the HUD

While trying to make the player's gaming experience an enjoyable one, it's important that the information displayed is relevant to the game and placed strategically, so that it doesn't interfere with the main gaming area. So, to design the HUD, perform the following steps:

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

       local hud = function()

2. Display the text for the eggs that are caught during game play:

         eggText = display.newText( "Caught: " .. eggCount, 0, 0, "Arial", 45 )
         eggText:setTextColor( 1, 1, 1 )
         eggText.xScale = 0.5; eggText.yScale = 0.5
         eggText.x = (480 - (eggText.contentWidth * 0.5)) - 15
         eggText.y = 305
         gameGroup:insert( eggText )

3. Add in text to track the lives:

         livesText = display.newText( "Lives: " .. gameLives, 0, 0, "Arial", 45 )
         livesText:setTextColor( 1, 1, 1 )--> white
         livesText.xScale = 0.5; livesText.yScale = 0.5  --> for clear retina display text
         livesText.x = (480 - (livesText.contentWidth * 0.5)) - 15
         livesText.y = 15
         gameGroup:insert( livesText )

4. Add in text for the score and close the function:

         scoreText = display.newText( "Score: " .. gameScore, 0, 0, "Arial", 45 )
         scoreText:setTextColor( 1, 1, 1 )--> white
         scoreText.xScale = 0.5; scoreText.yScale = 0.5  --> for clear retina display text
         scoreText.x = (scoreText.contentWidth * 0.5) + 15
         scoreText.y = 15
         gameGroup:insert( scoreText )
       end

   

What just happened?

The eggText display object can be found near the bottom-right corner of the screen. It's still in view to the user while in game play and stays out of the main focus at the same time. Notice that eggText = display.newText( "Caught: " .. eggCount, 0, 0, "Arial", 45 ) will refer to eggCount when the value is updated.

The livesText display object setup is similar to eggText. It is placed near the top-right corner of the screen. The placement for this object is rather prominent because of its importance in the game. It's in an area that is noticeable from the background and allows the player to refer to during the game. The livesText display object decrements the number when gameLives is updated.

The initial setup for scoreText starts in the hud() function. It is placed in the top-left corner of the screen, opposite to livesText.

Creating the game lives

If there are no consequences in a game, then there is no sense of urgency to complete the main objectives. To keep a player engaged during game play, introducing elements that add some challenging aspects will keep the competitiveness and excitement going. Adding consequences in a game creates tension for the player and gives them more motivation to stay alive.