Este vídeo tutorial da Unity oferece uma demonstração de alto nível sobre como criar interfaces de usuário do World Space usando o Kit de ferramentas de IU no Unity 6.2. Algumas das principais etapas que você aprenderá sobre incluem:
- Os conceitos básicos para configurar o projeto e abrir o UI Builder
- Salvar seu primeiro documento UXML
- Como criar uma UI flexível e sustentável criando e aplicando folhas de estilos (arquivos USS) e classes de estilo reutilizáveis
O tutorial do Kit de ferramentas de IU Unity 6.2 também aborda um exemplo prático de aprimoramento da interação do usuário por meio da implementação de efeitos de movimentação personalizados em botões usando pseudo-classes.
Finalmente, ele mostra o fluxo de trabalho completo para integrar a IU a uma cena 3D ao configurar um UI Document e suas configurações de painel associadas para renderização World Space, resultando em um menu que existe fisicamente dentro do ambiente de jogo.
PERGUNTAS FREQUENTES
Como posso começar a usar o UI Builder?
Para começar a criar uma interface de usuário, abra a janela do UI Builder e salve seu trabalho como um asset UXML. Esse arquivo armazenará a estrutura e a hierarquia dos elementos da IU.
Siga estas etapas para começar:
1. No menu principal do Unity Editor, navegue até o UI Builder: Janela > Kit de ferramentas de IU > UI Builder
2. Após abrir a janela do UI Builder, salve seu novo UI Document. Acesse Arquivo > Salvar como... no menu do UI Builder.
3. Escolha um local em seu projeto e salve o arquivo. Isso cria o asset .uxml que você usará como fonte para sua IU na cena.
Você pode ver este exemplo em ação acessando diretamente essas seções no vídeo:
(1:10) - Abrindo a janela do UI Builder
(1:23) - Salvar o arquivo UXML
Se você quiser saber mais sobre o UI Builder, confira a página Documentação Unity.
Como faço para aplicar estilos consistentes a vários elementos da IU?
A maneira mais eficiente de manter uma aparência consistente em toda a interface do usuário é usando folhas de estilos, que funcionam como CSS no desenvolvimento da Web. Essa abordagem separa o estilo da estrutura, facilitando seu gerenciamento de IU.
O sistema envolve três partes importantes:
- Folder de estilos (arquivo .uss): Crie uma nova folha de estilos no UI Builder e anexe-a ao seu recipiente principal de UI. Este arquivo contém todas as regras de estilo.
- Aulas de estilo: Para criar um estilo reutilizável, selecione um elemento visual no UI Builder. No Inspector na lista de classes de estilo, digite um novo nome de classe (por exemplo, "botão de menu") e adicione-o à lista.
- Reutilizabilidade: Agora você pode atribuir essa mesma classe de estilo a qualquer outro elemento da IU. Todos os elementos que compartilham uma classe herdarão automaticamente suas propriedades definidas, garantindo uma aparência uniforme. Qualquer alteração feita na classe de estilo atualizará todos os elementos atribuídos simultaneamente.
Você pode ver este exemplo em ação acessando diretamente essas seções no vídeo:
(2:18) - Criar uma nova folha de estilos
(2:57) - Criando uma nova classe de estilo
(3:07) - Criando um novo selector USS da aula
(3:43) - Explicação de como as alterações em uma classe de estilo afetam todos os elementos atribuídos
Se você quiser saber mais sobre como criar o estilo de IU com a Folha de Estilo Unity (USS), confira a Página Documentação Unity.
Como faço para criar efeitos hover personalizados para botões?
Você pode criar efeitos flutuantes personalizados e outros estilos interativos usando pseudo-classes USS. A pseudo-classe :hover permite que você defina um conjunto específico de estilos que só são aplicados quando o cursor de um usuário estiver acima de um elemento.
Para implementar um efeito flutuante personalizado para um botão padrão do Unity, siga estas etapas:
1. No UI Builder, selecione um botão para ver suas classes padrão de estilo no Inspector. A classe padrão de botão é unity-button.
2. Clique duas vezes na classe unity-button para adicionar o selector à sua folha de estilos. Isso permite que você modifique a aparência padrão do botão, como torná-lo parcialmente transparente.
3. Crie um novo selector em sua folha de estilos adicionando a :hover pseudo-classe à classe original: .unity-button:hover
4. Com o novo selector :hover ativado, defina os estilos desejados para o estado de hover, como alterar a cor de fundo para que seja totalmente opaca. A IU agora alternará automaticamente entre esses estilos durante eventos de mouse-over.
Você pode ver este exemplo em ação acessando diretamente essas seções no vídeo:
(6:29) - Introdução às pseudo-classificações
(6:54) - Localizando a classe padrão de estilo .unity-button
(7:24) - Criando o :hover pseudo-classe selector
(7:39) - Demonstrando o efeito de flutuação final
Se você quiser saber mais sobre pseudo-classes, consulte a página Documentação Unity.
Como posso adicionar um elemento do Kit de ferramentas de IU à minha cena como um objeto World Space?
O Unity 6.2 aprimorou o Kit de ferramentas de IU com a capacidade de renderizar elementos de IU diretamente no World Space. Esse processo envolve o uso de um UI Document e um GameObject para hospedar seu asset UXML na cena.
Siga esta sequência para criar uma UI World Space:
1. Na janela Ierárquica, clique com o botão direito do mouse e selecione Kit de ferramentas de UI > UI Document. Isso cria um novo GameObject em sua cena.
2. Selecione o novo GameObject UI Document. No Inspector, localize o campo Source Asset e atribua seu arquivo .uxml salvo a ele.
3. Clique no asset Painel Settings associado ao UI Document. Isso destacará o asset em sua janela Project.
4. Selecione o asset Panel Settings para visualizar suas propriedades no Inspector. Altere o Modo Renderização do Screen Space padrão para o World Space.
5. Depois de mudar para o World Space, você pode ajustar o componente RectTransform do UI Document GameObject para posicionar, girar e dimensionar o plano de IU dentro de sua cena 3D.
Você pode ver este exemplo em ação acessando diretamente essas seções no vídeo:
(7:49) - Criar um UI Document na cena
(7:59) - Atribuição do asset de origem UXML
(8:08) - Acessar as configurações do painel
(8:23) - Mudar para o Modo World Space Render
(8:58) - Demonstração da IU final do World Space
Se você quiser saber mais sobre a World Space UI, confira a página Documentação Unity.
