Drawing the user interface

One of the most important elements in creating a great game is ensuring that the player has all the information they need to play the game. Much of this is usually presented in the heads-up display, otherwise known as the HUD. Every game has different components that can be a part of the HUD including things we need such as scoreboards and life counters.

  1. To start with, we are going to need a font for the text we intend to display. We have supplied a font called Retroheavyfuture for use in this game that will need to be installed on your computer. To install this font on a Windows 7 computer, right-click on Chapter 3/Fonts/RETRRG__.ttf and click on Install. Then follow the directions when prompted.
  2. Back into GameMaker: Studio, create a new font and name it fnt_Scoreboard.
  3. Select Retroheavyfuture as Font.
  4. Set Size under Style to 16.
  5. We want a decent sized font to display the score and lives during the game. It should look like the following screenshot, so click on OK:
    Drawing the user interface
  6. We will need a second version of the font when we display the win/lose condition. Create a new font and name it fnt_WinLose.
  7. Once again, select Retroheavyfuture as Font, but this time set Size to 32. We now have all the in-game fonts we need, so click on OK.
  8. Let's move on to the new Script, scr_Overlord_Draw. We will start by setting the color and the font for the scoreboard text with this code:
    draw_set_color(c_white);
draw_set_font(fnt_Scoreboard);

    The first line of code sets the color with one of GameMaker: Studio's premade colors, c_white. The next line then sets the scoreboard as the font.

    Note

    Setting colors are globally applied to the draw events. That means if you don't set a color, it will use the color last set, regardless of the object.

  9. With the font set we can start applying the HUD. We will start with the player lives. Add this code to the script:
    draw_set_halign(fa_left);
if ( lives >= 0 )
{
    draw_text(8, 0, "Lives: " + string(lives));
} else {
    draw_text(8, 0, "Lives: " );
}

    To ensure the text is properly formatted, we set the horizontal alignment of the text to be aligned left. The text itself needs to be a string, which can be done in two ways. First, anything in quotation marks is considered a string, such as "Lives: ". If we want to pass a number, such as the amount of lives we have, we need to convert it by passing through the string function. As seen here, if we have lives remaining we can concatenate the two things to create a single sentence Lives: 3 and draw it in the upper-left corner of the screen. If we are out of life, we draw the text without the concatenated value.

  10. The other HUD element we want is the score, which we will place on the opposite side of the screen in the upper-right corner. Add the following code:
    draw_set_halign(fa_right);
draw_text(room_width-8, 0, "SCORE: " + string(score));

    As we did with the previous text, we are setting the horizontal alignment, this time to the right. We then place the text in the proper position using the same concatenation method for the score.

  11. Let's test this out now by adding a Draw GUI event to obj_Overlord and apply this script.
  12. Run the game. As seen in the next screenshot, the game should now display the lives in the upper-left corner and update each time the player dies. It should also display the score in the upper right-hand corner and increase with every enemy killed.
    Drawing the user interface
  13. We now need to add the display for when the player wins or loses. Add the following code at the end of scr_Overlord_Draw:
    draw_set_font(fnt_WinLose);
draw_set_halign(fa_center);
if ( isVictory == true )
{
    draw_text(room_width / 2, room_height/2, "VICTORY");
}
if ( isDefeat == true )
{
    draw_text(room_width / 2, room_height/2, "DEFEAT");
}

    We change the font to fnt_WinLose and set the horizontal alignment to be in the center. We don't want the text to be displayed all the time, instead we should only show either VICTORY or DEFEAT when it is appropriate. We have already implemented the code in the Overlord for the game condition, so we just check every step whether isVictory is true or isDefeat is true. As soon as the game is either won or lost, we draw the appropriate text in the center of the room.

    The complete scr_Overlord_Draw script should look like the following code:

    draw_set_color(c_white);
draw_set_font(fnt_Scoreboard);

draw_set_halign(fa_left);
draw_text(8, 0, "LIVES: " + string(lives));

draw_set_halign(fa_right);
draw_text(room_width-8, 0, "SCORE: " + string(score));

draw_set_font(fnt_WinLose);
draw_set_halign(fa_center);
if ( isVictory == true )
{
    draw_text(room_width / 2, room_height/2, "VICTORY");
}
if ( isDefeat == true )
{
    draw_text(room_width / 2, room_height/2, "DEFEAT");
}
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.144.48.204