viernes, 3 de octubre de 2025

Página 96: Apuntes de "How to Create Shader Transitions in Godot"

Lista de reproducción completa del tutorial de Godot sobre cómo crear un Action-RPG en Godot, creada por MakerTech

Season 1

https://www.youtube.com/playlist?list=PLMQtM2GgbPEVuTgD4Ln17ombTg6EahSLr 

Season 2

https://www.youtube.com/playlist?list=PLMQtM2GgbPEWCCJG8xywVPrOBcU6KpcNq

Extra

https://www.youtube.com/playlist?list=PLMQtM2GgbPEXTqB6PCXSvXlgTIc20uPd3

 

Hasta ahora, la transición entre escenas se hace de golpe, en este video se enseña como hacer una transición entre escenas.

Se enseña como hacer una transiciones con y sin usar shaders.

¡¡Importantísimo!! Ver el video publicado en la pagina 95 donde se explica como crear shaders, necesario para poder completar el videotutorial.

Transiciones sin shaders.

Vamos a empezar creando una escena CanvasLayer llamado SceneManager, con un ColorRect de nodo hijo.

 

  • SceneManager (CanvasLayer) 

  • ColorRect 

 

Adjuntamos el script Scene_Manager que creamos en la pagina 29 a la escena.

En dicha pagina, adjuntamos el script en el autoload, en esta pagina la vamos a cambiar por la escena SceneManager.

 

Ahora vamos a volver a la escena y vamos a meter un nodo AnimationPlayer y lo llamaremos Transition Player.

Vamos a crear la animación transition_out. 

Acabo de darme cuenta, que la animación RESET establece el valor que tendrá el nodo que va enlazado, nueva cosa aprendida.

 

Actualizamos el script de la escena.

 

Así es como debería quedar si lo hemos hecho todo bien.


 

Transiciones con shaders.

Ejemplo 1

 Antes de nada, verificamos que la propiedad modulate del ColorRect quede con sus valores por defecto.

 

Vamos a crear nuestro primer shader. Obtendremos el mismo resultado que en el ejemplo sin shaders, para comparar dos maneras de lograr el mismo efecto.

 

Vamos a crear una animación nueva, llamada transition_out_shader.

Usaremos la variable Progress para crear los nodos

 

 

 

Ejemplo 2

Es la transición de un cuadro negro que tapa la escena y se repliega para mostrar la nueva escena.

 

 

 

 


Ejemplo 3

Para este ejemplo, se creara una nueva animación.

 

 

Ejemplo 4

Es como el ejemplo 3, pero la transición se realiza en diagonal.

 

 

 


 
Hoy no  apetece despedir la entrada.
 

No hay comentarios:

Publicar un comentario