UNITY UI
Ingenieria de software – Realidad Aumentada
CANVAS
El Canvas es el área donde todos los
elementos UI (User interface) deben estar. El
Canvas es un Game Object con un
componente Canvas en él, y todos los
elementos UI deben ser hijos de dicho
Canvas.
ORDEN QUE SE DIBUJAN LOS
ELEMENTOS
• Los Elementos UI en el Canvas son
dibujados en el mismo orden que aparecen
en la Jerarquía. El primer hijo es dibujado
primero, el segundo hijo luego, y así. Si los
dos elementos UI se superponen, el último
va a aparecer encima del más temprano.
MODOS DE RENDERIZADO
• Canvas tiene una propiedad de Render Mode el cual
puede ser utilizados para renderizar en el espacio de la
pantalla o el espacio del mundo.
• TIPOS DE RENDER MODE
• Screen Space - Overlay (Espacio de la pantalla - Superposición)
• Screen Space - Camera (Espacio de la Pantalla - Cámara)
• World Space
Screen Space - Overlay
(Espacio de la pantalla - Superposición)
Este modo de renderización coloca elementos UI
en la pantalla mostrada en la parte superior de la
escena. Si el tamaño de la pantalla es modificada
o cambia la resolución, el Canvas va a
automáticamente cambiar el tamaño para que
coincida.
Screen Space - Camera
(Espacio de la Pantalla - Cámara)
• Esto es similar a Screen Space - Overlay, pero en este
modo de renderizado, el Canvas se coloca a una
distancia dada delante de una Camera especificada.
Los elementos de la interfaz de usuario son
renderizados por esta cámara, lo que significa que la
configuración de la cámara afecta la apariencia de la
interfaz de usuario.
World Space
• En este modo de renderizado, el Canvas se va a
comportar como cualquier otro objeto en la escena. El
tamaño de este Canvas puede ser configurado
manualmente utilizando su Rect Transform, y los
elementos UI van a renderizar al frente o detrás de
otros objetos en la escena basados en una colocación
3D.
DISEÑO BÁSICO
RECT TOOL
• Cada elemento UI es representado como un rectángulo por
propósitos de diseño. Este rectángulo puede ser manipulado en la
Vista de Escena utilizando la Rect Tool en la barra de herramientas. La
Rect Tool es utilizado para ambas las características 2D de Unity y UI,
de hecho, puede ser incluso utilizado para objetos 3D también.
PIVOT
• Las modificaciones de rotación, tamaño y escala ocurren alrededor
del pivote por lo que esa posición del pivote afecta el resultado de la
rotación, el cambio de tamaño , y la escala. Cuando el botón Pivot de
la barra de herramientas es configurado a modo Pivote, el pivot de un
Rect Transform puede ser movido en la vista de escena.
ANCHORS
• Los Rect Transforms incluyen un concepto de diseño
llamado anchors. Los Anchors son mostrados como cuatro
manijas pequeñas con figura de triángulos en la Vista de Escena
y la información de anclaje es también mostrada en el Inspector.
• Si el padre de un Rect Transform también es un Rect Transform,
el Rect Transform hijo puede ser anclado al Rect Transform
padre en varias maneras. Por ejemplo el hijo puede ser anclado
al centro del padre, o a una de las esquinas.
Button Anclado al centro
Button anclado al lado dercho inferior
Button Aclado al lado inferior derecho e izquierdo
Pero las anclas no están limitadas a los lados y la
mitad
PRESETS DE LA ANCLA
En el Inspector, el botón Anchor Preset puede ser
encontrado en la esquina superior izquierda del
componente Rect Transform. Al hacer click en el botón
trae el despegable Anchor Presets. De aquí usted puede
rápidamente seleccionar de alguno de las opciones de
anclajes más comunes. Usted puede anclarse al
elemento Ui a los lados o la mitad del padre, o estirar
juntos con el tamaño del padre.
PRESETS DE LA ANCLA