Animando el fondo con shader graph

Curso de Creación de Interfaces de Usuario con Unity

Contenido del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0012:16

Animando el fondo con shader graph

Curso de Creación de Interfaces de Usuario con Unity

Clase 17 de 29

Clase 17 / 29

Recursos

¿Cómo crear un efecto animado de Tiling en Unity con Shader Graph?

Crear efectos visualmente atractivos en tus videojuegos puede marcar la diferencia en la inmersión y el impacto emocional que generas en tu audiencia. En esta ocasión, exploraremos cómo crear un efecto de Tiling animado para el fondo de una pantalla de título utilizando Shader Graph en Unity. Este proceso no solo te ayudará a entender mejor los shaders dentro de Unity, sino que también te permitirá personalizar la apariencia de tus proyectos de manera más creativa.

¿Cómo configurar el entorno de trabajo en Unity?

Primero, necesitamos crear una nueva carpeta llamada "Graphs" en nuestro archivo principal de assets dentro de Unity. Esta carpeta almacenará todos nuestros Shader Graphs. Luego, creamos un nuevo asset de Shader Graph siguiendo estos pasos:

Haz clic derecho en la carpeta "Graphs".
Selecciona la opción "Create" y luego "Shader Graph" > "URP" > "Unlit Shader Graph".
Nombra el shader como "Tiling Effect".

¿Cómo abrir y usar Shader Graph?

Una vez creado el shader, dale doble clic para abrirlo en el editor Shader Graph. Este editor, basado en nodos, nos permite crear shaders personalizados. Aquí, se encuentran dos nodos básicos:

Vertex Node: Edita posiciones de la geometría.
Fragment Node: Proporciona el color visible en la textura.

Nos centraremos en el nodo Fragment. El objetivo inicial es mostrar una textura en el shader.

- Panel de Propiedades: Añade una nueva textura 2D, llámala "Main Texture", y selecciona la textura de giraffes.

¿Cómo aplicar texturas y gestionar propiedades de transparencia?

Una vez que la propiedad de textura es añadida, sigue estos pasos para manejar la visibilidad:

Arrastra la "Main Texture" al espacio de trabajo.
Crea un nodo "Sample Texture 2D", conéctalo al fragment mediante RGBA.
Cambia el "Mesh" en "Main Preview" a "quad" para visualizar mejor.
Configura "Surface Type" a "Transparente" en Graph Settings para permitir transparencia.

¿Cómo lograr el efecto de Tiling?

Para que la textura se repita, utilizamos Tiling and Offset:

Crea el nodo "Tiling and Offset".
Conéctalo a las coordenadas UV del "Sample Texture Node".
Ajusta valores de "Tiling" para repetición.

Agregamos un "Vector 2" llamado "Tiling" con valores por defecto de 4 y 4. Este vector lo conectamos al nodo "Tiling and Offset".

¿Cómo animar la textura con velocidad?

Queremos que las texturas se muevan gradualmente, usando el tiempo transcurrido:

Crea un nodo "Time".
Añade otro "Vector 2" llamado "Speed" con valores por defecto de 1 en X y 0 en Y.
Multiplica Speed por Time y conecta el resultado al offset de "Tiling and Offset".

¿Cómo integrar estos shaders animados en un proyecto?

Después de configurar y guardar tu Shader Graph:

Crea un material basado en el shader.
Asigna el material a los elementos de la escena que deseas transformar.
Ajusta propiedades de Tiling y Speed para conseguir el efecto deseado.

¿Cómo personalizar y experimentar?

Finalmente, puedes duplicar y modificar materiales para diferentes texturas, como un hipopótamo, mono o panda. Cada material puede tener velocidades de animación y direcciones personalizadas para crear un impacto visual más dinámico. Experimenta con imágenes y valores para conseguir resultados únicos y atractivos.

Con estos pasos, puedes crear un efecto de Tiling animado simple, pero impresionante, utilizando Shader Graph de Unity. Te animamos a que pruebes nuevas combinaciones y compartas tus resultados. Es el momento de dejar volar tu creatividad en el mundo del diseño de videojuegos. ¿Estás listo para el desafío?

