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


ACTUALIZACIÓN IMPORTANTE

He crea­do una solu­ción más com­ple­ta y sim­ple de uti­lizar, se tra­ta de un paque­te de Uni­ty para descar­gar e impor­tar, con un pre­fab­ri­ca­do que al arras­trar­lo al Can­vas automáti­ca­mente pro­duce el efec­to de fun­di­do que le con­fig­ure­mos en los parámet­ros del inspector. 

Puedes descar­gar el paque­te con esta solu­ción en el sigu­iente link: 

Descargar Asset: Efecto de fundido para Unity

En el vídeo de aba­jo expli­co cómo usar esta solu­ción, pero no cómo fun­ciona, si te intere­sa saber sobre el fun­cionamien­to a niv­el de pro­gra­mación con­tinúa leyen­do este artículo. 

🟢 Cómo usar EFECTO FADE IN/FADE OUT
 

MIRA ESTE DESCABELLADO EXPERIMENTO


CONTINÚA EL ARTÍCULO ANTIGUO

Introducción

En este artícu­lo vamos a ver una man­era sim­ple de oscure­cer la pan­talla en Uni­ty uti­lizan­do una com­po­nente ima­gen. Esto nos puede ser muy útil por ejem­p­lo para usar como tran­si­ción en un cam­bio de escena.

En el sigu­iente video se ve el resul­ta­do que obten­dremos al finalizar.

Video 1: Prue­ba de pan­talla negra para fun­ción Black­out y fun­ción Pausa.

Video explicativo y descargas

En el video se expli­ca cómo fun­ciona la solu­ción, pero no se hace paso a paso.

🟢 Cómo usar EFECTO FADE IN/FADE OUT
 

Descar­gar scripts Game­Con­troller y UIManager.

Scripts para Oscure­cer pan­talla en Unity

Resolución paso a paso

Elementos de la jerarquía

Vamos a crear todos los ele­men­tos nece­sar­ios para resolver el prob­le­ma. En primer lugar un emp­ty GameOb­ject que lla­mare­mos "Game­Con­troller" y un GameOb­ject tipo Can­vas que es el que con­tendrá todos los ele­men­tos de la inter­faz gráfica.

creacion de empty gameobject desde la jerarquia en unity
Fig. 1: Comen­zamos cre­an­do un Emp­ty GameOb­ject con el nom­bre "Game­Con­troller"

creacion de canvas gameobject desde la jerarquia en unity
Fig. 2: Creamos Can­vas para mostrar ele­men­tos de la inter­faz gráfica.

En la figu­ra 3 vemos estos ele­men­tos crea­d­os y colo­ca­dos al prin­ci­pio de la jerarquía.

jerarquia de un proyecto en unity
Fig. 3: Al Can­vas le doy el nom­bre "UI" y colo­co el obje­to con­trol y el can­vas en la primera posición.

Imagen para oscurecer la pantalla

Lo sigu­iente que hace­mos es crear una Ima­gen como hijo del GameOb­ject UI. Esta ima­gen usare­mos para blo­quear la visión de la cámara.

creacion de gameobject image desde la jerarquia en unity para oscurecer la pantalla en unity
Fig. 4: Hacien­do clic dere­cho sobre el obje­to UI creamos una imagen.



En el inspec­tor en la com­po­nente ima­gen hace­mos que el col­or sea negro.

configuracion del color para un objeto imagen en unity
Fig. 5: Hace­mos que el col­or de la ima­gen sea negro.

Configurar Canvas Scaler

Vamos al GameOb­ject UI y en el inspec­tor, en la com­po­nente Can­vasS­caler selec­cionamos el modo "Scale with screen size" en el cam­po "UI Scale Mode" (figu­ra 6). Con esto logramos que los ele­men­tos de la inter­faz grá­fi­ca mod­i­fiquen su tamaño en fun­ción del tamaño de la pantalla.

configuracion de canvas scaler en unity
Fig. 6: Con­fig­u­ramos el obje­to Can­vasS­caler para que se adapte al ancho de la pantalla.

Para la res­olu­ción de ref­er­en­cia vamos a usar 1920 x 1080 pix­els, que se conoce como res­olu­ción FullHD.

