sábado, 2 de agosto de 2014

GameHUD: Drawing on the screen


HUD is the abbreviation of "Heads-Up Display", which is a kind of transparent display that provides information without requiring the user to look away. The HUD was originally created to be used in military aircraft. This concept is used in games to display various information to the player, as their score, time , energy, so on.

The article "GameHUD: Initializing the variables with a Macro" showed that the GameHUD Blueprint was created based on the HUD class. This was necessary so that we have access to the actions of HUD class responsible for drawing on the game screen. 

In this article we will see what is required to display the following information of the game on the screen:


To draw on the screen we need to add the "Receive Draw HUD" event to the EventGraph. This event is available only in Blueprints based on HUD class.


The actions for draw on the screen are found in the "Call Function -> HUD" category as the image below.


The only action of drawing that we will use in this article is the "Draw Text". This action receives some input values, among them are two values known as "Screen X" and "Screen Y".

These values represent the coordinates of the screen where the text will be drawn. The top left position of the screen is the origin where the values of "Screen X" and "Screen Y" are zero. The image below shows how the variation of "Screen X" and "Screen Y" happens.


The image below shows the actions necessary to draw the player score.

Click to enlarge

The "Receive HUD Draw" event provides in the variables "Size X" and "Size Y" the screen size available for drawing. In this example we will not use these variables, but they are useful if you need to place some text or image centered or in the right of the screen without depending on the screen resolution that the player is using.

The "Draw Text" function has several input parameters. In this example we modify the following parameters:
  • Text: Text to be drawn. The value is of type String.  
  • TextColor: Just click on the colored square to choose the text color that will be drawn.
  • Screen X: Horizontal position where the text will be drawn on the screen. Ranges from 0 to "Size X".
  • Screen Y: Vertical position where the text will be drawn on the screen. Ranges from 0 to "Size Y".
  • Scale: Changes the size of the text. The normal size is multiplied by this value.

In the image above we use the "Build String (Int)" function to produce a string containing the text "Score:" plus the current value of the integer variable "Score". The resulting string is passed to the "Text" parameter of the "Draw Text" function.


The drawing of the variables "Time" and "Level" are very similar. The only change in the "Draw Text" function happens in the 
parameters: Text, Text Color and Screen X. The two images below show the actions.

Click to enlarge

Click to enlarge


Next: Statue: Components
Prev: GameHUD: Function
Table of Contents