05 Experimentos con Efectos - hektorprofe/godot-descubre GitHub Wiki

Escena con nombre SandboxEffects.tscn y los scripts en un directorio scripts/SandboxEffects.

Vamos escondiendo los nodos que no usemos y yastá.

53. Efecto de Parallax

Crear un efecto de profundidad moviendo fondos a diferentes velocidades.

vfx1

Descargar los recursos de prueba: https://vnitti.itch.io/glacial-mountains-parallax-background.
Añadir un ParallaxBackground: En tu escena, añade un nodo ParallaxBackground. Este será el contenedor para tus capas de parallax.
Añadir ParallaxLayer(s): Dentro del ParallaxBackground, añade nodos ParallaxLayer. Cada ParallaxLayer representará una capa de tu fondo, como el cielo, montañas lejanas, árboles más cercanos, etc. De más lejano a más cercano.
Configurar los Sprites: Dentro de cada ParallaxLayer, añade un nodo Sprite2D para tu gráfico de fondo.
Desactivar Centered de Offset en los sprites: Para poder alinearlos todos a la esquina (0,0) de la escena.
Cambiar el filtro: Si son sprites pixeladados ir a Proyecto > Configuración > Renderizado > Texturas > Filtro y cambiarlo a Nearest.
Reescalar el nodo ParallaxBackgroun en su transform.scale a (3,3), por lo menos en mi caso.
Ajustar las Propiedades de ParallaxLayer: Para cada ParallaxLayer, puedes ajustar las propiedades Motion Scale y Mirroring para controlar la velocidad relativa del movimiento de la capa y cómo se repite la textura. Esto mediante código es más sencillo:

extends ParallaxBackground

func _ready() -> void:
    # Configuramos la repetición y velocidad de las capas parallax
    $ParallaxLayer0.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer0.motion_scale = Vector2(0, 0) # Velocidad 0%
	
    $ParallaxLayer1.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer1.motion_scale = Vector2(0.2, 0) # Velocidad 20%
	
    $ParallaxLayer2.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer2.motion_scale = Vector2(0.4, 0) # Velocidad 40%
	
    $ParallaxLayer3.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer3.motion_scale = Vector2(0.6, 0) # Velocidad 60%
	
    $ParallaxLayer4.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer4.motion_scale = Vector2(0.8, 0) # Velocidad 80%
	
    $ParallaxLayer5.motion_mirroring = Vector2(384, 0) # Tamaño X original
    $ParallaxLayer5.motion_scale = Vector2(1.0, 0) # Velocidad 100%

Si el juego tiene una cámara que sigue al jugador o se mueve a través del mundo, el efecto parallax se manejará automáticamente por los nodos ParallaxBackground y ParallaxLayer basándose en el movimiento de la cámara. En este experimento no tenemos una cámara así que lo moveremos manualmente:

# Velocidad de movimiento para simular el efecto parallax sin una cámara.
var parallax_speed = Vector2(-10, 0)

func _process(delta):
    # Mueve el ParallaxBackground manualmente para simular movimiento.
    scroll_offset += parallax_speed * delta

54. Efecto de Estrellas

Crea una estrella que cruza el cielo nocturno dejando un rastro.

Empezamos con un ColorRect para el Fondo, pero no 100% negro, que cubra el viewport.
Sobre éste creamos un GPUParticle2D para el Espacio con la siguiente configuración:
- Amount 200
- Process Material:
  - Spawn > Position > Emission Shape Scale: 576 324 1
  - Spawn > Position > Emission Shape: Box
  - Velocity > Spread: 0
  - Accelerations > Gravity: 0 0 0
  - Display Scale> Scale Min: 2
  - Display Scale> Scale Max: 3
  - Display Scale> Scale Curve:
  - Time > Lifetime: 60
  - Time > Preprocess: 60

55. Efecto de Cometa

vfx5

La escena está formado por un fondo oscuro con partículas a modo de estrellas lejanas y una estrella amarilla con estela.
Instalamos el addon Trail2D de la AssetLib y lo activamos.
Creamos un Node2D llamado Estrella y dentro un Trail2D llamado Rastro y un Sprite2D llamado Sprite.
Modulamos el color del propio Sprite Self Modulate a un tono amarillo #ffff00 y su rotation a 45 .
El código del nodo padre Estrella moverá el sprite y lo reiniciará al salirse de los márgenes:

extends Node2D
@export var speed : float = 500.0

func _process(delta: float) -> void:
    translate(Vector2(1, -0.2) * speed * delta)
    if position.x > get_viewport().size.x:
        position.x = - 50
    if position.y < 0:
        position.y = get_viewport().size.y + 50

