Time for action – displaying a timer bar

The game file to import and load for this session is 5961_06_07.stencyl.

1. Open the Score Management scene behavior and click on the Display HUD event.

2. In the when drawing event, right-click on the blue block that draws the text for the countdown timer and select Activate / Deactivate from the pop-up menu. Note that the block becomes faded.

3. Locate the draw rect at ( x: 0 y: 0 ) with ( w: 0 h: 0 ) instruction block in the palette, and insert it at the bottom of the when drawing event.

4. Click on the draw option in the newly inserted block and change it to fill.

5. Set both the x: and y: textboxes to 10.

6. Set the width (w:) to Countdown x 10.

7. Set the height (h:) to 10.

8. Ensure that the draw text … block and the fill rect at … block in the Display HUD event appear as shown in the following screenshot (the draw text LIVES: … block may look different if the earlier Have a go hero section was attempted):

   

9. Test the game!

What just happened?

We have created a timer bar that displays...