Transiciones

Crear una experiencia pulida en un videojuego implica cuidar cada detalle visual, y las transiciones entre pantallas son uno de los elementos que más impacto generan. Con DOTween y unas pocas líneas de código en Unity, es posible lograr un efecto de cortina negra que aparece y desaparece suavemente, dando al jugador la sensación de una introducción profesional.

¿Cómo preparar el sprite que funciona como cortina?

El punto de partida es crear un objeto visual que cubra toda la pantalla y actúe como una capa oscura. Para eso se sigue este proceso [0:10]:

• Clic derecho en la jerarquía de Unity, seleccionar 2D Object > Sprites > Square.
• Escalar el cuadrado hasta que cubra por completo la cámara.
• Asignar un Order in Layer alto, como diez o veinte, para garantizar que siempre se dibuje por encima de cualquier otro elemento.
• Cambiar el color del sprite a negro total.

Este sprite funcionará como la cortina que se muestra al inicio del juego y luego desaparece con una animación suave.

¿Cómo crear el script de fade con DOTween?

Dentro de la carpeta de scripts, se crea una subcarpeta llamada Transition y dentro un nuevo C# script llamado Fade [0:48]. Al abrir el archivo, lo primero es eliminar los métodos Start y Update que vienen por defecto, y agregar la directiva using DG.Tweening para acceder a las funciones de DOTween.

El script necesita una referencia al componente SpriteRenderer del objeto cortina. Se declara como variable privada con el atributo [SerializeField] para que aparezca en el inspector de Unity sin exponer la variable públicamente [1:14].

¿Qué hace la función fade in?

La función FadeIn utiliza el método DoFade de DOTween sobre el SpriteRenderer [1:24]. Se le indica un valor de alfa de uno (totalmente opaco) y una duración de dos segundos. Esto significa que el sprite pasará gradualmente de transparente a completamente negro.

Para probar esta función sin necesidad de asignar una tecla que podría llegar accidentalmente a la build final, se usa el atributo ContextMenu con el nombre "FADE IN" [1:40]. Esto permite ejecutar la función directamente desde el inspector haciendo clic derecho sobre el componente.

¿Cómo funciona el fade out?

El método FadeOut es exactamente lo contrario: llama a DoFade con un alfa de cero (totalmente transparente) en dos segundos [2:20]. De esta forma, la cortina negra se desvanece y revela el contenido del juego.

Un atajo útil durante el desarrollo: seleccionar las líneas del fade in, presionar Ctrl + D para duplicarlas y luego modificar los valores necesarios para crear el fade out rápidamente.

¿Cómo integrar la transición al iniciar el juego?

Para que el efecto ocurra automáticamente al comenzar la escena, se coloca la llamada a FadeOut dentro del método Start [2:35]. Así, cuando el juego inicia, la pantalla arranca completamente negra y se va aclarando hasta mostrar la escena completa.

El flujo completo queda así:

• Al iniciar: la cortina es negra y FadeOut la hace transparente en dos segundos.
• Al cambiar de escena: se puede llamar a FadeIn para oscurecer la pantalla antes de cargar la siguiente escena.

Esta combinación genera una transición limpia y profesional entre escenas. El componente Fade se asigna al objeto cuadrado renombrado como "fade", y en el campo SpriteRenderer del inspector se arrastra el mismo objeto [1:56].

El ContextMenu resulta especialmente valioso como herramienta de prueba: evita dejar teclas de depuración que un jugador podría presionar por accidente en la versión final del juego.

Un buen ejercicio para consolidar este aprendizaje es aplicar el mismo sistema en una escena de menú: al presionar el botón de play, ejecutar un fade in que oscurezca la pantalla, cargar la nueva escena y luego ejecutar un fade out para revelarla. ¿Ya lo intentaste? Comparte cómo te fue con tu implementación.