SDKs para o Unreal Engine / Como usar o SDK para configurar a interface do aplicativo
  Voltar aos Documentos

SDKs para o Unreal Engine

Última versão v0

Como usar o SDK para configurar a interface do aplicativo

O SDK inclui um construtor de interface. O construtor de interface permite configurar os elementos visuais da interface do aplicativo.

Você pode alterar a interface do usuário editando as configurações globais que afetam os elementos visuais da interface — cor, textura e fonte. Essas propriedades são agrupadas em um tema.

Para trocar os elementos da interface do mesmo tipo, você pode usar os wrappers de widget — contêineres para elementos de interface criados.

O construtor de interface contém 2 partes independentes:

  • Temas são responsáveis por trabalhar com visuais.
  • O gerenciador de widgets é responsável por trabalhar com widgets e permite substituir partes inteiras da interface.

Como trabalhar com temas

Tema é um ativo do tipo XsollaUtilsTheme. Ele contém a lista de cores, fontes e texturas que são usadas pelos elementos da interface. Cada lista é um conjunto de pares de chave-valor em que a chave é um nome exclusivo de um parâmetro de tema e o valor é uma cor, fonte ou textura correspondente.

Você pode trabalhar com temas em Settings > Project Settings > Plugins > Xsolla UIBuilder:

  • Para definir o tema da interface, selecione-o no campo Interface Theme.
  • Para editar o tema selecionado, clique no ícone 🔎 próximo ao campo Interface Theme.

Observação
Se o SDK for instalado via Epic Games Launcher, modificar os temas padrão do SDK fará alterações em outros projetos que usam esses temas. Recomendamos a criação de um tema separado para seu aplicativo.
  • Para criar um novo tema, clique no ícone + perto do campo Interface Theme.
  • Para excluir um tema selecionado, clique no ícone × próximo ao campo Interface Theme.
Observação
Se você alterar o nome do parâmetro do tema, todos os seus widgets precisarão ser editados.

Conecte o elemento da interface ao tema

Para conectar o elemento da interface ao tema:

  1. No blueprint do widget do elemento da interface, obtenha acesso ao tema pelos seguintes métodos:
    • GetCurrentTheme — retorna o tema atual especificado nas configurações do plug-in.
    • GetTheme — retorna um tema pelo nome especificado no parâmetro ThemeClass.
  2. Use os seguintes métodos para obter os valores de parâmetros definidos do tema passando o nome do parâmetro do tema para eles:
    • GetColor — obtém o valor da cor.
    • GetFont — obtém a fonte.
    • GetBrush — obtém a textura.

No projeto de demonstração, cada widget que suporta temas tem um conjunto de parâmetros do tipo String com nomes de parâmetros de tema. Esses parâmetros são usados para configurar um visual para o elemento da interface.

Para encontrar exemplos de widgets que suportam temas, vá para Content Browser > Xsolla Content > Common > Components > Primitives.

Trabalhar com o gerenciador de widgets

O gerenciador de widgets é um mecanismo que permite substituir automaticamente os elementos da interface pelos elementos da interface do mesmo tipo, mas alterando suas aparências e comportamento.

Para criar a interface que oferece suporte ao gerenciador de widgets, as seguintes condições devem ser atendidas:

  • Crie um widget com a interface unificada especificada para o elemento de interface.
  • Defina o nome do tipo para o widget do elemento da interface na biblioteca de widgets.
  • Passe o tipo de widget para o elemento da interface ao wrapper. O wrapper é um contêiner para criar os elementos da interface. O nome do tipo de widget deve ser idêntico ao nome na biblioteca.
  • Ao criar uma interface, use o wrapper em vez do widget.

Wrappers de widgets

Um wrapper é um contêiner que cria um widget necessário na área da página que é ocupada pelo wrapper.

Use wrappers de widget ao criar a interface para alterar automaticamente os elementos em toda a interface. Para fazer isso, altere o widget no wrapper. O fluxo padrão, que usa primitivas de interface, sugere substituir todos os widgets manualmente nesse cenário.

