JanelasMacSoftwareConfiguraçõesSegurançaProdutividadeLinuxAndroidDesempenhoConfiguraçãoApple Tudo

Como criar uma interface de usuário personalizada no Unreal Engine

Editado 3 meses atrás por ExtremeHow Equipe Editorial

Unreal EngineInterface do UsuárioDesign de UIUMGHUDProjetosGráficosWidgetsUXDesign interativo

Tradução atualizada 3 meses atrás

Criar uma interface de usuário (UI) personalizada no Unreal Engine pode melhorar muito a experiência do usuário em jogos e aplicativos. O Unreal Engine oferece uma estrutura robusta chamada UMG (Unreal Motion Graphics) que permite aos desenvolvedores de jogos projetar e implementar UIs interativas. Neste guia, iremos guiá-lo através do processo de criação de uma UI personalizada no Unreal Engine.

Compreendendo o básico do UMG

Unreal Motion Graphics (UMG) é o sistema visual de UI dentro do Unreal Engine. UMG permite que os desenvolvedores criem elementos de UI, como botões, rótulos de texto, sliders e muito mais. Através do uso de Blueprints e C++, os desenvolvedores podem facilmente integrar widgets UMG em seus projetos de jogos.

A base do UMG é o blueprint do widget de UI. No Unreal Engine, um widget é um bloco de construção básico para criar uma UI. Cada widget representa um componente individual da interface do usuário, como um botão ou caixa de texto.

Configurar seu projeto

Para começar a criar uma UI personalizada, primeiro precisamos configurar nosso projeto. Abra o Unreal Engine e crie um novo projeto ou use um existente. Certifique-se de selecionar as configurações desejadas para seu projeto, como a plataforma alvo e as configurações gráficas.

Criando um blueprint de widget de UI

  1. No Content Browser, navegue até a pasta onde você deseja criar seu novo widget de UI. Clique com o botão direito no Content Browser e escolha User Interface → Widget Blueprint. Nomeie seu widget como “MainMenuWidget” ou algo descritivo.
  2. Dê um duplo clique no widget recém-criado para abrir o editor de Widget Blueprint. Aqui, você pode projetar e personalizar o layout da sua UI.

Projetando o layout da UI

Existem três áreas principais no editor de Widget Blueprint: o painel Hierarchy, a aba Designer e a aba Graph.

Painel de Hierarchy

O painel Hierarchy exibe uma visualização em árvore de todos os widgets na UI. Você pode usar este painel para organizar e gerenciar os widgets que compõem sua interface.

Aba Designer

A aba Designer é onde você fisicamente organiza seus widgets na tela. Você pode arrastar e soltar widgets do painel de seleção na tela para começar a construir sua interface. Widgets disponíveis no painel de seleção incluem:

Aba Graph

A aba Graph é usada para criar lógica usando blueprints. Aqui, você pode definir como os widgets se comportam em resposta a interações do usuário. Por exemplo, quando um botão é clicado, você pode especificar quais ações devem ocorrer.

Criando um menu principal simples

1. Design do menu principal

Na aba Designer do nosso widget, vamos criar um layout simples que inclui um título e um botão Iniciar:

  1. Do painel de seleção, arraste o widget Text para a tela. No painel Details, defina a propriedade Text como “Main Menu”.
  2. Em seguida, arraste o widget Button para a tela abaixo do texto. Dentro do botão, arraste outro widget Text e defina seu texto como "Start Game".

2. Lidando com interações de botões

Agora, queremos definir o que acontece quando clicamos no botão “Start Game”. Para fazer isso, vá para a aba Graph.

  1. Na aba Graph, selecione o botão na hierarquia. No painel Details, role até a seção Events e clique no + ao lado de OnClicked para criar um novo evento.
  2. Isso adiciona um nó OnClicked ao gráfico de eventos. A partir daqui, você pode definir a lógica que acontece quando o botão é pressionado. Por exemplo, você pode carregar um novo nível usando o nó “Open Level” e especificar o nome do nível que deseja carregar.

Implementação da funcionalidade de UI em C++

Para aqueles familiarizados com C++, o Unreal Engine permite criar e manipular widgets UMG programaticamente. Abaixo está um exemplo de criação e exibição de um widget usando C++:

#include “MainMenuWidget.h” #include “Blueprint/UserWidget.h” // Function to create and add widget to viewport void AYourGameMode::BeginPlay() { Super::BeginPlay(); // Check the widget class is valid if (MainMenuWidgetClass != nullptr) { UUserWidget* MainMenu = CreateWidget (GetWorld(), MainMenuWidgetClass); if (MainMenu != nullptr) { MainMenu->AddToViewport(); } } }

O código acima cria um widget durante o jogo quando o método BeginPlay do GameMode é acionado. Você precisa garantir que MainMenuWidgetClass seja uma referência válida ao seu blueprint de widget.

Adicionando interatividade à sua UI

Além de pressionar botões, você pode tornar sua UI mais dinâmica respondendo a outros tipos de entrada. Abaixo estão alguns elementos interativos comuns que você pode querer incluir:

Sliders

Sliders são úteis para configurações como controle de volume. Você pode capturar o valor de um slider e aplicá-lo ao sistema de áudio. O exemplo abaixo mostra como lidar com mudanças em um slider:

// Event to change game's master volume void UMyGameInstance::OnVolumeSliderChanged(float Value) { // Assumes Value is in range [0.0, 1.0] UGameplayStatics::SetSoundMixClassOverride(this, SoundMix, SoundClass, Value, 1.0f, 0.0f); }

Barras de progresso

Para mostrar o progresso do jogo, use uma barra de progresso. Por exemplo, se você tiver uma tela de carregamento, vincule a barra de progresso a uma variável que atualiza à medida que o processo de carregamento avança:

// Tick function to update progress bar void ULoadingScreen::NativeTick(const FGeometry& MyGeometry, float InDeltaTime) { Super::NativeTick(MyGeometry, InDeltaTime); // Assume LoadProgress is updated elsewhere ProgressBar->SetPercent(LoadProgress); }

Melhorando a interface do usuário

Depois que sua UI estiver funcional, concentre-se na estética. Uma interface atraente pode melhorar a experiência do usuário. Aqui estão algumas dicas:

Estilo

Use o painel Details para modificar propriedades como fonte, cor e tamanho para textos e botões. Para um estilo mais avançado, considere usar folhas de estilos por meio do Slate, a biblioteca de widgets de UI do Unreal.

Animação

Para animar elementos de UI, use o painel Animations. Animações podem chamar a atenção para elementos específicos ou fornecer feedback para ações do usuário. Por exemplo, você pode querer que um botão mude de cor quando você passa o mouse sobre ele.

Teste sua UI

Testar é importante para garantir que sua UI funcione como esperado. Teste seu projeto regularmente para verificar problemas e fazer as mudanças necessárias. Obtenha uma variedade de feedback testando com diferentes usuários.

Conclusão

Criar interfaces de usuário personalizadas no Unreal Engine usando UMG pode aumentar muito a experiência do jogador. Se você estiver projetando um menu principal básico ou um HUD complexo no jogo, é essencial entender o básico do UMG e incorporar interatividade usando Blueprint ou C++. Com prática e experimentação, você pode desenvolver interfaces intuitivas e visualmente atraentes que complementam seu jogo.

Se você encontrar algo errado com o conteúdo do artigo, você pode


Comentários 



Como criar uma interface de usuário personalizada no Unreal Engine

https://www.extremehow.com/how-to-create-a-custom-user-interface-in-unreal-engine?ehal=pt






Buscar ExtremeHow (pt)