32blogby Studio Mitsu

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

Aprende a mostrar imágenes en Ren'Py 8.5. Cubre reglas de nomenclatura, diferencias entre scene/show/hide, transiciones, cambio de expresiones y control de posición y capas.

by omitsu11 min read
Ren'Pyvisual-novelgame-devbeginner
Contenido

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.

text
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.

Nombre de archivoNombre de imagenTagAtributos
bg forest.pngbg forestbgforest
eileen_happy.pngeileen happyeileenhappy
eileen sad.pngeileen sadeileensad

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.

renpy
# 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

renpy
# 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

renpy
# 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

renpy
hide eileen

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

Poniéndolo todo junto

renpy
label start:
    # Mostrar fondo
    scene bg forest
    with fade

    # El personaje entra
    show eileen happy
    with dissolve

    e "Este bosque es hermoso."

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

    e "Pero se siente un poco solitario."

    # El personaje sale
    hide eileen
    with dissolve

    "Ella desapareció en el bosque."

Cambiando escenas con transiciones

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

Transiciones básicas

renpy
# 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:

TransiciónEfecto
fadeDesvanecimiento a través de negro
dissolveCrossfade (0.5s)
pixellatePixelar y cambiar
vpunchSacudida de pantalla vertical
hpunchSacudida de pantalla horizontal
wipeleftBarrido hacia la izquierda
sliderightDeslizamiento hacia la derecha

Para la lista completa, consulta Transitions.

Dos estilos de with

Hay dos formas de escribir with.

renpy
# 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.

renpy
# 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.

text
images/
├── eileen happy.png
├── eileen sad.png
├── eileen angry.png
└── eileen surprised.png
renpy
show eileen happy
e "Buen clima hoy."

show eileen surprised
e "Espera, ¿en serio?"

show eileen angry
e "¡Eso es terrible!"

show eileen sad
e "...Ya veo."

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.

renpy
# 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.

renpy
show eileen happy at left
show sakura smile at right

e "Estoy a la izquierda."
s "Estoy a la derecha."

Posiciones incorporadas de Ren'Py:

PosiciónHorizontalCaso de uso
leftBorde izquierdo (xalign 0.0)Lado izquierdo de una conversación de dos personas
centerCentro (xalign 0.5)Escenas en solitario
rightBorde derecho (xalign 1.0)Lado derecho de una conversación de dos personas
truecenterCentro exacto de la pantallaPantallas de título

Posiciones personalizadas

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

renpy
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.

renpy
# 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

Preguntas Frecuentes

¿Qué formatos de imagen soporta Ren'Py?

Ren'Py detecta automáticamente archivos PNG, JPG (JPEG), WebP, AVIF y SVG en game/images/. Usa PNG o WebP para sprites de personajes (que necesitan transparencia) y JPG para fondos. AVIF ofrece mejor compresión que WebP a la misma calidad. SVG es útil principalmente para elementos de UI. Consulta Displayables para más detalles.

¿Por qué mi imagen no aparece en Ren'Py?

Tres causas comunes: (1) El archivo no está en game/images/ ni en una subcarpeta, (2) el nombre de imagen en tu script no coincide con el nombre del archivo — usa espacios, no guiones bajos, en tu script, (3) no hay interacción (diálogo, with o pause) después de la declaración show.

¿Cuál es la diferencia entre scene y show?

scene limpia todas las imágenes en la capa master antes de mostrar la nueva imagen — úsalo para cambios de fondo. show agrega o reemplaza una sola imagen sin limpiar las demás — úsalo para personajes. Ejecutar scene cuando hay personajes en pantalla los elimina a todos.

¿Cómo muestro múltiples personajes al mismo tiempo?

Usa show con la palabra clave at para posicionamiento. Por ejemplo: show eileen happy at left y show sakura smile at right. Las posiciones incorporadas de Ren'Py incluyen left, center, right y truecenter. Para control más fino, define posiciones personalizadas con transform.

¿Qué es LayeredImage y cuándo debería usarlo?

LayeredImage te permite componer sprites de personajes desde múltiples capas — cuerpo base, expresión facial, atuendo, accesorios — que se seleccionan por atributos en tiempo de ejecución. Úsalo cuando tus personajes tienen muchas combinaciones de expresiones y atuendos. Es más eficiente que preparar un archivo de imagen separado para cada combinación.

¿Cómo animo imágenes en Ren'Py?

El ATL (Animation and Transformation Language) de Ren'Py maneja las animaciones. Puedes definir transforms que muevan, roten, escalen y desvanezcan imágenes a lo largo del tiempo. Los bloques ATL van dentro de definiciones transform y soportan animaciones secuenciales, paralelas y en bucle.

¿Puedo usar imágenes de fuera de la carpeta game/images/?

Sí. Usa la declaración image para definir imágenes desde rutas arbitrarias: image eileen happy = "characters/eileen/happy.png". La ruta es relativa a la carpeta game/. Esto es útil cuando organizas assets en estructuras de directorio personalizadas.

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 (Animation and Transformation Language), son los próximos pasos después de dominar lo básico de esta guía. Agregar BGM y efectos de sonido también dará vida a tus escenas.

Recursos oficiales:

Artículos relacionados: