Romero Blueprints: As Ações Blueprints do HUD

Este artigo é a continuação do artigo "Desenhando um HUD com UMG".

Vamos adicionar Ações no Widget Blueprint "UMG_HUD" que foi criado no artigo anterior e também no Blueprint "Sedan", que representa o carro controlado pelo jogador no template "Vehicle".

Abra o Widget Blueprint "UMG_HUD" e mude para o modo "Graph". Neste artigo vamos criar 3 funções para obter as informações de velocidade, marcha e combustível do carro. Vamos criar uma variável para referenciar o carro do jogador e um array de "Brushes" para guardar as imagens que representam cada uma das marchas do carro. No final deste artigo, a aba "MyBlueprint" do "UMG_HUD" ficará assim:

Comece criando a variável "PlayerSedan". Ela é do tipo "Sedan", que é um Blueprint criado para o template "Vehicle". Vamos inicializar esta variável no evento "Construct" do "UMG_HUD" desta forma:

Clique para aumentar

No modo "Designer", clique no elemento de texto que contém o valor da velocidade. Na aba "Details", clique no botão "Bind", ao lado da propriedade "Text", e escolha "Create Binding" para o editor criar uma nova função.

O que fizemos foi vincular o valor da propriedade "Text" ao valor de retorno de uma função. Renomeie a função criada para "GetSedanSpeed" e coloque as seguintes ações:

No Blueprint "Sedan" existe uma variável chamada "Speed Display String" que contém o valor da velocidade mais as letras "KM/H".

O bloco sem nome na figura acima é um conversor do tipo "String" para o tipo "Text". Estes conversores são criados automaticamente pelo editor quando é feita a ligação entre os dois tipos.

Isto é tudo que precisa ser feito para exibir corretamente a velocidade. Agora vamos fazer os ajustes necessários para a exibição da Marcha.

Crie uma variável chamada "GearBrushes" do tipo "Slate Brush" e marque o ícone ao lado do tipo da variável para transformá-la em um Array. O tipo

"Slate Brush" foi criado especificamente para o UMG.

Na aba "Details" da variável, na seção "Default Value", adicione 7 elementos para o Array. Para cada elemento associe uma imagem que representa uma das marchas. Estas imagens devem ter sido importadas como Texturas no artigo anterior. Use a seguinte ordem:

0: Marcha Neutra;
1 a 5: Usar a marcha equivalente;
6: Marcha Ré;

No modo "Designer", clique no elemento do tipo "Image" que representa a Marcha. Na aba "Details", categoria "Appearance", propriedade "Brush", clique no botão "Bind" e depois em "Create Binding". Renomeie a função criada para "GetSedanGear".

Vamos usar uma função que faz parte do Blueprint "Sedan" chamada "GetCurrentGear". Esta função retorna um valor inteiro que representa a marcha atual. Se o valor for zero então está em marcha neutra. Se o valor for negativo, significa que o veículo está em marcha Ré.

A função "getSedanGear" possui as seguintes ações:

Clique para aumentar

Foi criada uma variável inteira com o nome "BrushIndex" para guardar a posição no array do Brush que será retornado. Se o valor da marcha for negativo então o valor do índice do array será 6, que é onde está a imagem que representa a Marcha Ré. É usado uma ação "Get" para retornar a imagem correta do Array "GearBrushes" de acordo com o valor do índice "BrushIndex".

Vamos fazer mais alguns ajustes para poder executar o exemplo. Depois faremos as mudanças necessárias para incluir o uso do combustível (Fuel) no jogo.

Abra o Blueprint "Sedan", procure o evento "BeginPlay" no "EventGraph". No início do evento adicione duas ações que irão criar a instância do "UMG_HUD" e adicionar a viewport.

Clique para aumentar

No editor de nível, clique no botão "Settings" que fica na barra superior e escolha a opção "World Settings". Na categoria "GameMode" mude a propriedade HUD Class para a classe "HUD" ao invés de "VehicleHUD", para que não apareça a versão antiga do HUD criada pelo template. Com essas mudanças o exemplo já pode ser executado para ver o funcionamento da velocidade e da marcha no novo HUD.

Deixei a propriedade de combustível (fuel) por último pois vamos fazer algumas alterações no Blueprint "Sedan". Será uma ótima oportunidade para praticarmos diversos conceitos de Blueprints que vimos até agora.

Abra o Blueprint "Sedan" e crie uma nova variável com o nome "Fuel", do tipo "Float" (valor fracionário). Marque a opção "Editable" e escolha "Display" para a categoria da variável. Desta forma ela fica junta com as outras variáveis que são usadas no HUD. Na parte de baixo da aba "Details" da variável "Fuel", coloque "1.0" como valor padrão (Default Value) que representa o tanque cheio. A imagem abaixo mostra a variável "Fuel".

Com esta nova variável criada no Blueprint "Sedan", podemos concluir as modificações necessárias no Widget Blueprint "UMG_HUD". No modo "Designer" do "UMG_HUD", clique no elemento do tipo "ProgressBar" que representa o medidor de combustível. Na aba "Details", categoria "Appearance", propriedade "Percent", clique no botão "Bind" e depois em "Create Binding". Renomeie a função criada para "GetSedanFuel".

O conteúdo da função "GetSedanFuel" é este:

De volta ao Blueprint "Sedan". Vamos criar uma função chamada "UpdateFuel". Esta função receberá como parâmetro de entrada o valor do "AxisValue" que representa o movimento para frente ou para trás no controle ou teclado.

A função tem um parâmetro de saída chamada "ThrottleValue" que representa a aceleração do veículo. Esta função será responsável por diminuir a quantidade de combustível. Se não tiver mais combustível o valor de "ThrottleValue" será zero impedindo o carro de continuar se movendo.

Crie uma nova função com o nome "UpdateFuel" no Blueprint "Sedan":

Na aba "Details" da função "UpdateFuel", crie o parâmetro de entrada "AxisValue" do tipo "Float" e o parâmetro de saída "ThrottleValue" do tipo "Float".

Abra a função "UpdateFuel" no editor. Observe que na aba "My Blueprint" aparecerá uma nova categoria chamada "Local Variables" (variáveis locais). Uma variável local existe apenas dentro da função onde ela foi criada. Vamos criar uma variável local chamada "Throttle" do tipo "Float" para auxiliar na lógica da função "UpdateFuel".

A função "UpdateFuel" possui as seguintes ações:

Clique para aumentar

Se o valor do parâmetro "AxisValue" for igual a zero, significa que o jogador não pressionou o controle ou teclado para mover o carro para frente ou para trás. A função verifica se o valor de "AxisValue" é diferente de zero e se a variável "Fuel" é maior que zero. Se for verdadeiro, ocorre a aceleração normal e o combustível diminui. Senão, a aceleração será zero.

Esta função será chamada a cada Tick. Vamos colocar a chamada para esta função no evento "InputAxis MoveForward" do Blueprint "Sedan" que está abaixo.