Si la estela no se dibuja bien, activamos Visibility > Top Level para no heredar su Transform.
Ya deberia funcionar, pero tenemos que reiniciar los puntos al salirse de la ventana:

# "Estrella.gd": Lo llamamos al reiniciar los puntos de la línea
func _process(delta: float) -> void:
    translate(Vector2(1, -0.2) * speed * delta)
    if position.x > get_viewport().size.x:
        position.x = - 50
	$Rastro.clear_points()  # aqui
    if position.y < 0:
        position.y = get_viewport().size.y + 50
	$Rastro.clear_points()  # aqui

El rastro ya funcionará, ahora personalizamos la apariencia al gusto:
- Length: 15
- Width: 10
- Width Curve:
- Fill > Gradient (ffff0093, ffff00):
Cuanto más rápido se mueva la estrella, más largo será el rastro.

56. Efecto de Lluvia

Simular lluvia con el sistema de partículas. Tutorial: https://www.youtube.com/watch?v=p4z_j3dS5ds

vfx2

Añadimos un fondo y unas nubes para crear un poco de escenografía.
Añadir GPUParticles2D: En tu escena, añade un nodo GPUParticles2D para el efecto de lluvia;
- Amount: Número de partículas activas 500.
- Time > Lifetime: Segundos de vida 1.5.
Crear un ParticlesMaterial para ProcessMaterial: En la propiedad Process Material del nodo GPUParticles2D, crea un nuevo ParticlesMaterial.

Asignar Textura: En el ParticlesMaterial bajo el Process Material, puedes asignar una textura a las partículas. Para la lluvia, una textura de gota de agua simple funcionará bien. Asegúrate de ajustar la propiedad Scale para cambiar el tamaño de las partículas según sea necesario: SPRITE ()

Activamos el alineamiento Y para que la gota apunte en dirección hacia donde cae:

Acabamos de pulir las configuraciones con la textura, como el escalado de la partícula si lo deseamos.

57. Efecto de Humo

Simular humo ascendente desde una chimenea.

vfx3

La escena está formado por un cielo de fondo, una chimenea y el sistema de partículas:
Amount: 200
Process material:
- Particle Flags: Align Y
- Spawn > Position > Emission Shape Scale: 7 1 1
- Spawn > Position > Emission Shape: Box
- Spawn > Velocity > Direction: 0 -1 0
- Spawn > Velocity > Spread: 10
- Spawn > Velocity > Initial Velocity Min: 50
- Spawn > Velocity > Initial Velocity Max: 70
- Accelerations > Gravity: 0 0 0
- Display > Scale > Scale Min: 12
- Display > Scale > Scale Max: 15
- Display > Scale > Scale Curve:
- Display > Color Curves > Color Ramp: (#191919, #5c5c5c, #747474ae):
- Time > Lifetime: 2
- Preprocess > Lifetime: 2

58. Efecto de Fuego

Configurar partículas para simular el fuego de una antorcha.

vfx4

La escena está formado por un color oscuro de fondo, la antorcha, una sombra y el sistema de partículas:
Amount: 250
Process material:
- Particle Flags: Align Y
- Spawn > Position > Emission Shape Scale: 1 1 1
- Spawn > Position > Emission Shape: Box
- Spawn > Velocity > Direction: 0 -1 0
- Spawn > Velocity > Spread: 45
- Spawn > Velocity > Initial Velocity Min: 0
- Spawn > Velocity > Initial Velocity Max: 0
- Accelerations > Gravity: 0 -98 0
- Display > Scale > Scale Min: 5
- Display > Scale > Scale Max: 7
- Display > Scale > Scale Curve:
- Display > Color Curves > Color Ramp: (#ffffff51, #ffbf00, #f35a17, #e70000, #e7000000):
- Turbulence: Enabled
- Turbulence > Noise Strength: 2
- Turbulence > Noise Scale: 1
- Turbulence > Noise Speed Random: 0.7
- Turbulence > Influence Min: 0.1
- Turbulence > Influence Max: 0.3
- Turbulence > Initial Displacement Min: -30
- Turbulence > Initial Displacement Min: 3
- Turbulence > Influence over Time:
- Time > Lifetime: 1.1
- Preprocess > Lifetime: 5
Una vez nos guste podemos añadir una luz radial. Dentro de la antorcha nuevo nodo PointLight2D, la llamamos Luz.
Le añadimos una GradientTexture2 de dos colores, configuramos el Fill en Radial y centramos el emisor pero a la inversa.

Le damos un tamaño como 100x100 píxeles, un Energy de 2.5 y modo Add.

61. Efecto de Rebote

Usando animaciones.

62. Efecto de Transición

Usando animaciones.