Transiciones básicas en Ren'Py

¡Hola, creadores de novelas visuales! Bienvenidos a la undécima entrada de esta guía de Ren'Py en español. En el [post anterior] aprendimos a añadir música y efectos de sonido para darle vida a nuestras escenas. Hoy vamos a hablar de **transiciones**, una herramienta clave para hacer que los cambios en tu novela visual sean más suaves y profesionales. Veremos cómo usar transiciones básicas como `dissolve` y `fade`, y al final te dejaré un ejercicio intermedio para que combines transiciones de manera creativa. ¡Te animo a usar tus propios assets para practicar! Empecemos.

1. ¿Qué son las transiciones y por qué usarlas?

Una transición en Ren'Py es un efecto visual que ocurre cuando cambias de escena, muestras u ocultas un personaje, o cambias un fondo. Por ejemplo, en lugar de que un fondo cambie de repente, puedes usar una transición para que se desvanezca suavemente.

**¿Por qué son importantes?**

- Hacen que tu juego se vea más profesional y pulido.

- Ayudan a transmitir emociones (por ejemplo, un desvanecimiento lento puede indicar un cambio dramático).

- Mejoran la experiencia del jugador al evitar cambios bruscos.

2. Usar transiciones básicas: `dissolve` y `fade`. 

Ren'Py tiene varias transiciones predefinidas, pero hoy nos enfocaremos en dos de las más comunes: `dissolve` (disolución) y `fade` (desvanecimiento).

1. **Cambiar un fondo con `dissolve`**  

   Vamos a cambiar el fondo de la playa (`playa.png`) a una cueva (`cueva.png`) usando una transición suave. Asegúrate de tener ambos archivos en la carpeta `game`.

   ```

   define perrito = Character("Perrito", color="#00B7EB")

   define gatita = Character("Gatita", color="#FF69B4")

   label start:

       scene bg playa

       show perrito at left

       show gatita at right

       perrito "¡Hola, Gatita! ¿Quieres explorar esa cueva que vimos?"

       gatita "¡Claro, vamos!"

       scene bg cueva with dissolve

       perrito "¡Qué oscuro está aquí!"

   ```

   - `with dissolve` hace que el fondo de la playa se desvanezca lentamente y se reemplace por el fondo de la cueva.

2. **Mostrar y ocultar personajes con `dissolve`**  

   Ahora, hagamos que Gatita salga de la escena y luego regrese con una transición.

   ```

   hide gatita with dissolve

   perrito "Espera, ¿a dónde fue Gatita?"

   show gatita at right with dissolve

   gatita "¡Aquí estoy! Me asusté un poco, pero ya volví."

   ```

   - `hide gatita with dissolve` hace que Gatita desaparezca lentamente.

   - `show gatita at right with dissolve` la hace reaparecer con una transición suave.

3. **Usar `fade` para un cambio más dramático**  

   La transición `fade` oscurece la pantalla a negro y luego muestra la nueva escena, ideal para cambios importantes (como un cambio de día o lugar).

   ```

   scene bg playa with fade

   perrito "¡Volvimos a la playa!"

   gatita "Qué bueno, me gusta más la luz del sol."

   ```

   - `with fade` oscurece la pantalla y luego muestra el nuevo fondo.

3. Código completo con transiciones básicas

Aquí está el código completo con las transiciones que vimos:

```

define perrito = Character("Perrito", color="#00B7EB")

define gatita = Character("Gatita", color="#FF69B4")

label start:

    scene bg playa

    show perrito at left

    show gatita at right

    perrito "¡Hola, Gatita! ¿Quieres explorar esa cueva que vimos?"

    gatita "¡Claro, vamos!"

    scene bg cueva with dissolve

    perrito "¡Qué oscuro está aquí!"

    hide gatita with dissolve

    perrito "Espera, ¿a dónde fue Gatita?"

    show gatita at right with dissolve

    gatita "¡Aquí estoy! Me asusté un poco, pero ya volví."

    scene bg playa with fade

    perrito "¡Volvimos a la playa!"

    gatita "Qué bueno, me gusta más la luz del sol."

    return

```

#### 4. Ejercicio intermedio: Combinar transiciones

Ahora que conoces las transiciones básicas, aquí tienes un ejercicio para practicar algo un poco más avanzado: combina transiciones para crear una secuencia más dinámica.

1. Usa un fondo diferente (p. ej., `atardecer.png`) y cámbialo con `dissolve`.

2. Mueve a Perrito a una posición diferente (p. ej., `at center`) usando la transición `move`.

3. Haz que Gatita aparezca con `fade` en lugar de `dissolve`.

**Ejemplo de solución**:

```

scene bg cueva with dissolve

show perrito at left

show gatita at right

perrito "¡Qué oscuro está aquí!"

scene bg atardecer with dissolve

show perrito at center with move

show gatita at right with fade

perrito "¡Mira qué hermoso atardecer!"

gatita "Sí, es perfecto para terminar el día."

```

- `with move` hace que Perrito se desplace suavemente al centro.

- `with fade` hace que Gatita aparezca con un desvanecimiento dramático.

**Nota**: Si no tienes un fondo `atardecer.png`, usa cualquier otro fondo que hayas descargado (como aprendimos en el post del 8 de abril). ¡Este es el momento de usar tus propios assets!

5. Consejos para usar transiciones. 

- **No abuses de las transiciones**: Usar transiciones en cada cambio puede ser molesto para el jugador. Resérvalas para momentos importantes (como cambios de escena o emociones fuertes).

- **Prueba diferentes transiciones**: Además de `dissolve` y `fade`, Ren'Py tiene otras transiciones como `wipeleft` (deslizamiento a la izquierda) o `pixellate` (pixelado). Puedes experimentar con ellas.

- **Ajusta la duración**: Puedes cambiar la duración de una transición con `with dissolve(1.0)` (1 segundo). Por ejemplo:

  ```

  scene bg playa with dissolve(2.0)

  ```

  - Esto hace que la transición dure 2 segundos.

6. ¡Tu turno!

Copia este código en tu proyecto de Ren'Py y prueba las transiciones. ¿Lograste que los cambios de escena se vieran más suaves? Ahora, usa tus propios assets (fondos o sprites que hayas descargado) y prueba el ejercicio intermedio. ¿Qué transiciones combinaste? Comparte tus resultados en los comentarios. En la próxima entrada, seguiremos explorando temas básicos, como personalizar la interfaz de texto de tu juego. ¡Nos leemos el 11 de abril!