Personalizar el menú de guardado en Ren'Py
¡Hola, creadores de novelas visuales! Bienvenidos a la decimoctava entrada de esta guía de Ren'Py en español. En el [post anterior] aprendimos a usar diccionarios para manejar datos en nuestra historia. Hoy vamos a enfocarnos en una parte importante de la interfaz de tu juego: **personalizar el menú de guardado**. Aprenderemos a cambiar el fondo, ajustar los botones y modificar la disposición de las ranuras de guardado para que se vea más acorde con el estilo de tu novela visual. ¡Empecemos!
1. ¿Qué es el menú de guardado y por qué personalizarlo?
El menú de guardado en Ren'Py es la pantalla que aparece cuando el jugador selecciona "Save" o "Load" desde el menú principal o durante el juego. Por defecto, muestra una cuadrícula con ranuras donde el jugador puede guardar o cargar partidas, junto con información como el nombre del archivo y la fecha.
**¿Por qué personalizarlo?**
- Hace que tu juego se vea más profesional y consistente con el estilo visual de tu novela visual.
- Mejora la experiencia del jugador al hacer que la interfaz sea más atractiva.
- Permite destacar tu creatividad, igual que cuando personalizamos el menú principal (como vimos en el post del 12 de abril).
2. Preparativos: Elige un fondo para el menú
Para personalizar el menú de guardado, usaremos el archivo `screens.rpy`, que ya modificamos cuando personalizamos el menú principal. También necesitarás un fondo para el menú:
- Usa el mismo fondo que usaste para el menú principal (por ejemplo, `menu_fondo.png` en la carpeta `game/gui`), o elige uno nuevo.
- Asegúrate de que el fondo tenga una resolución de 1280x720 píxeles (la predeterminada de Ren'Py) para que se vea bien.
3. Cambiar el fondo del menú de guardado
Vamos a modificar el fondo de las pantallas de guardado y carga en `screens.rpy`.
1. Abre el archivo `screens.rpy` en la carpeta `game` de tu proyecto.
2. Busca la sección que define la pantalla de guardado (`screen save():`). Por defecto, se ve algo así:
```
screen save():
tag menu
use file_slots(_("Save"))
```
- `use file_slots(_("Save"))` es lo que crea la cuadrícula de ranuras para guardar.
3. Añade un fondo personalizado antes de `use file_slots`:
```
screen save():
tag menu
add "gui/menu_fondo.png"
use file_slots(_("Save"))
```
4. Haz lo mismo para la pantalla de carga (`screen load():`):
```
screen load():
tag menu
add "gui/menu_fondo.png"
use file_slots(_("Load"))
```
- Esto asegura que ambas pantallas (guardado y carga) tengan el mismo fondo.
4. Ajustar los botones y la disposición de las ranuras
Ahora, vamos a modificar cómo se ven las ranuras de guardado y los botones de navegación (como "Return").
1. **Cambiar la disposición de las ranuras**:
- Por defecto, Ren'Py muestra las ranuras en una cuadrícula de 3 columnas. Vamos a cambiarla a 2 columnas para que se vea más espaciosa.
- Busca la sección `screen file_slots(title):` en `screens.rpy`. Dentro de esta pantalla, encontrarás una línea que define la cuadrícula:
```
grid gui.file_slot_cols gui.file_slot_rows:
```
- Los valores `gui.file_slot_cols` y `gui.file_slot_rows` están definidos en `gui.rpy`. Abre `gui.rpy` y busca:
```
define gui.file_slot_cols = 3
define gui.file_slot_rows = 2
```
- Cambia el número de columnas a 2:
```
define gui.file_slot_cols = 2
define gui.file_slot_rows = 3
```
- Esto crea una cuadrícula de 2 columnas y 3 filas (6 ranuras en total).
2. **Ajustar la posición de los botones**:
- En `screen file_slots(title):`, busca los botones de navegación (como "Return"). Por defecto, están en una barra en la parte inferior:
```
hbox:
xalign 0.5
yalign 1.0
spacing 15
textbutton _("{#auto_page}A") action FilePage("auto")
textbutton _("{#quick_page}Q") action FilePage("quick")
for i in range(1, 10):
textbutton str(i) action FilePage(i)
```
- Vamos a mover esta barra a la derecha de la pantalla para que no se superponga con el fondo:
```
vbox:
xalign 0.95
yalign 0.5
spacing 15
textbutton _("{#auto_page}A") action FilePage("auto")
textbutton _("{#quick_page}Q") action FilePage("quick")
for i in range(1, 10):
textbutton str(i) action FilePage(i)
```
- Cambiamos `hbox` por `vbox` para que los botones se apilen verticalmente, y ajustamos `xalign 0.95` para moverlos a la derecha.
3. **Cambiar el texto del botón "Return"**:
- Busca el botón "Return" en `screen file_slots(title):`:
```
textbutton _("Return"):
action Return()
xalign 0.5
yalign 0.95
```
- Cambia el texto a "Volver" y ajusta su posición:
```
textbutton "Volver":
action Return()
xalign 0.95
yalign 0.8
```
5. Código completo de las modificaciones
Aquí está el código completo de las pantallas modificadas en `screens.rpy`:
```
screen save():
tag menu
add "gui/menu_fondo.png"
use file_slots(_("Save"))
screen load():
tag menu
add "gui/menu_fondo.png"
use file_slots(_("Load"))
screen file_slots(title):
default page = FileCurrentPage()
use game_menu(title):
fixed:
order_reverse True
hbox:
style_prefix "slot"
xalign 0.5
yalign 0.5
spacing gui.slot_spacing
grid gui.file_slot_cols gui.file_slot_rows:
style_prefix "slot"
xalign 0.5
yalign 0.5
spacing gui.slot_spacing
for i in range(gui.file_slot_cols * gui.file_slot_rows):
$ slot = i + 1
button:
action FileAction(slot)
has vbox
add FileScreenshot(slot) xalign 0.5
text FileTime(slot, format=_("{#file_time}%Y-%m-%d %H:%M"), empty=_("empty slot")) style "slot_time_text"
text FileSaveName(slot) style "slot_name_text"
key "save_delete" action FileDelete(slot)
vbox:
xalign 0.95
yalign 0.5
spacing 15
textbutton _("{#auto_page}A") action FilePage("auto")
textbutton _("{#quick_page}Q") action FilePage("quick")
for i in range(1, 10):
textbutton str(i) action FilePage(i)
textbutton "Volver":
action Return()
xalign 0.95
yalign 0.8
```
Y en `gui.rpy`:
```
define gui.file_slot_cols = 2
define gui.file_slot_rows = 3
```
6. Probar los cambios
1. Guarda los cambios en `screens.rpy` y `gui.rpy`.
2. Ejecuta tu proyecto en Ren'Py y ve al menú de guardado o carga (puedes acceder desde el menú principal o presionando la tecla predeterminada para guardar durante el juego).
3. Verifica que el fondo, la disposición de las ranuras y los botones se vean como esperas.
7. Consejos para personalizar el menú de guardado
- **Fondo legible**: Asegúrate de que el fondo no sea demasiado brillante o detallado, para que las ranuras y botones sean fáciles de ver.
- **Prueba diferentes disposiciones**: Experimenta con el número de columnas y filas (`gui.file_slot_cols` y `gui.file_slot_rows`) para encontrar el diseño que más te guste.
- **Estilo consistente**: Usa el mismo fondo o colores que usaste en el menú principal (post del 12 de abril) para que la interfaz sea uniforme.
8. Ejercicios para practicar
Aquí tienes algunos ejercicios para que personalices aún más el menú de guardado:
1. **Cambia el fondo**:
- Usa un fondo diferente para el menú de guardado (por ejemplo, `save_fondo.png`) y aplícalo en `screen save()` y `screen load()`.
2. **Ajusta la disposición**:
- Cambia la cuadrícula a 4 columnas y 2 filas (`gui.file_slot_cols = 4`, `gui.file_slot_rows = 2`) y prueba cómo se ve.
3. **Mueve los botones**:
- Mueve la barra de navegación a la izquierda (`xalign 0.05`) o a la parte superior (`yalign 0.1`) de la pantalla.
9. ¡Tu turno!
Aplica los cambios que te mostré en tu archivo `screens.rpy` y prueba tu menú de guardado personalizado. ¿Lograste cambiar el fondo y ajustar las ranuras? ¿Los botones se ven bien en su nueva posición? Intenta los ejercicios y comparte tus resultados en los comentarios. En la próxima entrada, seguiremos explorando temas intermedios, como crear una opción de guardado propia para personalizar aún más tu juego. ¡Nos leemos el 18 de abril!
Comentarios
Publicar un comentario