Básicos de Imágenes en Ren'Py: show, scene y Transiciones

Cuando escribiste scene bg room en la guía de inicio, la pantalla estaba negra. Todavía no existía ningún archivo de imagen.

Esta guía cubre cómo mostrar imágenes en Ren'Py 8.5.2 desde cero — reglas de nomenclatura, scene/show/hide, transiciones, cambio de expresiones y control de posición y capas.

Entendiendo las reglas de nomenclatura de imágenes

Ren'Py detecta automáticamente los archivos de imagen colocados en game/images/ y los pone disponibles en tu script. Equivocarse con la nomenclatura es la razón más común por la que las imágenes no aparecen.

Dónde colocar los archivos

Coloca las imágenes en game/images/. Las subcarpetas también se detectan.

mygame/
└── game/
    └── images/
        ├── bg forest.png
        ├── bg castle.jpg
        ├── characters/
        │   ├── eileen happy.png
        │   └── eileen sad.png
        └── ui/
            └── textbox.png

Cómo los nombres de archivo se convierten en nombres de imagen

Ren'Py divide los nombres de archivo por espacios o guiones bajos y los convierte en nombres de imagen.

La primera palabra se convierte en el tag y el resto se convierte en atributos. Los tags agrupan imágenes para show y hide. Los atributos distinguen variantes (expresiones, atuendos) dentro del mismo tag.

# Si el archivo es bg forest.png
scene bg forest

# Si el archivo es eileen_happy.png
show eileen happy

Por qué "mi imagen no aparece"

Cuando una imagen no aparece, verifica estas tres cosas primero:

1. El archivo no está en game/images/ — Asegúrate de que no está en otra carpeta
2. El nombre de imagen no coincide — Escribe scene bg forest, no scene bg_forest. Usa espacios en tu script
3. No hay interacción después de show — show por sí solo no actualiza la pantalla (explicado en la siguiente sección)

scene, show y hide

Tres declaraciones controlan las imágenes en pantalla. Cada una tiene un rol diferente.

scene — Cambiar el fondo

# Limpiar la pantalla y mostrar un fondo
scene bg forest
with fade

scene limpia todas las imágenes en la capa antes de mostrar la imagen especificada. Úsalo para cambios de fondo.

Solo se limpia la capa master, así que los elementos de UI de show screen permanecen.

show — Mostrar un personaje

# Mostrar un personaje
show eileen happy

# El mismo tag se reemplaza automáticamente
show eileen sad

show agrega una imagen a la pantalla. Si una imagen con el mismo tag ya se está mostrando, la reemplaza. Después de show eileen happy, ejecutar show eileen sad elimina eileen happy y muestra eileen sad.

hide — Eliminar un personaje

hide eileen

hide elimina la imagen con el tag especificado. Solo necesitas el nombre del tag, sin atributos.

Poniéndolo todo junto

label start:
    # Mostrar fondo
    scene bg forest
    with fade

    # El personaje entra
    show eileen happy
    with dissolve

    e "This forest is beautiful."

    # Cambiar expresión (mismo tag, se reemplaza automáticamente)
    show eileen sad

    e "But it feels a bit lonely."

    # El personaje sale
    hide eileen
    with dissolve

    "She disappeared into the forest."

Cambiando escenas con transiciones

La declaración with agrega efectos de animación a los cambios de pantalla.

Transiciones básicas

# Aparición gradual (desde negro)
scene bg forest
with fade

# Disolución (crossfade)
show eileen happy
with dissolve

# Aplicar cambios precedentes sin mostrarlos (actualiza la línea base de transición)
scene bg castle
with None

Transiciones de uso común:

Para la lista completa, consulta Transitions.

Dos estilos de with

Hay dos formas de escribir with.

# Estilo 1: Declaración with independiente
# Transiciona TODOS los cambios precedentes juntos
show eileen happy
show bg forest
with dissolve

# Estilo 2: With en línea con show/scene
# Transiciona solo ese cambio
show eileen happy with dissolve

El Estilo 1 es útil cuando quieres transicionar múltiples cambios (fondo + personaje) simultáneamente.

