Agora vamos usar o Unreal Motion Graphics (UMG) para a criar um HUD usando o template "Vehicle". Um HUD (Heads Up Display) é como se fosse um painel transparente que exibe informações na própria tela do jogo.
Neste artigo vamos criar a parte visual do HUD e no próximo artigo vamos criar as Ações Blueprints para obter as informações necessárias na exibição do HUD.
Se você ainda não criou um projeto com o template "Vehicle", crie um agora no menu "File->New Project". Este template exibe duas informações na tela, que são a velocidade e a marcha atual:
Será criado um novo HUD para exibir estas informações e também iremos adicionar um medidor de combustível (FUEL) para o carro. O HUD ficará desta forma:
Neste novo HUD existem 3 tipos de elementos de tela:
- Textos: Usados na velocidade e no título "Fuel";
- Barra de Progresso: Usado para exibir a quantidade de combustível;
- Imagens: Usadas para representar visualmente a Marcha atual do carro;
São usadas 7 imagens para representar as Marchas do carro. A imagem abaixo reune todas as imagens usadas, que são a Neutra, de 1ª a 5ª e Ré. Cada imagem possui o tamanho de 256x256 pixels. Eu sugiro separá-las para importar individualmente cada imagem como textura.
É necessário também importar a fonte que será utilizada. O nome da fonte é "Digital Dream" e foi criada por Jakob Fischer (pizzadude.dk). O download pode ser feito no link: www.fontsquirrel.com/fonts/Digital-dream
Depois de fazer o download, descompacte o arquivo ZIP e importe a fonte com o nome "DIGITALDREAM.ttf" na Unreal Engine, clicando no botão "Import" do Content Browser. Se preferir, você pode usar qualquer outra fonte.
Vamos agora criar o Widget Blueprint para definirmos o HUD. Clique no botão "Add New" do "Content Browser", escolha o submenu "User Interface" e depois a opção "Widget Blueprint":
Coloque o nome de "UMG_HUD" para o novo Widget Blueprint e depois dê duplo clique nele para abrir o editor UMG. A tela que vamos definir no Canvas (área de desenho) vai ficar desta forma:
 |
| Clique para aumentar |
No lado esquerdo do editor UMG, na aba "Palette" estão os elementos que serão usados como o "Text", "Image" e "ProgressBar" (Barra de Progresso). Além destes elementos, será utilizado também o "Horizontal Box" para organização dos elementos.
Vamos adicionar o medidor de velocidade. Primeiro arraste um "Horizontal Box" e solte próximo ao canto superior esquerdo do Canvas, depois arraste dois elementos do tipo "Text" para dentro do "Horizontal Box".
Selecione o primeiro "Text" e na aba "Details", escreva "SPEED:" na propriedade "Text". Escolha uma cor vermelha e selecione a fonte "DigitalDream" com tamanho 40, conforme imagem abaixo:
Faça os mesmos ajustes no segundo elemento do tipo "Text". Por enquanto vamos escrever "50 KM/H" apenas para servir de referência quanto ao tamanho. Depois faremos o ajuste para que este valor seja obtido diretamente de uma variável.
O medidor de velocidade ficará assim:
O símbolo branco que aparece a esquerda representa a âncora de referência para posicionar o elemento, ou seja, a posição X e Y do elemento será relativo a posição da âncora. Para alterar a posição da âncora selecione o "Horizontal Box" e na aba "Details" clique no ComboBox da propriedade "Anchors". A imagem abaixo mostra as opções disponíveis:
Para o medidor de combustível (fuel), vamos adicionar outro "Horizontal Box" na parte superior central do Canvas. Defina a posição da âncora no centro superior.
Arraste um elemento do tipo "Text" para dentro do "Horizontal Box", escreva "FUEL", mude a cor para verde e altere a fonte para "DigitalDream" com tamanho 40. Depois arraste um "ProgressBar" para dentro do mesmo "Horizontal Box". O resultado deve ficar parecido com isso:
A imagem abaixo mostra a aba "Details" da "ProgressBar". A propriedade "Bar Fill Type" permite a seleção de vários tipos de barra de progresso. A propriedade "Percent", varia de 0.0 a 1.0 e define o valor atual da barra de progresso. Foi colocado o valor "0.7" apenas para visualização da barra de progresso. Este valor será obtido de uma variável posteriormente.
O último elemento que vamos adicionar é do tipo "Image". Arraste um para o canto superior direito do Canvas. Na aba "Details" coloque "GearImages" como nome do elemento. Defina a posição da âncora para o canto superior direito. Coloque o valor "-256" para a posição X. Marque a opção "Size to Content".
A imagem que será utilizada tem o tamanho de 256x256. Por enquanto, escolha uma das imagens que representa a Marcha do carro na propriedade "Brush->Image". Posteriormente, vamos criar uma função para recuperar a imagem correta de acordo com a marcha atual. O "GearImages" aparecerá desta forma no editor UMG:
Na aba "Hierarchy" podemos ver o relacionamento entre os elementos que foram adicionados ao Canvas:
No próximo artigo veremos as Ações Blueprints necessárias para concluir este exemplo de HUD.
