OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

User Interface: Rect Tool

Objetivos

 Diferenciar el Componente Rect transform

 Uso de todos los presets del Componente Rect transform
 Identificar los Anchors Point
 Uso del Pivot y Anchor Point

¿Qué es el Rect Tool?

Es una herramienta que nos permite trabajar (posicionar, rotar y escalar) más cómodamente con
elementos 2D o elementos de la UI.

Manejadores de
Escalado y
Rotación
Anchor Point (ancla), Es el
elemento sobre el cual se van a
ejecutar todas las Pivot del elemento UI, es
transformaciones; es la quien determina la
referencia para determinar la posición del elemento UI.
posición del Pivot y para fijar la Por tanto, la posición del
imagen en una posición elemento siempre será
determinada del Canvas. relativa al Anchor Point.

Anchors (anclas), fijan puntos de

referencia para escalar la imagen
en relación al tamaño de la
pantalla o resolución.

Detalles:

Cuando la herramienta Toggle Tool Handle Position esta en Center, el Pivot manual del elemento UI esta
desactivado y no se puede mover manualmente, cuando esta en Pivot estará activado y si se podrá mover
manualmente (ver imagen). Lógicamente al modificar el Pivot se modificar la posición del elemento UI ya
que esta posición está asociada al Anchor Point del mismo elemento UI.

1
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Pivot desactivado Pivot Activado

 Todos los elementos de UI contienen nativamente el componente Rect Transform, el cual tiene lsa
mismas funcionalidades que el Transform (ubicar el GameIObject en escena, aplicar
transformaciones de traslación, rotación, escala y gestionar el parentesco).
 Los objetos estándar UI disponibles desde el menú (GameObject > Create UI) todos tienen un
Canvas Renderer adjunto
 Todos los elementos de UI serán hijos del Canvas.
 La posición del elemento (Rect Transform) es siempre relativa la del Anchor Point.

 Cuanto la posición del pivote x,y,x coincide con el pivote x,y de las anclas, entonces se desactivaran
las anclas y se podrá mover el pivote (x,y,z).

Escalar Mediante Rect Tool

Escalar libremente

 Drag and Drop Mousse en una esquina (manejador) del elemento

Escalar proporcionalmente desde la esquina opuesta del elemento

 Shit + Drag and Drop Mousse en una esquina (manejador) del elemento

2
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Escalar proporcionalmente desde el Pivot

 Alt + Drag and Drop Mousse en una esquina (manejador) del elemento

Escalar proporcionalmente desde el centro

 Shit + Alt + Drag and Drop Mousse en una esquina (manejador) del elemento

Como Rotar Mediante Rect Tool

Posicionarse un poco más hacia afuera del cualquiera de las esquinas (manejadores) y al aparecer el
icono de rotar proceder con referencia al Pivot del elemento.

Funcionalidad del Archor Point (ancla)

 Es el elemento sobre el cual se van a ejecutar todas las transformaciones; es la referencia para
determinar la posición del Pivot y para fijar la imagen en una posición determinada del Canvas,
ya que crea una relación de posición entre él y todos los elementos de UI con el que trabaje.
 Especificar al elemento de UI que se mantenga en la posición con relación al Canvas y al tamaño
p resolución de la pantalla.
 El Anchor Point cuando como tal (icono de todas sus anclas unidas) posse posición determinadas
por un punto (coordenada x,y,z).
 El Anchor Point cuando funciona como anclas (icono de todas las anclas separadas) cambia de
coordenadas x,y,x a left, right, top, botton y z.

Ejemplo:

Si colocamos el Anchor Point una ubicación especifica fijara la posición del elemento UI para todas las
resolución o tamaño de pantalla que se configure en el juego o aplicación como sigue:

Scene View

Posición fijada del

Achor Point

Posición fijada del

Elemento UI

Canvas: Free Aspect

Para cualquier resolución elegida del juego el elemento UI aparecerá en la misma posición del Canvas
(pantalla)

Game View

3
 OVERVIEW GAMEOBJECTS (INTERFAZ DE USUARIO) EN UNITY

Lo mismo ocurre para fijar la imagen mediante anclas, por tanto la miajen se reescalara y se ajustara a
diferentes configuraciones de pantallas.

Uso de los presets del Anchor Point

Se utilizan para establecer de manera automática la posición del Anchor Point del Elemento UI.