Transiciones personalizadas

Ajusta los parámetros de Dissolve() o Fade() para crear tus propias transiciones.

# Dissolve de 2 segundos
define slow_dissolve = Dissolve(2.0)

# Fade a través del blanco en lugar del negro
define white_fade = Fade(0.5, 0.0, 0.5, color="#fff")

label start:
    scene bg forest
    with slow_dissolve

    scene bg castle
    with white_fade

Cambiando expresiones de personajes

Variantes basadas en atributos

Prepara múltiples imágenes con el mismo tag pero diferentes atributos, y show maneja el cambio de expresiones.

images/
├── eileen happy.png
├── eileen sad.png
├── eileen angry.png
└── eileen surprised.png

show eileen happy
e "Nice weather today."

show eileen surprised
e "Wait, really?"

show eileen angry
e "That's terrible!"

show eileen sad
e "...I see."

Cuando ejecutas show eileen sad, la imagen previa show eileen angry se elimina automáticamente y se reemplaza con eileen sad. Esto es el reemplazo automático por mismo tag.

Definición manual con image

Puedes definir nombres de imagen tú mismo en lugar de depender de la detección automática. Usa esto cuando los archivos están fuera de game/images/ o cuando necesitas configuraciones complejas.

# Especificar rutas de archivo directamente
image eileen happy = "characters/eileen/happy.png"
image eileen sad = "characters/eileen/sad.png"

# Componer múltiples partes juntas
image eileen happy dress = Composite(
    (300, 600),
    (0, 0), "characters/eileen/base_dress.png",
    (0, 0), "characters/eileen/face_happy.png",
)

Las imágenes definidas manualmente funcionan con show eileen happy igual que las detectadas automáticamente.

Controlando posición y capas

Posiciones incorporadas

Usa la palabra clave at para establecer posiciones de personajes.

show eileen happy at left
show sakura smile at right

e "I'm on the left."
s "I'm on the right."

Posiciones incorporadas de Ren'Py:

Posiciones personalizadas

Cuando las posiciones incorporadas no son suficientes, define las tuyas con transform.

transform quarter_left:
    xalign 0.25
    yalign 1.0

transform quarter_right:
    xalign 0.75
    yalign 1.0

label start:
    show eileen happy at quarter_left
    show sakura smile at quarter_right

xalign establece la posición horizontal (0.0 = borde izquierdo, 1.0 = borde derecho). yalign establece la posición vertical (0.0 = arriba, 1.0 = abajo). Usar yalign 1.0 es estándar para sprites de personajes para que sus pies se alineen con la parte inferior de la pantalla.

Control del orden de capas

Cuando múltiples personajes se superponen, puede que necesites controlar el orden de visualización.

# zorder establece adelante/atrás (números más altos están al frente)
show eileen happy at left zorder 10
show sakura smile at right zorder 5

# behind coloca una imagen detrás de un tag específico
show sakura smile behind eileen

Conclusión

Lo que cubrimos:

• Reglas de nomenclatura: Coloca archivos en game/images/. Los espacios o guiones bajos en los nombres de archivo se convierten en nombres de imagen automáticamente
• scene/show/hide: scene cambia fondos (con limpieza), show muestra personajes (reemplazo por mismo tag), hide los elimina
• Transiciones: with fade/with dissolve agregan efectos de animación a los cambios de pantalla
• Variantes de expresión: Prepara múltiples imágenes con el mismo tag y diferentes atributos, luego cambia con show
• Posición y capas: at left/center/right para posicionamiento, zorder/behind para orden de capas

Si eres nuevo en Ren'Py, comienza con la guía de inicio. Para implementación de sistemas de estadísticas, consulta la guía de gestión de estadísticas.

Componer dinámicamente expresiones y partes de atuendo de personajes con LayeredImage, y controlar animaciones con ATL, son los próximos pasos después de dominar lo básico de esta guía.

Recursos oficiales:

• Displaying Images — referencia oficial de visualización de imágenes
• Transitions — lista completa de transiciones
• Transforms — control de posición y animación
• r/RenPy — comunidad