Oscurecer la pantalla en Unity. Efecto Fade In / Fade Out.


ACTUALIZACIÓN IMPORTANTE

He creado una solución más completa y simple de utilizar, se trata de un paquete de Unity para descargar e importar, con un prefabricado que al arrastrarlo al Canvas automáticamente produce el efecto de fundido que le configuremos en los parámetros del inspector.

Puedes descargar el paquete con esta solución en el siguiente link:

Descargar Asset: Efecto de fundido para Unity

En el vídeo de abajo explico cómo usar esta solución, pero no cómo funciona, si te interesa saber sobre el funcionamiento a nivel de programación continúa leyendo este artículo.  


CONTINÚA EL ARTÍCULO ANTIGUO

Introducción

En este artículo vamos a ver una manera simple de oscurecer la pantalla en Unity utilizando una componente imagen. Esto nos puede ser muy útil por ejemplo para usar como transición en un cambio de escena.

En el siguiente video se ve el resultado que obtendremos al finalizar.

Video 1: Prueba de pantalla negra para función Blackout y función Pausa.

Video explicativo y descargas

En el video se explica cómo funciona la solución, pero no se hace paso a paso.

🟢 VÍDEO: Cómo usar EFECTO FADE IN/FADE OUT

Descargar scripts GameController y UIManager.

Resolución paso a paso

Elementos de la jerarquía

Vamos a crear todos los elementos necesarios para resolver el problema. En primer lugar un empty GameObject que llamaremos “GameController” y un GameObject tipo Canvas que es el que contendrá todos los elementos de la interfaz gráfica.

creacion de empty gameobject desde la jerarquia en unity
Fig. 1: Comenzamos creando un Empty GameObject con el nombre “GameController”

creacion de canvas gameobject desde la jerarquia en unity
Fig. 2: Creamos Canvas para mostrar elementos de la interfaz gráfica.

En la figura 3 vemos estos elementos creados y colocados al principio de la jerarquía.

jerarquia de un proyecto en unity
Fig. 3: Al Canvas le doy el nombre “UI” y coloco el objeto control y el canvas en la primera posición.

Imagen para oscurecer la pantalla

Lo siguiente que hacemos es crear una Imagen como hijo del GameObject UI. Esta imagen usaremos para bloquear la visión de la cámara.

creacion de gameobject image desde la jerarquia en unity para oscurecer la pantalla en unity
Fig. 4: Haciendo clic derecho sobre el objeto UI creamos una imagen.

En el inspector en la componente imagen hacemos que el color sea negro.

configuracion del color para un objeto imagen en unity
Fig. 5: Hacemos que el color de la imagen sea negro.

Configurar Canvas Scaler

Vamos al GameObject UI y en el inspector, en la componente CanvasScaler seleccionamos el modo “Scale with screen size” en el campo “UI Scale Mode” (figura 6). Con esto logramos que los elementos de la interfaz gráfica modifiquen su tamaño en función del tamaño de la pantalla.

configuracion de canvas scaler en unity
Fig. 6: Configuramos el objeto CanvasScaler para que se adapte al ancho de la pantalla.

Para la resolución de referencia vamos a usar 1920 x 1080 pixels, que se conoce como resolución FullHD.

La configuración del CanvasScaler conviene hacerla al principio, antes de colocar los elementos de la interfaz gráfica. Sino luego tendremos que volver a modificar todos los elementos para que se ajusten a la nueva configuración.

resolucion full hd para el canvas scaler en unity
Fig. 7: Introducimos la resolución FullHD, 1920 x 1080.

Volvemos al GameObject imagen y ajustamos su tamaño a 1920 x 1080 para que cubra toda la pantalla. Si todo funciona bien la pantalla se debería ver como en la figura 9.

componente rect transforma de un objeto del canvas en unity
Fig. 8: Ajustamos el tamaño de la imagen para que cubra toda la pantalla.

oscurecer la pantalla en unity utilizando gameobject imagen color negro
Fig. 9: Deberíamos ver el fondo de la escena obstruido por la imagen.

En el color negro de la imagen vamos a hacer que la componente Alfa sea 0, de esta forma será transparente.

ajuste de color de un objeto imagen en unity
Fig. 10: En el color de la imagen seteamos el valor Alfa en 0.

Ahora vamos a crear un par de botones para ejecutar las funciones que posteriormente definiremos en los Scripts.

Botones

