Como criar interações personalizadas com habilidades

Este passo a passo fornece um exemplo de design UMG (Unreal Motion Graphics) e suas vinculações de modelo de visualização que você pode usar para criar uma IU personalizada para o dispositivo Interação de Habilidades.

Ao criar sua interação de habilidades personalizada, defina um evento para iniciar a interação. Você também pode definir gatilhos de eventos que concedem itens aos jogadores por concluir com sucesso a interação habilitada.

Você pode desenvolver esses exemplos definindo cenas cinematográficas quando jogadores ou objetos têm como alvo determinadas zonas.

Este tutorial aborda como criar uma interação rápida de habilidades de expressão na qual os jogadores podem segurar uma entrada de gatilho para selecionar as zonas corretas.

Antes de começar a personalizar sua IU, é necessário criar e importar todos os ativos para usar nos designs. Acesse Como criar IU personalizada com materiais para saber mais sobre o uso de materiais no seu design.

Configure o dispositivo

Siga as etapas abaixo para criar um exemplo de campo de jogo no qual os jogadores direcionam uma zona perfeita para conceder sucesso ao serem atingidos. Ao projetar sua IU, sinta-se à vontade para renomear os painéis à medida que os coloca no painel Hierarchy.

1. No Navegador de Conteúdo, coloque um dispositivo Interação de Habilidade no seu projeto.

2. No painel Details do dispositivo, modifique as seguintes configurações.

   

   Opção	Valor	Descrição
   UI Type	Bar	Determina o tipo de interface de usuário exibida.
   Custom Widget	Adicione seu widget de usuário personalizado	Selecione um widget personalizado para usar na interação.
   Interaction Type	Charge and release	Carregue e solte para animar enquanto segura o botão do gatilho e ativa ao soltar.
   Meter Color	Pick a color	Este exemplo usa a cor vermelha.
   Good Zone Size	80.0	Define o tamanho da área boa como uma porcentagem do medidor total.
   Good Zone Position	0.0	Define a posição da área boa.
   Perfect Zone Size	15.0	Define o tamanho da área perfeita como uma porcentagem da área boa.
   Perfect Zone Position	100.0	Define a posição da zona perfeita.
   Good Zone Color	Pick a color	Este exemplo usa a cor verde-escuro.
   Perfect Zone Color	Pick a color	Este exemplo usa a cor verde-limão.

Adicione a imagem de fundo

Siga as etapas abaixo para criar a imagem de plano de fundo para a barra de medidor vertical neste exemplo. O plano de fundo neste tutorial é uma barra preta arredondada na qual as zonas ficarão no topo.

Use a imagem acima como referência ao recriar as etapas deste tutorial.

1. Crie um widget de usuário para sua interação.

2. Localize e clique duas vezes no widget de usuário anexado ao dispositivo para acessar o Editor de Widget de Usuário.

3. No painel Hierarchy, arraste e aninhe uma sobreposição para servir como a tela geral. Neste exemplo, é chamada de Overlay. Em seguida, arraste outra sobreposição para conter o plano de fundo. Neste exemplo, ela se chama SID.

4. Arraste e aninhe uma imagem, chamada Bar no exemplo, na sobreposição-filho.

5. No painel Details da imagem, defina o material ou a textura do plano de fundo.

Configure as zonas

Você pode criar uma zona incorreta para o seu exemplo, que concederá uma falha automática quando direcionada. No entanto, este exemplo usa apenas uma zona perfeita, que consiste em três contêineres:

• Uma área inicial vazia, chamada PerfeitoZoneStart.

• A zona boa ou perfeita, chamada SizeBox.

• A área vazia depois, chamada de PerfeitoZoneEnd.

Siga as etapas abaixo para recriar a zona perfeita deste exemplo.

1. No painel Palette, arraste e aninhe uma caixa de pilha dentro da sobreposição-filho, chamada de SID no exemplo.

