Skip to content

Unity: Transición básica entre escenas

Gonzalo G. Fernández edited this page Oct 11, 2019 · 3 revisions

Todo el procedimiento aquí detallado se encuentra mucho mejor explicado y en un formato más práctico, en el video de Brackeys How to Fade Between Scenes in Unity.

Para comenzar, es necesario tener cargadas las diferentes escenas en Build Settings: File -> Build Settings -> Add Open Scenes.

Creación de componentes básicos

Para la animación de transición utilizo el sistema UI de Unity, en específico un canvas con una imágen que adapto al tamaño de dicho canvas. Para que el canvas esté por encima del contenido del proyecto, en el inspector se cambia su Sort Order a un valor alto (por ejemplo, 999). Para cambiar el tamaño de la imágen al tamaño del canvas, en el inspector donde se encuentra la opción de posicionamiento, se presiona la opción inferior derecha manteniendo presionada la tecla Alt. En el proyecto se utiliza la imágen de fondo de la aplicación, pero para realizar la transición con otro color o imágen solo basta con cambiar la configuración de la imágen. Para ser más ordenado, se coloca el canvas dentro de un Empty Object con el nombre "SceneTransition".

image

Creación de la animación

Para acceder a la ventana Animation se puede utilizar el atajo Ctrl+6, y luego se procede (teniendo seleccionado el objeto con los elementos, en este caso SceneTransition) a crear una nueva animación (en el proyecto se colocó de nombre FadeIn.anim y FadeOut.anim). Todas las animaciones del proyecto se encuentran en la carpeta Assets/Animations de el código de Unity.

Fade In

Para la animación de FadeIn, se adelanta la regla del animador 1 segundo (o la duración que se desea), y luego se cambia el alpha a 0 en el color de la imágen previamente creada. También se deshabilita la imágen con el fin de dejar de mostrarla.

Fade Out

Para la animación de FadeOut, se realiza lo opuesto a lo anterior, cambiando el alpha de la imágen a 0 al principio, y asegurándose que la imágen se habilite haciendo dos veces click en el tich de habilitación. Luego se desplaza la regla del animador 1 segundo y se coloca al alpha de la imágen en 255 (máximo).

animation

Controlador de animaciones

Al crear la primera animación, Unity crea automáticamente en la misma carpeta un objeto Controller con el nombre de nuestro objeto con los diferentes elementos, SceneTransition. Para controlar la secuencia de animaciones se abre este controlador haciendo doble click, con lo que se abrirá la ventana Animator.

Para deshabilitar el loop de las animaciones, en la ventana Project se selecciona las diferentes animaciones y en el Inspector se deshabilita Loop Time.

Es necesario crear la transición de Fade In a Fade Out. Lo primero es crear un trigger, esto es en la pestaña Parameters de la ventana Animator y creando un nuevo objeto Trigger, que en el proyecto se le colocó el nombre FadeOut. Luego, se crea la transición con click derecho sobre FadeIn en la ventana Animator, click en Make Transition, luego click en FadeOut, y al hacer click sobre la flecha indicadora de transición enl a máquina de estados, sobre el Inspector agregar el trigger FadeOut en la pestaña Conditions.

animator

Para que la transición sea instantánea, teniendo en el Inspector la transición creada, se deshabilita la opción Has Exit Time, en Settings el parámetro Transition Duration se coloca igual a cero y se deshabilita la opción Fixed Duration.

Script para la transición de escenas

Para conectar las animaciones y demás elementos con la funcionalidad que se desea que es la de cambiar de una escena a otra, se utiliza un script en el objeto SceneTransition, que en el proyecto tiene el nombre de SceneTransition.cs.

Se crea un atributo animator de tipo público, que luego se direccionará arrastrando el objeto Animator con el que trabajo, a través de la interfaz del editor de Unity. También se crea un atributo privado sceneToLoad donde simplemente se guarda el identificador de la escena a cargar:

public Animator animator;
private int sceneToLoad;

Se crea una función FadeToScene(int sceneIndex) de tipo pública por si es necesario accederlo desde otro objeto de la aplicación (algo muy probable), que recibe el índice de escena a cargar, que se encuentra en File -> Build Settings. Esta función activará el Trigger FadeOut creado previamente:

public void FadeToScene(int sceneIndex){
    sceneToLoad = sceneIndex;
    animator.SetTrigger("FadeOut");
}

Por último, se crea la función OnFadeComplete() que debe ser ejecutada una vez finalizada la animación:

public void OnFadeComplete(){
    SceneManager.LoadScene(sceneToLoad);
}

Para esto, en la ventana Animation se crea un evento (botón superior derecho en el panel de la izquierda de la ventana Animation) con la regla del animador al final de la animación FadeOut, y en el Inspector se la conecta con la función deseada.

event

Creación del prefab para poder utilizarlo en las diferentes escenas

Ya finalizada la creación del objeto SceneTransition y funcionando todo correctamente, solo queda crear un prefab de dicho objeto arrastrándolo a la ventana Project en la ubicación deseada. Para utilizarlo en las diferentes escenas solo es necesario arrastrar dicho prefab al escenario.