La con­fig­u­ración del Can­vasS­caler con­viene hac­er­la al prin­ci­pio, antes de colo­car los ele­men­tos de la inter­faz grá­fi­ca. Sino luego ten­dremos que volver a mod­i­ficar todos los ele­men­tos para que se ajusten a la nue­va configuración.

resolucion full hd para el canvas scaler en unity
Fig. 7: Intro­duci­mos la res­olu­ción Full­HD, 1920 x 1080.

Volve­mos al GameOb­ject ima­gen y ajus­ta­mos su tamaño a 1920 x 1080 para que cubra toda la pan­talla. Si todo fun­ciona bien la pan­talla se debería ver como en la figu­ra 9.

componente rect transforma de un objeto del canvas en unity
Fig. 8: Ajus­ta­mos el tamaño de la ima­gen para que cubra toda la pantalla.

oscurecer la pantalla en unity utilizando gameobject imagen color negro
Fig. 9: Deberíamos ver el fon­do de la esce­na obstru­i­do por la imagen.

En el col­or negro de la ima­gen vamos a hac­er que la com­po­nente Alfa sea 0, de esta for­ma será transparente.

ajuste de color de un objeto imagen en unity
Fig. 10: En el col­or de la ima­gen seteamos el val­or Alfa en 0.


Aho­ra vamos a crear un par de botones para eje­cu­tar las fun­ciones que pos­te­ri­or­mente definire­mos en los Scripts.

Botones

creacion de button gameobject desde la jerarquia en unity
Fig. 11: Creamos un botón para acti­var la fun­ción de pan­talla negra.

Al primero vamos a lla­mar­lo Black­out­But­ton que es el que se va a encar­gar de oscure­cer com­ple­ta­mente la pantalla.

jerarquia de un proyecto en unity
Fig. 12: El botón se va a lla­mar "Blackout"al igual que la función.

Ajus­ta­mos los tamaños y col­ores a gusto.

ajustes de parametros para un objeto boton en unity
Fig. 13: Ajus­ta­mos los parámet­ros del botón a gusto.

Debe­mos ase­gu­rarnos de que el botón esté por deba­jo de la ima­gen en la jer­ar­quía, de esa for­ma primero se dibu­jará la pan­talla negra y luego el botón, como vemos en la figu­ra 14.

pantalla negra y boton en un proyecto unity
Fig. 14: El botón debe ser vis­i­ble aún con la pan­talla negra.

Una vez que con­fig­u­ramos el botón Black­out vamos a dupli­car­lo y dar­le el nom­bre "Pause­But­ton", lo aco­modamos donde nos guste en la pan­talla. En la figu­ra 16 está mi resultado.

jerarquia de un proyecto en unity
Fig. 15: Dupli­camos el botón de black­out, lo move­mos hacia aba­jo y le damos el nom­bre "Pause".

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

Scripts C#

Aho­ra vamos a crear dos Scripts C#, el primero lo lla­mare­mos "Game­Con­troller" y el segun­do "UIMan­ag­er".

creacion de scripts en unity
Fig. 17: Vamos a crear dos Scripts para con­tro­lar los elementos.

scripts c sharp en un proyecto en unity
Fig. 18: Un Script se lla­mará "Game­Con­troller" y el otro "UIMan­ag­er"

El Script Game­Con­troller lo asig­namos al GameOb­ject con el mis­mo nom­bre. Podemos selec­cionarlo y arras­trar­lo al inspec­tor o usar el botón "Add Component".

boton add component en unity
Fig. 19: Selec­cionamos el GameOb­ject Game­Con­troller y con Add­Com­po­nent le asig­namos el Script GameController.

ventana inspector para un gameobject en unity
Fig. 20: Aho­ra el Script Game­Con­troller es una com­po­nente del GameObject.

El Script UIMan­ag­er lo asig­namos al GameOb­ject "UI".

boton add component en unity
Fig. 21: Selec­cionamos el GameOb­ject UI y con Add­Com­po­nent le asig­namos el Script UIManager.

ventana inspector para un gameobject en unity
Fig. 22: Aho­ra el Script UIMan­ag­er es una com­po­nente del GameObject.


Script GameController

El Script Game­Con­troller será el que se encar­gue de indicar cuán­do se debe oscure­cer la pan­talla y en qué val­or de opaci­dad se debe estable­cer. No se encar­ga de con­tro­lar el obje­to ima­gen direc­ta­mente, esa será la respon­s­abil­i­dad del UIManager.

