sábado, 2 de agosto de 2014

GameHUD: Desenhando na tela


HUD é a abreviação de "Heads-Up Display", que é um tipo de tela transparente que fornece informações sem que o usuário precise desviar seu olhar. O HUD foi criado originalmente para ser usado em aeronaves militares. Este conceito é usado nos jogos para mostrar diversas informações para o jogador, como sua pontuação, o tempo, energia, etc.

No artigo "
GameHUD: Inicializando as variáveis com uma Macro" foi mostrado que o Blueprint GameHUD foi criado com base na classe HUD. Isto foi necessário para podermos ter acesso às Ações da classe HUD responsável por desenhar na tela do jogo. 

Neste artigo vamos ver o que é necessário para exibir as seguintes informações do jogo na tela:


Para desenhar na tela precisamos adicionar no EventGraph o evento "Receive Draw HUD" que está disponível somente em Blueprints baseados na classe HUD.


As Ações para desenhar na tela são encontradas na categoria "Call Function -> HUD" conforme a imagem abaixo.


A única ação de desenho que iremos usar neste artigo é a "Draw Text" (desenha texto). Esta ação recebe alguns valores de entrada, entre eles estão dois valores conhecidos como "Screen X" e "Screen Y". 

Estes valores representam as coordenadas da tela onde será desenhado o texto. A posição superior esquerda da tela é a origem onde os valores de "Screen X" e "Screen Y" são iguais a zero. A imagem abaixo mostra como ocorre a variação dos valores de "Screen X" e "Screen Y".


A imagem abaixo mostra as ações necessárias para desenhar os pontos do jogador:

Clique para aumentar

O evento "Receive Draw HUD" fornece o tamanho da tela disponível para desenho nas variáveis "Size X" e "Size Y". Neste exemplo não vamos usar estas variáveis, mas elas são úteis se for necessário posicionar algum texto ou imagem centralizado ou na parte direita da tela sem depender da resolução de tela que o jogador estiver utilizando.

A função "Draw Text" possui diversos parâmetros de entrada. Neste exemplo modificamos os seguintes parâmetros:
  • Text: Texto que será desenhado. O valor é do tipo String. 
  • TextColor: Basta clicar no quadrado colorido para escolher a cor do texto que será desenhado.
  • Screen X: Posição horizontal onde será desenhado o texto na tela. Varia de 0 a "Size X".
  • Screen Y: Posição vertical onde será desenhado o texto na tela. Varia de 0 a "Size Y".
  • Scale: Altera o tamanho do texto. O tamanho normal é multiplicado por este valor.

Na imagem acima usamos a função "Build String(Int)" para produzir uma string contendo o texto "Score:" mais o valor atual da variável inteira "Score". A string resultante é passada para o parâmetro "Text" da função "Draw Text".

O desenho das variáveis "Time" e "Level" são bem parecidos. A única mudança 
na função "Draw Text" ocorre nos parâmetros: Text, Text Color e Screen X. As duas imagens abaixo mostram as ações.

Clique para aumentar

Clique para aumentar


Próximo: Statue: Componentes
Anterior: GameHUD: Função
Sumário