Cursos / Jogos Digitais / Desenvolvimento com Motores de Jogos I / Aula

arrow_back Aula 12 - Introdução à Interface com o Usuário no Unity

2. Elementos de Interface com o Usuário no Unity

2.3 O Componente Rect Transform

O último componente da UI que estudaremos antes de retornar à nossa tela de Game Over é o componente Rect Transform, presente em nosso Canvas e, também, em todos os elementos de UI a serem adicionados à nossa cena. Esse componente substitui o Transform e possui a mesma função dele – posicionar os objetos no espaço, com escala e rotação. Vejamos na Figura 8.

Componente Rect Transform, utilizado em elementos da UI.

Para alguns elementos, o Rect Transform termina por ficar desabilitado. Um exemplo disso é o próprio Canvas quando configurado para ocupar o espaço da tela. Nessa configuração, o Canvas ocupará todo o espaço disponível, centrado no centro e sem qualquer giro em relação à tela. Se essas propriedades todas já estão definidas, não há motivos para configurar o Rect Transform e, por isso, ele é desabilitado, com uma mensagem indicando que o valor é controlado pelo próprio Canvas.

Para outros objetos, no entanto, isso é diferente. Podemos alterar esse componente a fim de posicionar adequadamente o objeto dentro do Canvas, por exemplo. Se observarmos o componente Rect Transform, na Figura 8, veremos que as suas propriedades são também relacionadas à posição, escala e rotação. Elas são, no entanto, bem alteradas em relação ao Transform normal. Para a escala e a rotação, os três valores (X, Y e Z) são mantidos. Para a posição, entretanto, precisamos entrar em mais detalhes.

O Rect Transform divide a posição em Pos X, Pos Y e Pos Z, da mesma maneira que a posição do Transform regular. Isso, no entanto, não é tudo. Há, também, a necessidade de configurar, logo abaixo, valores para Width e Height. Esses valores definem o tamanho do objeto e a quantidade do espaço de tela que eles ocuparão.

O posicionamento, porém, parte também da âncora utilizada para cada um dos componentes. No canto superior esquerdo do componente, temos uma imagem quadrada indicando qual a âncora, ou o ponto de pivô, como já vimos anteriormente, daquele objeto. Podemos clicar nesse elemento para serem revelados diversos presets de âncoras disponíveis. Selecionar um deles altera, de uma maneira mais visual, o ponto de âncora automaticamente, facilitando o posicionamento adequado. Veja, na Figura 9, exemplos desses presets para pontos de âncora.

Presets disponíveis para pontos de âncora em um Rect Transform.

É interessante notar que, quando a âncora é redefinida, o Unity se encarrega de alterar todos os outros valores, para manter o objeto posicionado onde estava. Assim, mesmo alterando as propriedades do objeto, este se mantém onde o posicionamos visualmente. Perceba que você ainda pode alterar os valores manualmente, fazendo o objeto se deslocar. Note, também, ser possível utilizar a tecla Shift, a fim de alterar também o pivô do elemento, ao selecionar um dos presets. Você pode, além disso, utilizar o alt para alterar também a posição do elemento.

Outro detalhe importante é que essa ancoragem é realizada em relação ao objeto pai do objeto que está sendo ancorado. Se o objeto for diretamente filho do objeto Canvas, ele será ancorado ao Canvas, mas há também casos nos quais uma UI é composta por diversos objetos, e estes precisam ser ancorados entre eles. Nesses casos, é mais importante ainda lembrar que a ancoragem é feita em relação ao pai, e não diretamente ao Canvas.

Com isso, concluímos todo o conteúdo básico sobre as User Interfaces, ou as interfaces com o usuário no Unity. Ainda há muito mais o que aprendermos, além de diversos componentes que podemos utilizar, cada um com suas especificidades. No entanto, agora não as detalharemos. Voltaremos à nossa cena e construiremos o nosso Game Over baseado em dois elementos de interface. As características deles, porém, serão assuntos da próxima aula.

Versão 5.3 - Todos os Direitos reservados