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.