creacion de button gameobject desde la jerarquia en unity
Fig. 11: Creamos un botón para activar la función de pantalla negra.

Al primero vamos a llamarlo BlackoutButton que es el que se va a encargar de oscurecer completamente la pantalla.

jerarquia de un proyecto en unity
Fig. 12: El botón se va a llamar “Blackout”al igual que la función.

Ajustamos los tamaños y colores a gusto.

ajustes de parametros para un objeto boton en unity
Fig. 13: Ajustamos los parámetros del botón a gusto.

Debemos asegurarnos de que el botón esté por debajo de la imagen en la jerarquía, de esa forma primero se dibujará la pantalla negra y luego el botón, como vemos en la figura 14.

pantalla negra y boton en un proyecto unity
Fig. 14: El botón debe ser visible aún con la pantalla negra.

Una vez que configuramos el botón Blackout vamos a duplicarlo y darle el nombre “PauseButton”, lo acomodamos donde nos guste en la pantalla. En la figura 16 está mi resultado.

jerarquia de un proyecto en unity
Fig. 15: Duplicamos el botón de blackout, lo movemos hacia abajo y le damos el nombre “Pause”.

escenario vacio con cielo en el horizonte y dos botones en una esquina, proyecto unity
Fig. 16: Con esto la escena está terminada.

Scripts C#

Ahora vamos a crear dos Scripts C#, el primero lo llamaremos “GameController” y el segundo “UIManager”.

creacion de scripts en unity
Fig. 17: Vamos a crear dos Scripts para controlar los elementos.

scripts c sharp en un proyecto en unity
Fig. 18: Un Script se llamará “GameController” y el otro “UIManager”

El Script GameController lo asignamos al GameObject con el mismo nombre. Podemos seleccionarlo y arrastrarlo al inspector o usar el botón “Add Component”.

boton add component en unity
Fig. 19: Seleccionamos el GameObject GameController y con AddComponent le asignamos el Script GameController.

ventana inspector para un gameobject en unity
Fig. 20: Ahora el Script GameController es una componente del GameObject.

El Script UIManager lo asignamos al GameObject “UI”.

boton add component en unity
Fig. 21: Seleccionamos el GameObject UI y con AddComponent le asignamos el Script UIManager.

ventana inspector para un gameobject en unity
Fig. 22: Ahora el Script UIManager es una componente del GameObject.

Script GameController

El Script GameController será el que se encargue de indicar cuándo se debe oscurecer la pantalla y en qué valor de opacidad se debe establecer. No se encarga de controlar el objeto imagen directamente, esa será la responsabilidad del UIManager.

GameController tendrá dos funciones, una será la de Blackout que le dirá al UIManager que oscurezca completamente la pantalla y la otra será la función Pausa que hará que la pantalla se oscurezca al 50%.

Campos e Inicialización

Vamos a definir un objeto tipo UIManager para tener la referencia del Script UIManager asignado al GameObject UI y poder así acceder a sus métodos públicos.

También vamos a necesitar dos variables booleanas para indicar si la función de blackout y pausa están habilitadas.

En el método Start encontramos la referencia del Script UIManager asignado al GameObject UI con la instrucción 13 que se observa en la figura 23. Luego ponemos en false las variables booleanas.

script c sharp para oscurecer la pantalla en unity
Fig. 23: Campos e inicialización en el Script GameController.

Métodos

Para que el Script cumpla las dos funciones que dijimos, vamos a definir dos métodos públicos, uno se llamará “BlackoutFunction” y el otro “Pause”. Estos métodos serán ejecutados al pulsar los botones de la interfaz gráfica.

Si querés saber un poco más sobre métodos te invito a leer este artículo que escribí anteriormente, habla sobre qué es un método de manera intuitiva, también hay un video en el canal.

En el método BlackoutFunction lo primero que hacemos es invertir el estado de la variable booleana blackoutActivated, osea que si estaba en false ahora va a ser true y visceversa.

Luego comprobamos el estado de esa variable y vamos a ejecutar un método del Script UIManager con el parámetro apropiado. En este punto aún no hemos escrito el método “SetBlackoutOpacity” de UIManager, así que si escriben las líneas 23 y 27 de la figura 24 van a tener un error.

En el método Pause vamos a hacer lo mismo pero en lugar de oscurecer completamente la pantalla vamos a hacer que se oscurezca a la mitad de opacidad.

Las líneas 23, 27, 37 y 41 podemos escribirlas luego de haber trabajado en el Script UIManager.