Game­Con­troller ten­drá dos fun­ciones, una será la de Black­out que le dirá al UIMan­ag­er que oscurez­ca com­ple­ta­mente la pan­talla y la otra será la fun­ción Pausa que hará que la pan­talla se oscurez­ca al 50%.

Campos e Inicialización

Vamos a definir un obje­to tipo UIMan­ag­er para ten­er la ref­er­en­cia del Script UIMan­ag­er asig­na­do al GameOb­ject UI y poder así acced­er a sus méto­dos públicos.

Tam­bién vamos a nece­si­tar dos vari­ables booleanas para indicar si la fun­ción de black­out y pausa están habilitadas.

En el méto­do Start encon­tramos la ref­er­en­cia del Script UIMan­ag­er asig­na­do al GameOb­ject UI con la instruc­ción 13 que se obser­va en la figu­ra 23. Luego ponemos en false las vari­ables booleanas.

script c sharp para oscurecer la pantalla en unity
Fig. 23: Cam­pos e ini­cial­ización en el Script GameController.

Métodos

Para que el Script cumpla las dos fun­ciones que diji­mos, vamos a definir dos méto­dos públi­cos, uno se lla­mará "Black­out­Func­tion" y el otro "Pause". Estos méto­dos serán eje­cu­ta­dos al pul­sar los botones de la inter­faz gráfica.

Si querés saber un poco más sobre méto­dos te invi­to a leer este artícu­lo que escribí ante­ri­or­mente, habla sobre qué es un méto­do de man­era intu­iti­va, tam­bién hay un video en el canal.

En el méto­do Black­out­Func­tion lo primero que hace­mos es inver­tir el esta­do de la vari­able booleana black­outAc­ti­vat­ed, osea que si esta­ba en false aho­ra va a ser true y visceversa.

Luego com­pro­bamos el esta­do de esa vari­able y vamos a eje­cu­tar un méto­do del Script UIMan­ag­er con el parámetro apropi­a­do. En este pun­to aún no hemos escrito el méto­do "Set­Black­outOpac­i­ty" de UIMan­ag­er, así que si escriben las líneas 23 y 27 de la figu­ra 24 van a ten­er un error.

En el méto­do Pause vamos a hac­er lo mis­mo pero en lugar de oscure­cer com­ple­ta­mente la pan­talla vamos a hac­er que se oscurez­ca a la mitad de opacidad.

Las líneas 23, 27, 37 y 41 podemos escribir­las luego de haber tra­ba­ja­do en el Script UIManager.

script c sharp para oscurecer la pantalla en unity
Fig. 24: Fun­ción Black­out y fun­ción Pause del Script GameController.



Script UIManager

Este Script se va a encar­gar de con­tro­lar los parámet­ros de la ima­gen para oscure­cer la pantalla.

Para eso va a eje­cu­tar con­stan­te­mente la fun­ción Black­out que se encar­gará de ir mod­i­f­i­can­do grad­ual­mente la opaci­dad de la ima­gen. Además ten­drá un méto­do públi­co lla­ma­do "Set­Black­outOpac­i­ty" que per­mi­tirá decir­le el niv­el de opaci­dad desea­do, 0 sig­nifi­ca pan­talla negra invis­i­ble, 1 es pan­talla negra com­ple­ta­mente visible.

Campos e Inicialización

Para resolver el com­por­tamien­to vamos a nece­si­tar un obje­to tipo Image que lla­mamos "black­outIm­age" y que mar­care­mos con "Seri­al­ize­Field" para que aparez­ca en el inspector. 

Defin­i­mos un float lla­ma­do "black­outOpac­i­ty­ChangeStep" para indicar la mag­ni­tud de cam­bio de la opaci­dad en el tiem­po, tam­bién lo seri­al­izamos. Por últi­mo defin­i­mos un float lla­ma­do "black­out­Targe­tOpac­i­ty" que será el val­or al que la opaci­dad ten­derá a acer­carse en cada paso de tiempo.

En el méto­do Start hace­mos que la opaci­dad obje­ti­vo sea 0. Todo esto podemos ver­lo en la figu­ra 25.