Aqui estão os seguintes wrappers para diferentes tipos de widget:

  • W_ButtonWrapper — para um botão
  • W_InputWrapper — para um campo de entrada
  • W_TextWrapper — para texto
  • W_RichTextWrapper — para texto enriquecido (rich text)
  • W_ImageWrapper — para uma imagem
  • W_CheckBoxWrapper — para uma caixa

No painel Details, você pode configurar os parâmetros de exibição dos widgets criados por um wrapper. No campo Widget Library Name, você deve especificar o nome do tipo de widget da biblioteca de widgets atual.

Você pode encontrar os planos de wrappers de widget em Content Browser > Xsolla Content > Common > Components > Wrappers.

Os wrappers usam os métodos do gerenciador de widgets para interagir com os widgets.

Interfaces de widget

Para fazer com que as primitivas da interface interajam com o wrapper do widget como fariam com o widget usual, os wrappers usam interfaces unificadas.

Existem os seguintes wrappers para diferentes tipos de widgets:

  • BPI_PrimitivesButton — para um botão
  • BPI_PrimitivesInput — para um campo de entrada
  • BPI_PrimitivesText — para texto
  • BPI_PrimitivesRichText — para texto enriquecido (rich text)
  • BPI_PrimitivesImage — para uma imagem
  • BPI_PrimitivesCheckbox — para uma caixa

Você pode configurar interfaces para os widgets de elementos da interface na seção Implemented Interfaces do painel Details.

Você pode encontrar as interfaces de widget em Content Browser > Xsolla Content > Common > Components > Interface.

Biblioteca de widgets

A biblioteca de widgets é um ativo do tipo XsollaUtilsWidgetsLibrary que contém a lista de classes de widget em um formato de pares chave-valor. A chave contém o nome do tipo de widget e o valor contém a classe de widget que será criada por um wrapper correspondente com essa chave.

A biblioteca de widgets funciona como um conector entre os wrappers e as classes de widget.

A biblioteca de widgets padrão BP_DefaultWidgetLibrary está incluída no SDK. Esta biblioteca contém a lista de elementos da interface do projeto de demonstração.

Você pode trabalhar com a biblioteca de widgets em Settings > Project Settings > Plugins > Xsolla UIBuilder:

  • Para instalar a biblioteca de widgets atual, selecione-a no campo Widgets Library.
  • Para editar a biblioteca de widgets selecionada, clique no ícone 🔎 próximo ao campo Widgets Library.

Observação
Se o SDK for instalado via Epic Games Launcher, modificar a biblioteca de widgets padrão do SDK causará alterações em outros projetos que usam essa biblioteca. Recomendamos a criação de uma biblioteca de widgets separada para o seu aplicativo.

  • Para criar uma nova biblioteca de widgets, clique no ícone + perto do campo Widgets Library.
  • Para excluir a biblioteca de widgets selecionada, clique no ícone × perto do campo Widgets Library.

Use os seguintes métodos nos blueprints de wrapper para obter acesso à biblioteca de widgets:

  • GetCurrentWidgetsLibrary — retorna a biblioteca de widgets atual especificada nas configurações do plug-in.
  • GetWidgetsLibrary — retorna a biblioteca de widgets especificada pelo nome especificado no parâmetro WidgetLibraryClass.

Use o método GetWidget nos blueprints do wrapper para obter o tipo de widget da biblioteca.

Métodos do gerenciador de widgets

Os métodos a seguir são usados pelos wrappers para interagir com os widgets. Use-os ao criar seus próprios wrappers e widgets que suportam temas.

Métodos para trabalhar com botões