Resumen

¿Cómo crear un efecto animado de Tiling en Unity con Shader Graph?

¿Cómo configurar el entorno de trabajo en Unity?

Haz clic derecho en la carpeta "Graphs".
Selecciona la opción "Create" y luego "Shader Graph" > "URP" > "Unlit Shader Graph".
Nombra el shader como "Tiling Effect".

¿Cómo abrir y usar Shader Graph?

Una vez creado el shader, dale doble clic para abrirlo en el editor Shader Graph. Este editor, basado en nodos, nos permite crear shaders personalizados. Aquí, se encuentran dos nodos básicos:

Vertex Node: Edita posiciones de la geometría.
Fragment Node: Proporciona el color visible en la textura.

Nos centraremos en el nodo Fragment. El objetivo inicial es mostrar una textura en el shader.

- Panel de Propiedades: Añade una nueva textura 2D, llámala "Main Texture", y selecciona la textura de giraffes.

¿Cómo aplicar texturas y gestionar propiedades de transparencia?

Una vez que la propiedad de textura es añadida, sigue estos pasos para manejar la visibilidad:

Arrastra la "Main Texture" al espacio de trabajo.
Crea un nodo "Sample Texture 2D", conéctalo al fragment mediante RGBA.
Cambia el "Mesh" en "Main Preview" a "quad" para visualizar mejor.
Configura "Surface Type" a "Transparente" en Graph Settings para permitir transparencia.

¿Cómo lograr el efecto de Tiling?

Para que la textura se repita, utilizamos Tiling and Offset:

Crea el nodo "Tiling and Offset".
Conéctalo a las coordenadas UV del "Sample Texture Node".
Ajusta valores de "Tiling" para repetición.

Agregamos un "Vector 2" llamado "Tiling" con valores por defecto de 4 y 4. Este vector lo conectamos al nodo "Tiling and Offset".

¿Cómo animar la textura con velocidad?

Queremos que las texturas se muevan gradualmente, usando el tiempo transcurrido:

Crea un nodo "Time".
Añade otro "Vector 2" llamado "Speed" con valores por defecto de 1 en X y 0 en Y.
Multiplica Speed por Time y conecta el resultado al offset de "Tiling and Offset".

¿Cómo integrar estos shaders animados en un proyecto?

Después de configurar y guardar tu Shader Graph:

Crea un material basado en el shader.
Asigna el material a los elementos de la escena que deseas transformar.
Ajusta propiedades de Tiling y Speed para conseguir el efecto deseado.

¿Cómo personalizar y experimentar?

Introducción y configuración inicial

Transforma la UI de tu juego Match 3 en Unity

Cargando el proyecto

Unity UI vs UI Toolkit: cuál usar en 2022

El sistema de UI de Unity

Canvas y sus modos de renderizado en Unity

El Rect Transform

Componente de imagen

Máscaras y efectos

Texto en Unity con Text Mesh Pro

Creando botones en nuestra interfaz

Otros elementos de UI

Auto layout

Scroll views

Controla grupos de UI con Canvas Group

Haciendo interfaces para el juego

Pantallas de UI para Safari Match en Unity

Importar y configurar sprites UI en Unity

Construye la Start Screen en Unity

Animando el fondo con shader graph

Agregando lógica a la pantalla de título

Scroll view de selección de niveles en Unity

Genera lista de niveles con prefabs en Unity

Corrige bugs de UI antes de añadir más features

Contador de puntos y pausa en Unity HUD

Anima iconos con DOTween en Unity

Pantalla de pausa en Unity con Layout Group

Pantalla de pausa con reseteo de escena en Unity

Rediseño visual de la pantalla Game Over en Unity

Pantalla de opciones con layouts en Unity

Implementación de la pantalla de configuración

Interfaces de Unity que parecen juegos profesionales

Animando el fondo con shader graph

Progreso del curso

Introducción y configuración inicial

El sistema de UI de Unity

Haciendo interfaces para el juego

Recursos

Recursos