Kit de ferramentas de interface do usuário: Demos novas e atualizadas para programadores e artistas
Temos o prazer de anunciar a disponibilidade de dois novos e atualizados exemplos educacionais para dar suporte às diferentes perspectivas de programadores e artistas/designers na criação de interfaces de usuário profissionais no jogo com o UI Toolkit.
O UI Toolkit fornece um conjunto de ferramentas para desenvolver interfaces de usuário de tempo de execução escaláveis e de alto desempenho para jogos e aplicativos, extensões personalizadas para o Unity Editor e ferramentas de depuração de tempo de execução. Seus principais conceitos e fluxos de trabalho serão familiares para você se tiver experiência no desenvolvimento de páginas da web ou aplicativos.
Nosso objetivo com esses exemplos educacionais é ajudar você a criar interfaces de usuário ricas, responsivas e escaláveis com o UI Toolkit. A nova demonstração QuizU, para programadores, e o UI Toolkit Sample atualizado – Dragon Crashers para artistas e designers, são dois projetos muito diferentes, cada um com amplo conteúdo instrucional de suporte.
O QuizU é um exemplo centrado no programador de um aplicativo de teste interativo que mostra como os componentes do UI Toolkit podem trabalhar juntos, aproveitando vários padrões de design, em um jogo pequeno, mas funcional, com várias telas e gerenciamento de fluxo de jogo.
A demonstração consiste em duas partes: 10 amostras pequenas e fáceis de entender que demonstram diferentes aspectos do UI Toolkit e um minijogo de perguntas e respostas que consolida muitas das técnicas das 10 cenas em um projeto completo.
O estilo visual minimalista do minijogo permite que você se concentre na mecânica da implementação da interface do usuário, sem se perder nos detalhes do design.
O jogo de perguntas e respostas ilustra como usar o padrão de estado para o fluxo do jogo, gerenciar várias telas de menu, usar o padrão modelo-visualização-apresentador, implementar o tratamento de eventos no UI Toolkit e muito mais. A jogabilidade é uma mecânica de jogo de perguntas e respostas muito simples, mas a intenção é mostrar e ensinar técnicas de implementação que você pode usar em seus próprios projetos.
Ao integrar alguns desses padrões de design consistentemente em seu projeto, você pode melhorar a legibilidade do código e tornar sua base de código mais limpa. Os padrões de design não apenas reduzem a refatoração e o tempo gasto em testes, como também podem acelerar os processos de desenvolvimento para toda a sua equipe.
Além disso, a arquitetura orientada a eventos, na qual os componentes do jogo se comunicam entre si por meio de eventos, promove acoplamento flexível para escalabilidade e testabilidade.
A segunda parte da demonstração consiste em 10 pequenas cenas de demonstração. Cada cena de demonstração representa uma técnica ou recurso específico. Considere-os como um conjunto de receitas para inspirar e orientar você enquanto avalia o UI Toolkit para seu próximo projeto. Aqui está uma breve amostra dos recursos e técnicas do UI Toolkit que as cenas de demonstração ilustram:
- UXML e árvores visuais: Os arquivos UXML formam uma estrutura hierárquica de elementos da interface do usuário. Essas árvores visuais servem como um modelo para sua interface de usuário.
- Flexbox: O modelo de layout de caixa flexível (Flexbox) fornece um modelo de layout eficiente para organizar elementos de interface do usuário dinamicamente dentro de um contêiner.
- Folhas de Estilo Unity (USS): O USS permite que os desenvolvedores personalizem elementos da interface do usuário com estilos predefinidos. Reformular sua interface é apenas uma questão de trocar folhas de estilo.
- UQuery: O UQuery simplifica o processo de pesquisa em uma hierarquia complexa de elementos da interface do usuário, permitindo uma navegação perfeita para componentes específicos da interface do usuário dentro da árvore visual.
- Pseudo-classes: Pseudoclasses podem ser usadas para criar elementos de interface de usuário interativos e animados com código extra mínimo, adicionando "suco" extra à sua interface visual (por exemplo, ampliando um botão ao passar o mouse sobre ele ou alterando a cor de um campo de texto após a seleção).
- Sistema de eventos do UI Toolkit: O UI Toolkit tem seu próprio sistema de eventos, projetado para lidar com cliques, alterações e entradas de ponteiros da sua interface de usuário, mesmo em hierarquias complexas.
- Manipuladores: Ao encapsular retornos de chamada de eventos relacionados em uma única classe, um manipulador promove a reutilização e facilita a definição de interações do usuário (por exemplo, um manipulador de clicar e arrastar para um sistema de inventário, um manipulador de gestos para um efeito de pinça para aplicar zoom, etc.).
- Controles personalizados: A demonstração mostra como definir e instanciar um VisualElement personalizado por meio das classes UxmlFactory e UxmlTraits. Esses controles personalizados podem ser reutilizados por meio de scripts ou do UI Builder.
Recomendamos que você baixe o QuizU usando o Unity 2022 LTS. Você também pode acompanhar nossa série de artigos, publicados no Unity Discussions, que acompanham a demonstração. Os artigos estão aqui:
Em setembro de 2022, lançamos o UI Toolkit Sample – Dragon Crashers (você pode ler a postagem do blogde lançamento). Esta demonstração de uma interface completa sobre uma parte do projeto de mini RPG 2D Dragon Crashersmostra técnicas para aproveitar o UI Toolkit em seus próprios aplicativos. É o complemento do e-book Design e implementação de interface do usuário no Unity, também lançado no final de 2022.
Agora você pode baixar uma nova versão do UI Toolkit Sample – Dragon Crashers para Unity 2022 LTS. As melhorias e atualizações nesta versão mais recente incluem:
- Suporte para modos de tela de paisagem e retrato em tempo de execução por meio de temas e GeometryChangedEvent no UI Toolkit
- Implementação da API SafeArea para conter a funcionalidade da IU dentro da área de tela utilizável de um dispositivo
- Aumento do limite de fps para dispositivos móveis para 60 fps
- Seletores e folhas de estilo USS refatorados e simplificados
- Ícones de alta resolução
- Posição de geração de efeitos visuais fixa melhorada para diferentes proporções de tela e algumas inconsistências do cursor
- Padrões de design refatorados para uma arquitetura de IU mais limpa
- Novo conteúdo de aprendizagem fornecido pela janela do Tutorial Inspector
Também adicionamos um guia do usuário para o projeto atualizado. Isto é em resposta ao feedback que recebemos de usuários que solicitaram um melhor conteúdo instrucional para ajudá-los a entender as técnicas e os recursos usados na demonstração.
Por fim, um vídeo passo a passo do projeto está disponível para ajudar você a navegar pela demonstração. Confira:
Esperamos que você aprenda muitas dicas úteis com o QuizU e o UI Toolkit Sample atualizado – Dragon Crashers. Você encontrará todos os e-books avançados da Unity para programadores, artistas, artistas técnicos e designers no hub de melhores práticas da Unity.