Documentação xr/studio
UI de Ecrã e Entidades GUI
Construa painéis HUD, botões e etiquetas fixos ao ecrã usando entidades GUI.
O que são as entidades GUI
As entidades GUI são elementos de UI que ficam à frente da cena 3D, fixos ao ecrã, como um HUD. Use-as para menus de navegação, sobreposições informativas, etiquetas de hotspots, ecrãs de carregamento e qualquer interface que não deva mover-se com a cena.
Screen UI vs World UI
Screen UI: Entidades posicionadas em espaço 2D do ecrã. Mantêm-se no lugar enquanto o utilizador move a câmara. Ideal para menus, sobreposições e elementos de interface persistentes.
World UI: Entidades posicionadas em espaço 3D do mundo e renderizadas como um painel plano. Aparecem num ponto específico da cena e podem virar-se para a câmara. Ideal para etiquetas de hotspots e informação contextual.
Construir um layout
Os layouts GUI funcionam como Figma ou CSS Flexbox. Adicione uma entidade Container, defina a direção (row ou column) e largue entidades filhas dentro. Os filhos esticam ou fazem wrap conforme as definições de alinhamento.
Os tipos de entidade GUI suportados incluem: Container, Text, Image, Button, Input field, Scroll panel e Video.
- Adicione uma entidade Screen Container a partir do menu Add.
- Defina a posição (anchor), por exemplo topo-esquerda, fundo-centro.
- Adicione entidades filhas (Text, Image, Button) dentro do contentor.
- Ajuste padding, gap e alinhamento no inspetor.
Cliques e o que está por trás
Uma caixa GUI apanha os cliques em toda a sua área, incluindo nas partes que não consegue ver. Um contentor que ocupa o ecrã todo por cima de uma cena vai por isso apanhar todos os cliques destinados ao 3D que está por trás, e essa é a razão habitual para os hotspots deixarem de responder depois de adicionar um painel.
Cada entidade GUI tem uma definição Pointer → Clicks no inspetor para controlar isto:
| Definição | O que faz |
|---|---|
| Automatic | O valor por defeito. Um contentor vazio deixa o clique passar. Um contentor que mostra fundo ou borda, que faz scroll, ou que tem uma ação ou um estilo de hover, apanha o clique |
| Blocks clicks | A caixa apanha sempre o clique |
| Click through | A caixa nunca apanha o clique, e os seus filhos mantêm os deles |
Click through é o que quer para a moldura de um HUD: o painel deixa os cliques chegarem à cena, enquanto os botões lá dentro continuam a funcionar.
Se um contentor parece invisível mas continua a engolir os cliques, verifique a opacidade do fundo. Uma cor de fundo com a opacidade deixada em 1 é totalmente opaca, por isso o modo Automatic trata-a como algo visível e deixa-a apanhar o clique. Ponha a opacidade do fundo a 0 e os cliques passam.
A entidade Screen é sempre click-through, por isso a raiz da sua interface nunca bloqueia a cena.
Clicks é uma propriedade GUI normal, por isso pode defini-la por breakpoint e por estado de hover.
Breakpoints responsivos
As entidades GUI suportam breakpoints (desktop, tablet, mobile). Alterne a resolução de pré-visualização na barra superior e ajuste posições ou tamanhos por breakpoint. Só os breakpoints que alterar substituem os valores por defeito.