Nome do métodoDescrição
SetButtonEnabledConfigura o estado do botão que define se o botão reage aos eventos de teclado, mouse, cronômetro, etc.
IsButtonEnabledRetorna o estado do botão que define se o botão reage aos eventos de teclado, mouse, cronômetro, etc.
GetWidgetRetorna a lista de primitivas de interface que contêm o widget. É usado para se inscrever no evento de clique no botão.
ConstructButtonInicializa o widget de botões. Ele é usado pelo wrapper de widgets.
SetExtraDataDefine uma lista de dados adicionais para um botão. Cada widget processa os dados recebidos, demonstra-os ou usa-os de acordo com a lógica interna. Por exemplo, você pode usar o conjunto de dados adicionais para passar a lista dos elementos do menu suspenso para o botão que tem um menu suspenso.
SetIconDataDefine uma lista de ícones a serem exibidos para um botão. Use esse método para especificar o tamanho do ícone e a distância entre o ícone e outros elementos do botão.
SetButtonSelectedDefine o valor do botão de alternância. Por exemplo: on ou off, in cart ou not in cart, etc.
GetThemeDataRetorna o conjunto de parâmetros de tema usado pelo widget de botões.
SetButtonTextDefine o texto de um botão.

Métodos para trabalhar com caixas

Nome do métodoDescrição
SetIsCheckedDefine o estado da caixa, se ela está marcada ou desmarcada.
GetIsCheckedRetorna o estado da caixa.
IsTickHoveredVerifica se o cursor do mouse paira sobre a área da caixa.
ConstructCheckboxInicializa o widget de caixas. Ele é usado pelo wrapper de widgets.
GetWidgetRetorna a lista de primitivas de interface contidas pelo widget. Usado para se inscrever nos eventos de caixa.
GetThemeDataRetorna o conjunto de parâmetros de tema usado pelo widget de caixas.
SetTextDefine o texto da caixa.
GetTextRecebe o texto da caixa.

Métodos para trabalhar com texto ou texto enriquecido (rich text)

Nome do métodoDescrição
GetTextRetorna o valor de texto.
SetTextDefine o valor do texto.
GetWidgetRetorna a lista de primitivas de interface contidas pelo widget. É usado para se inscrever nos eventos de texto.
GetThemeDataRetorna o conjunto de parâmetros de tema usado pelo widget de textos.
ConstructTextInicializa o widget de textos. É usado pelo wrapper de widgets.

Métodos para trabalhar com imagens

Nome do métodoDescrição
GetImageRetorna a imagem.
SetImageDefine a imagem.
GetWidgetRetorna a lista de primitivas de interface contidas pelo widget. É usado para se inscrever nos eventos de imagem.
GetThemeDataRetorna o conjunto de parâmetros de tema usado pelo widget de imagens.
ConstructImageInicializa o widget de imagens. É usado pelo wrapper de widgets.

Método para trabalhar com campos de entrada

Nome do métodoDescrição
GetTextRetorna o texto ao campo de entrada.
SetTextDefine o texto para o campo de entrada.
GetWidgetRetorna a lista de primitivas de interface contidas pelo widget. Usado para se inscrever nos eventos de campos de entrada.
ConstructInputInicializa o widget de campos de entrada. Ele é usado pelo wrapper de widgets.
GetHintRetorna o texto da dica para o campo de entrada.
SetHintDefine o texto da dica para o campo de entrada.
SetupFocusDefine o foco no campo de entrada.
GetThemeDataRetorna o conjunto de parâmetros de tema usado pelo widget de campos de entrada.
Este artigo foi útil?
Obrigado!
Podemos melhorar alguma coisa? Mensagem
Que pena ouvir isso
Explique porque este artigo não foi útil para você. Mensagem
Obrigado pelo seu feedback!
Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.
Avalie esta página
Avalie esta página
Podemos melhorar alguma coisa?

Não quero responder

Obrigado pelo seu feedback!
Última atualização: 10 de Outubro de 2023

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Relatar um problema
Nós sempre avaliamos nossos conteúdos. Seu feedback nos ajuda a melhorá-los.
Forneça um e-mail para que possamos responder
Obrigado pelo seu feedback!