Ferramentas da UnityUI – MRTK3

O UnityUI pode não ser a primeira ferramenta que os desenvolvedores de realidade misturada pensam ao criar interfaces de usuário 3D. Mas, com alguns componentes auxiliares e utilitários, é possível tornar interfaces de usuário 3D bonitas e flexíveis na UnityUI.

Botões e controles deslizantes de exemplo da interface do usuário do Unity

Dica

É fácil criar gargalos de desempenho ao criar a UnityUI. Antes de criar layouts complexos da UnityUI, é recomendável que você leia este tutorial.

Amostra

Consulte o exemplo da UnityUIpara obter demonstrações de vários componentes criados para a UnityUI.

Componentes de comportamento da interface do usuário

Os componentes abaixo ajudam na renderização da interface do usuário, mas não são componentes gráficos visíveis.

ScaleMeshEffect

Em componentes da UnityUI, a matriz unity_ObjectToWorld (ou UNITY_MATRIX_M na URP) não é a matriz de transformação da transformação local em que o componente gráfico reside, mas a de sua tela pai. Muitos efeitos de sombreador nas ferramentas gráficas exigem que a escala de objetos seja conhecida. Para resolver esse problema, ScaleMeshEffect.cs armazenará informações de dimensionamento em atributos de canal UV durante a construção da malha da interface do usuário.

Dica

Canvas ou CanvasRenderer nas ferramentas gráficas solicitará a adição de ScaleMeshEffect.cs quando for necessário.

RectMask2DFast

A UnityUI tem um componente interno chamado RectMask2D. Normalmente, esse componente é usado para mascarar uma pequena seção de uma área maior. Ao mascarar muitos objetos, esse processo pode levar um tempo considerável para remover objetos na CPU. Para evitar esse gargalo, as ferramentas gráficas incluem um componente RectMask2DFast.

RectMask2DFast funciona da mesma maneira que RectMask2D e é uma substituição recomendada. Se você encontrar um problema em que a máscara não é atualizada depois de adicionar ou remover objetos de RectMask2DFast, talvez seja necessário invocar manualmente uma atualização, como abaixo:

myRectMask2DFast.ForceClip = true;

Todas os sombreadores de ferramentas gráficas/tela/ e o sombreador de ferramentas gráficas/tela padrão dão suporte para RectMask2D, RectMask2DFast e RoundedRectMask2D.

Observação

Os sombreadores de ferramentas gráficas/tela/ e o sombreador de ferramentas gráficas/tela padrãonão dão suporte à propriedade Suavidade em RectMask2D ou RectMask2DFast.

RoundedRectMask2D

RoundedRectMask2D deriva de RectMask2DFast e atua da mesma forma. A única diferença é que RoundedRectMask2D contém um valor de raio de canto para cantos arredondados. Esse raio pode ser selecionado para todos os cantos ou para cada canto individualmente.

Exemplo de RoundedRectMask2D com duas imagens

Observação

A instanciação do material deve ser controlada pelo usuário. Ou seja, materiais compartilhados podem ser afetados por RoundedRectMask2D.

Componentes gráficos da interface do usuário

Os componentes gráficos abaixo ajudam a adicionar dimensionalidade 3D a uma tela.

CanvasElementRoundedRect

Este componente gera processualmente uma malha 3D arredondada de rect atribuída ao fluxo de vértice da tela. Normalmente, esse componente é usado para gerar malhas de placa traseira usando o sombreador de ferramentas gráficas/tela/placa traseira.

Placa de fundo de exemplo CanvasElementRoundedRect

CanvasElementBeveledRect

Da mesma forma que CanvasElementRoundedRect, esse componente gera processualmente um rect arredondado em 3D, mas com bordas de bisel. Normalmente, esse componente é usado para gerar malhas de placa traseira usando o sombreador de ferramentas gráficas/tela/de bisel.

Exemplo de CanvasElementBeveledRect

CanvasElementMesh

O componente MeshRenderer do Unity pode ser usado para exibir malhas 3D na UnityUI, mas não respeita alguns dos recursos de layout que a UnityUI fornece. Para resolver esses problemas de layout, há o componente CanvasElementMesh.

O componente CanvasElementMesh usa uma malha de entrada e a converte em um componente Graphic.

Exemplo de CanvasElementMesh com foguete

Importante

A malha de entrada deve ter sua propriedade leitura/gravação habilitada para que os vértices possam ser lidos dentro do script.

Animação

Para animar as propriedades de material da UnityUI, você pode usar as classes CanvasMaterialAnimator... Para obter mais informações, confira a documentação de animação.

Para ajudar com o layout da interface do usuário, existem alguns itens de menu nas ferramentas gráficas.

Âncoras para cantos e cantos para âncoras

Janela > ferramentas gráficas > âncoras de tela > âncoras para cantos e Janela > ferramentas gráficas > âncoras de tela > cantos para âncoras permitem que você se mova para frente e para trás entre o layout de expressão no sistema de fixação e o sistema de âncora (restrição) inerente ao RectTransform. Isso pode ser útil ao mover entre layouts de escala responsivos e fixos.

Confira também