script c sharp para oscurecer la pantalla en unity
Fig. 24: Función Blackout y función Pause del Script GameController.

Script UIManager

Este Script se va a encargar de controlar los parámetros de la imagen para oscurecer la pantalla.

Para eso va a ejecutar constantemente la función Blackout que se encargará de ir modificando gradualmente la opacidad de la imagen. Además tendrá un método público llamado “SetBlackoutOpacity” que permitirá decirle el nivel de opacidad deseado, 0 significa pantalla negra invisible, 1 es pantalla negra completamente visible.

Campos e Inicialización

Para resolver el comportamiento vamos a necesitar un objeto tipo Image que llamamos “blackoutImage” y que marcaremos con “SerializeField” para que aparezca en el inspector.

Definimos un float llamado “blackoutOpacityChangeStep” para indicar la magnitud de cambio de la opacidad en el tiempo, también lo serializamos. Por último definimos un float llamado “blackoutTargetOpacity” que será el valor al que la opacidad tenderá a acercarse en cada paso de tiempo.

En el método Start hacemos que la opacidad objetivo sea 0. Todo esto podemos verlo en la figura 25.

script c sharp para oscurecer la pantalla en unity
Fig. 25: Campos e inicialización en el Script UIManager.

Métodos

Vamos a definir dos métodos, Blackout privado y SetBlackoutOpacity público. Dentro del método FixedUpdate haremos la llamada al método Blackout, como se observa en la figura 26.

En el método Blackout primero leemos el estado actual de opacidad del objeto imagen (instrucción 29 de la figura 26).

Si la opacidad de ese objeto es menor que la opacidad objetivo haremos que aumente, si la opacidad del objeto es mayor haremos que disminuya. Esto lo conseguimos con el “if” y “else if” de las líneas 31 y 39 respectivamente.

Para que la opacidad aumente o disminuya gradualmente crearemos un nuevo color al que le asignamos las mismas componentes RGB pero al parámetro alfa le sumamos o restamos el float “blackoutOpacityChangeStep”. En la figura 26 podemos ver cómo resolver esto.

El método SetBlackoutOpacity será público y tomará como parámetro un valor float. Simplemente asignaremos este valor a la variable “blackoutTargetOpacity”, como se observa abajo en la figura 26.

script c sharp para oscurecer la pantalla en unity
Fig. 26: Métodos del UIManager para oscurecer la pantalla en tiempo de ejecución.

El cambio del valor de opacidad lo hacemos en el método FixedUpdate debido a que no queremos que ocurra instantáneamente sino de manera gradual para tener un efecto Fade In/Out.

Te invito a ver este video en el que hago tres experimentos para entender mejor el flujo del programa y el orden de ejecución de los métodos Update y FixedUpdate.

Últimos ajustes

Para poder ejecutar los métodos de GameController usando los botones, tenemos que hacerlo en la función OnClick() de la componente botón.

Arrastramos el GameObject GameController al campo debajo de “Runtime Only” y usando el menú desplegable seleccionamos el método “BlackoutFunction”.

Si no aparece en esta lista seguramente no lo hemos definido como público.

Con el botón de Pause hacemos lo mismo solo que eligiendo el método Pause de GameController.

ventana inspector para un gameobject en unity
Fig. 27: En el botón Blackout ejecutamos el método Blackout de GameController.

ventana inspector para un gameobject en unity
Fig. 28: En el botón Pause ejecutamos el método Pause de GameController.

Por último seleccionamos el GameObject UI y arrastramos el GameObject BlackoutImage (con la componente imagen, ver figura 12) al campo “Blackout Image”. Para el float “BlackoutOpacityChangeStep” ingresamos el valor 0.1.

El resultado se muestra en la figura 29.

ventana inspector para un gameobject en unity
Fig. 29: Para la componente UIManager ingresamos un valor para el parámetro changeStep.

Conclusión

En este artículo vimos una forma de oscurecer la pantalla en Unity. Para lograrlo utilizamos una imagen negra y modificamos el valor de Alfa, que determina la opacidad del color. Si el alfa es igual a 1 el color es totalmente opaco, si es igual a 0, el color es totalmente transparente.

Configuramos dos botones para ejecutar métodos públicos del Script GameController, el cual le indica al objeto UIManager cómo debe ser la opacidad de la pantalla negra. UIManager finalmente hace los cambios en el valor de alfa de la pantalla negra.

Scroll al inicio
Secured By miniOrange