Experimente o novo exemplo do UI Toolkit – agora disponível na Asset Store
No Unity 2021 LTS, UI Toolkit oferece uma coleção de recursos, ferramentas e funcionalidades para ajudar você a construir e depurar UIs adaptativas em uma ampla gama de aplicações de jogos e extensões do Editor. Seu fluxo de trabalho intuitivo permite que criadores do Unity em diferentes funções – artistas, programadores e designers – comecem a desenvolver UIs o mais rápido possível.
Veja nosso post de blog anterior para uma explicação dos principais benefícios do UI Toolkit, como escalabilidade e desempenho aprimorados, já sendo aproveitados por estúdios como a Mechanistry para seu jogo, Timberborn.
Enquanto Unity UI continua sendo a solução preferida para posicionar e iluminar UIs em um mundo 3D ou integrar com outros sistemas do Unity, o UI Toolkit para UIs em tempo de execução já pode beneficiar produções de jogos que buscam desempenho e escalabilidade a partir do Unity 2021 LTS. É particularmente eficaz para UI de Espaço de Tela – Sobreposição, e escala bem em uma variedade de resoluções de tela.
É por isso que estamos empolgados em anunciar dois novos recursos de aprendizado para melhor apoiar o desenvolvimento de UIs com o UI Toolkit:
- Exemplo do UI Toolkit – Dragon Crashers: A demonstração está agora disponível para download gratuito na Asset Store.
- Design e implementação de interface do usuário no Unity: Este e-book gratuito pode ser baixado aqui
Continue lendo para aprender sobre algumas características principais do projeto de exemplo do UI Toolkit.
O exemplo do UI Toolkit demonstra como você pode aproveitar o UI Toolkit para suas próprias aplicações. Esta demonstração envolve uma interface completa sobre uma fatia do projeto 2D Dragon Crashers, um mini RPG, usando o fluxo de trabalho do UI Toolkit do Unity 2021 LTS em tempo de execução.
Algumas das ações ilustradas no projeto de exemplo mostram como:
- Estilizar com seletores em arquivos de folha de estilo do Unity (USS) e usar templates UXML
- Criar controles personalizados, como um medidor circular ou visualizações em abas
- Personalize a aparência de elementos como deslizadores e botões de alternância
- Use Render Texture para efeitos de sobreposição de UI, animações USS, temas sazonais e mais
Para experimentar o projeto após adicioná-lo aos seus ativos, entre em Modo de Jogo. Observe que as interfaces do UI Toolkit não aparecem na visualização da Cena. Em vez disso, você pode visualizá-las na visualização do Jogo ou Construtor de UI.
O menu à esquerda ajuda você a navegar pelas telas do menu principal modal. Esta coluna vertical de botões fornece acesso às cinco telas modais que compõem o menu principal (elas permanecem ativas enquanto você alterna entre as telas).
Embora alguma interatividade seja possível, como curar os personagens arrastando poções disponíveis na cena, a jogabilidade foi mantida ao mínimo para garantir o foco contínuo nos exemplos de UI.
Vamos dar uma olhada mais de perto nas UIs na barra de menu:
- A tela inicial serve como uma plataforma de lançamento ao iniciar o aplicativo. Você pode usar esta tela para jogar o jogo ou receber mensagens de chat simuladas.
- A tela personagem envolve uma mistura de GameObjects e elementos de UI. É aqui que você pode explorar cada um dos quatro Dragon Crashers personagens. Use as abas de estatísticas, habilidades e biografia para ler os detalhes específicos do personagem e clique nos slots de inventário para adicionar ou remover itens. A área de visualização mostra um personagem 2D iluminado e animado sobre um fundo em mosaico.
- A tela de recursos vincula-se à documentação, ao fórum e a outros recursos para aproveitar ao máximo o UI Toolkit.
- A tela de loja simula uma loja dentro do jogo onde você pode comprar moeda dura e mole, como ouro ou gemas, além de bens virtuais como poções de cura. Cada item na tela da loja é um VisualTreeAsset separado. O UI Toolkit instancia esses ativos em tempo de execução; um para cada ScriptableObject nos Recursos/GameData.
- A tela de correio é um leitor frontal de mensagens fictícias que usa um menu em abas para separar a caixa de entrada e as mensagens excluídas.
- A tela de jogo é uma versão mini do projeto Dragon Crashers que começa a tocar automaticamente. Neste projeto, você notará alguns elementos revisados com o UI Toolkit, como um botão de pausa, barras de saúde e a capacidade de arrastar um elemento de poção de cura para seus personagens quando eles sofrerem dano.
O UI Toolkit permite que você construa UIs estáveis e consistentes para todo o seu projeto. Ao mesmo tempo, ele fornece ferramentas flexíveis para adicionar seus próprios toques de design e detalhes para desenvolver ainda mais o tema e o estilo do jogo.
Vamos revisar algumas das características usadas para refinar os designs de UI no exemplo:
- Render Textures: As interfaces do UI Toolkit são renderizadas por último na fila de renderização, o que significa que você não pode sobrepor outros gráficos do jogo sobre uma interface do UI Toolkit. Texturas de Renderização fornecem uma solução alternativa para essa limitação, tornando possível integrar efeitos de jogo nas UIs do UI Toolkit. Embora esses efeitos baseados em Texturas de Renderização devam ser usados com moderação, você ainda poderá ter efeitos nítidos no contexto de uma UI em tela cheia, sem interromper o jogo. As imagens a seguir mostram várias Texturas de Renderização da demonstração.
- Temas com folhas de estilo de tema (TSS): Os arquivos TSS são arquivos de ativos que são semelhantes aos arquivos USS regulares. Eles servem como um ponto de partida para definir seu próprio tema personalizado por meio de seletores USS, bem como configurações de propriedades e variáveis. Na demonstração, duplicamos os arquivos de tema padrão e modificamos as cópias para oferecer variações sazonais.
- Elementos de UI personalizados: Como os designers são treinados para pensar fora da caixa, o UI Toolkit oferece muito espaço para personalizar ou estender a biblioteca padrão. O projeto de demonstração destaca alguns elementos personalizados nas menus com abas, alternadores deslizantes e listas suspensas, além de um contador radial para demonstrar do que os artistas de UI são capazes ao lado dos desenvolvedores.
- Transições USS para mudanças de estado animadas da UI: Adicionar transições às telas do menu pode polir e suavizar seus visuais. O UI Toolkit torna isso mais simples com a propriedade Animações de Transição, parte do Inspetor do UI Builder. Ajuste as propriedades de Propriedade, Duração, Easing e Atraso para configurar a animação. Então, basta alterar os estilos para que o UI Toolkit aplique a transição animada em tempo de execução.
- Volume de pós-processamento para um desfoque de fundo: Um efeito popular em jogos é desfocar uma cena de jogo lotada para chamar a atenção do jogador para uma mensagem pop-up ou janela de diálogo específica. Você pode alcançar esse efeito ativando Profundidade de Campo no framework de Volume (disponível no Pipeline de Renderização Universal).
Certificamo-nos de que fluxos de trabalho eficientes foram utilizados para fortalecer a UI. Aqui estão algumas recomendações para manter o projeto bem organizado:
- Convenções de nomenclatura consistentes: É importante adotar convenções de nomenclatura que estejam alinhadas com seus elementos visuais e folhas de estilo. Convenções de nomenclatura claras não apenas mantêm a organização da hierarquia no UI Builder, mas também tornam mais acessível para seus colegas de equipe, e mantêm o código limpo e legível. Mais especificamente, sugerimos a convenção de nomenclatura Block Element Modifier (BEM) para elementos visuais e folhas de estilo. Apenas de relance, a nomenclatura BEM de um elemento pode te dizer o que ele faz, como aparece e como se relaciona com os outros elementos ao seu redor. Veja os seguintes exemplos de nomenclatura BEM:
- Layout de UI responsivo: Semelhante às tecnologias da web, o UI Toolkit oferece a possibilidade de criar layouts onde os elementos visuais "filhos" se adaptam ao tamanho disponível atual dentro de seus elementos visuais "pais", e outros onde cada elemento tem uma posição absoluta ancorada a um ponto de referência, semelhante ao sistema de UI do Unity. O exemplo utiliza ambas as opções conforme necessário através dos elementos visuais da UI.
- Importador de PSD: Uma das ferramentas mais eficazes para criar a demonstração, o Importador de PSD permite que os artistas trabalhem em um documento mestre sem precisar exportar manualmente cada sprite separadamente. Quando mudanças são necessárias, elas podem ser feitas no arquivo PSD original e atualizadas automaticamente no Unity.
- ScriptableObjects: Para se concentrar no design e implementação da UI, o projeto de exemplo simula dados de backend, como compras dentro do aplicativo e mensagens de e-mail, usando ScriptableObjects. Você pode personalizar convenientemente esses dados substitutos da pasta Resources/GameData e usar o exemplo para criar ativos de dados semelhantes, como itens de inventário e dados de personagens ou diálogos no UI Toolkit.
Lembre-se de que com o UI Toolkit, layouts e estilos de UI estão desacoplados do código. Isso significa que reescrever os dados de backend pode ocorrer independentemente do design da UI. Se sua equipe de desenvolvimento substituir esses sistemas, a interface deve continuar funcionando.
Ferramentas adicionais usadas na demonstração incluem sistemas de partículas criados com o Sistema de Partículas Integrado para efeitos especiais, e o conjunto de ferramentas 2D, entre outros. Sinta-se à vontade para revisar o projeto via o Inspetor para ver como esses diferentes elementos entram em ação.
Você pode encontrar arte de referência feita pelos artistas de UI em UI/Reference, conforme replicado no UI Builder. Todo o processo, desde maquetes até wireframes, também está documentado no e-book. Finalmente, todo o conteúdo do exemplo pode ser adicionado ao seu próprio projeto Unity.