2. Em seguida, arraste e aninha os seguintes filhos dentro da caixa de pilha: Scale Box > Size Box.

   1. No painel Details do painel Scale Box, defina a opção Stretch como User Specified. Em seguida, defina User Specified Scale para indicar quanto espaço você deseja acima da zona perfeita. Para este exemplo, defina a escala para 0,27.
   2. Em Size Box, defina a configuração Height Override como a altura do medidor superior.

3. Dentro da mesma caixa de pilha, arraste também uma caixa de tamanho > caixa de escala > sobreposição > imagem.

   1. No painel Details da caixa de tamanho, defina a substituição de altura como o tamanho da zona perfeita.

   2. No painel Details da caixa de escala, defina a configuração Stretch como User Specified*. Em seguida, defina a configuração User Specified Scale como 1.

   3. A sobreposição PerfectZone conterá o material ou textura para a zona perfeita.

4. Dentro da mesma caixa de pilha, arraste também uma sobreposição > caixa de tamanho.

   1. No painel Details da sobreposição PerfectZoneEnd, defina a configuração Stretch como User Specified. Em seguida, defina User Specified Scale para indicar quanto espaço você deseja acima da zona perfeita. Para este exemplo, defina a escala para 0,49.
   
   1. No painel Details da caixa de tamanho, defina a configuração Height Override como a altura do medidor inferior.
   

5. Para adicionar detalhes extras, você pode incluir edições para as zonas de plano de fundo adicionando uma imagem, chamada Notches no exemplo, abaixo da caixa de pilha.

Configure a depuração

Para este exemplo, o depurador precisa estar dentro de um contêiner móvel. Para fazer isso, você deve criar uma caixa de pilha com dois itens.

O primeiro item contém uma caixa de tamanho definida como User Scale, que você vinculará posteriormente à escala do medidor de interação de habilitadas no ViewModel. O segundo item conterá um contêiner com o depurador.

1. Abaixo do SID de sobreposição, arraste e aninhe uma caixa de pilha, chamada ScrubberStackBox no exemplo, para conter duas configurações-filho de: Sobreposição > caixa de tamanho e Caixa de tamanho > caixa de escala > imagem chamada Scrubber.

   1. No painel Details do ScrubberMovingZone de sobreposição, defina a configuração Stretch como User Specified. Em seguida, defina a configuração User Specified Scale como 0.
   
   1. No painel Details da caixa de tamanho, defina a configuração substituição de altura como a altura do medidor superior.
   
   1. Defina a configuração Height Override para o ScrubberContainer de caixa de tamanho como 0.
   
   1. Altere a configuração Stretch da caixa de escala de sobreposição para User Specified. Defina a configuração User Specified Scale como 1.
   
   1. Na configuração Image do depurador de imagem, defina o material ou a textura do depurador.
   

Defina o modelo de visualização

Para conectar sua IU personalizada ao dispositivo Interação de Habilidade, siga estas etapas.

1. No widget de usuário, navegue até Window > Viewmodels para abrir a janela Viewmodels.

2. Clique em +Viewmodel. Em seguida, selecione Device - Skilled Interaction View Model e clique em Select.

3. Na barra de ferramentas inferior ou na aba Window, selecione View Bindings.

4. Configure suas vinculações de visualização para corresponder à imagem abaixo.

   
   1. Clique em + Add Widget para adicionar o ScrubberMovingZone.
   2. Defina ScubberMovingZone como User Specified Scale e UEFN_SknowedInteraction_ViewModel como Current Meter Value.
   3. Clique em + Add Widget para adicionar o PerfectZoneStart.
   4. Defina PerfectZoneStart como User Specified Scale e UEFN_SkilledInteraction_ViewModel como Perfect Zone Min.
   5. Clique em + Add Widget para adicionar o PerfectZoneEnd.
   6. Defina PerfectZoneStart como User Specified Scale e adicione uma função de conversão para Add Int Double.
   7. Defina A como 1.
   8. Defina B como UEFN_SkilledInteraction_Viewmodel/Perfect Zone Max.
   9. Defina Negate B como True.