Canvas
El componente Canvas representa un espacio abstraco en el cual el UI es puesto y renderizado. Todos los elementos UI deben ser hijos de un GameObject que tiene un componente Canvas adjunto. Cuando usted crea un objeto elemento UI del menú (GameObject > Create UI), un objeto Canvas será creado automáticamente si ya no hay uno en la escena.
Propiedades
| Propiedad: | Función: |
|---|---|
| Render Mode | La manera en que el UI es renderizado a la pantalla o como un objeto en espacio 3D (Ver abajo). Las opciones son Screen Space - Overlay, Screen Space - Camera y World Space. |
| Pixel Perfect (Modos Screen Space solamente) | Debería el UI ser renderizado sin un antialiasing para precisión? |
| Render Camera (Modo Screen Space - Camera solamente) | La cámara con la cual el UI debería ser renderizado (ver abajo). |
| Plane Distance (Modo Screen Space - Camera solamente) | La distancia en la cual el plano UI debería ser colocado en frente de la cámara. |
| Event Camera (Modo World Space solamente) | La cámara que será utilizada para procesar eventos UI. |
| Receives Events | Los eventos UI son procesados por este Canvas? |
Detalles
Un solo Canvas para todos los elementos Ui es suficiente pero canvases múltiples en la escena también es posible. También es posible utilizar Canvases anidados, dónde un Canvas es colocado como un hijo de otro para propósitos de optimización. Un Canvas anidado utiliza el mismo Render Mode (modo de renderización) que su padre.
Tradicionalmente, los UI son renderizados como si fueran un diseño gráfico simple dibujado directamente en la pantalla. Eso es decir, que no tienen un concepto de un espacio 3D siendo visto por un cámara. Unity soporta este tipo de renderización del espacio de la pantalla, pero también le permite a los UIs en ser renderizáados como objetos en la escena, dependiendo en el valor de la propiedad Render Mode. Los modos disponibles son Screen Space - Overlay, Screen Space - Camera y World Space.
Screen Space - Overlay
En este modo, el Canvas es escalado para encajar con la pantalla y luego renderizarlo directamente sin referencia a la escena o una cámara (el UI será renderizado incluso si no hay una cámara en la escena en absoluto). Si el tamaño de la pantalla o resolución son cambiados entonces el UI de manera automática va a re-escalar para encajar. El UI será dibujado sobre cualquier otra gráfica como lo es la vista de la cámara.
Note: The Screen Space - Overlay canvas needs to be stored at the top level of the hierarchy. If this is not used then the UI may disappear from the view. This is a built-in limitation. Keep the Screen Space - Overlay canvas at the top level of the hierarchy to get expected results.
Screen Space - Camera
En este modo, el Canvas es renderizado como si fuera dibujado en un objeto plano sobre alguna distancia en frente de una cámara dada. El tamaño de la pantalla del UI no varia con la distancia debido a que siempre sera re-escalado para encajar exactamente dentro del camera frustum. Si el tamaño de la pantalla o la resolución o el frustum de la cámara son cambiados entonces el UI de manera va a automáticamente re-escalar para que encaje. Cualquier objeto 3D en la escena que esté cerca a la cámara en vez del plano UI será renderizado enfrente del UI, mientras que los objetos detrás del plano serán oscuros.
World Space (Espacio del Mundo)
Este modo renderiza el UI como si fuere que un objeto plano en la escena. A diferencia del modo de Screen Space - Camera, sin embargo, el plano necesita no encarar la cámara y pueda ser orientado sin embargo como usted quiera. El tamaño del Canvas puede puede ser configurado utilizando su Rect Transform pero en su tamaño de la pantalla va a depender en el ángulo de vista y distancia de la cámara. Otros objetos de la escena pueden pasar detrás, a través o en frente del Canvas.
Recomendaciones
- Leer más acerca de los ajustes del World Space Canvas en la página del Creating a World Space UI
- Para más información acerca de hacer su Canvas y escala de UI a diferentes resoluciones o relaciones de aspectos, ver la página de Designing UI for Multiple Resolutions al igual que la página de Canvas Scaler.