script c sharp para oscurecer la pantalla en unity
Fig. 25: Cam­pos e ini­cial­ización en el Script UIManager.

Métodos

Vamos a definir dos méto­dos, Black­out pri­va­do y Set­Black­outOpac­i­ty públi­co. Den­tro del méto­do FixedUp­date hare­mos la lla­ma­da al méto­do Black­out, como se obser­va en la figu­ra 26.

En el méto­do Black­out primero leemos el esta­do actu­al de opaci­dad del obje­to ima­gen (instruc­ción 29 de la figu­ra 26).

Si la opaci­dad de ese obje­to es menor que la opaci­dad obje­ti­vo hare­mos que aumente, si la opaci­dad del obje­to es may­or hare­mos que dis­min­uya. Esto lo con­seguimos con el "if" y "else if" de las líneas 31 y 39 respectivamente.

Para que la opaci­dad aumente o dis­min­uya grad­ual­mente creare­mos un nue­vo col­or al que le asig­namos las mis­mas com­po­nentes RGB pero al parámetro alfa le sumamos o resta­mos el float "black­outOpac­i­ty­ChangeStep". En la figu­ra 26 podemos ver cómo resolver esto.

El méto­do Set­Black­outOpac­i­ty será públi­co y tomará como parámetro un val­or float. Sim­ple­mente asignare­mos este val­or a la vari­able "black­out­Targe­tOpac­i­ty", como se obser­va aba­jo en la figu­ra 26.

script c sharp para oscurecer la pantalla en unity
Fig. 26: Méto­dos del UIMan­ag­er para oscure­cer la pan­talla en tiem­po de ejecución.

El cam­bio del val­or de opaci­dad lo hace­mos en el méto­do FixedUp­date debido a que no quer­e­mos que ocur­ra instan­tánea­mente sino de man­era grad­ual para ten­er un efec­to Fade In/Out.

Te invi­to a ver este video en el que hago tres exper­i­men­tos para enten­der mejor el flu­jo del pro­gra­ma y el orden de eje­cu­ción de los méto­dos Update y FixedUpdate.



Últimos ajustes

Para poder eje­cu­tar los méto­dos de Game­Con­troller usan­do los botones, ten­emos que hac­er­lo en la fun­ción OnClick() de la com­po­nente botón. 

Arras­tramos el GameOb­ject Game­Con­troller al cam­po deba­jo de "Run­time Only" y usan­do el menú desple­gable selec­cionamos el méto­do "Black­out­Func­tion".

Si no aparece en esta lista segu­ra­mente no lo hemos definido como público.

Con el botón de Pause hace­mos lo mis­mo solo que eligien­do el méto­do Pause de GameController.

ventana inspector para un gameobject en unity
Fig. 27: En el botón Black­out eje­cu­ta­mos el méto­do Black­out de GameController.

ventana inspector para un gameobject en unity
Fig. 28: En el botón Pause eje­cu­ta­mos el méto­do Pause de GameController.

Por últi­mo selec­cionamos el GameOb­ject UI y arras­tramos el GameOb­ject Black­outIm­age (con la com­po­nente ima­gen, ver figu­ra 12) al cam­po "Black­out Image". Para el float "Black­outOpac­i­ty­ChangeStep" ingre­samos el val­or 0.1.

El resul­ta­do se mues­tra en la figu­ra 29.

ventana inspector para un gameobject en unity
Fig. 29: Para la com­po­nente UIMan­ag­er ingre­samos un val­or para el parámetro changeStep.

Conclusión

En este artícu­lo vimos una for­ma de oscure­cer la pan­talla en Uni­ty. Para lograr­lo uti­lizamos una ima­gen negra y mod­i­fi­camos el val­or de Alfa, que deter­mi­na la opaci­dad del col­or. Si el alfa es igual a 1 el col­or es total­mente opa­co, si es igual a 0, el col­or es total­mente transparente.

Con­fig­u­ramos dos botones para eje­cu­tar méto­dos públi­cos del Script Game­Con­troller, el cual le indi­ca al obje­to UIMan­ag­er cómo debe ser la opaci­dad de la pan­talla negra. UIMan­ag­er final­mente hace los cam­bios en el val­or de alfa de la pan­talla negra.

YouTube
Scroll al inicio
Secured By miniOrange