Edición de texto en Ren'Py y códigos hexadecimales de color.

¡Hola, creadores de novelas visuales! Bienvenidos a la decimocuarta entrada de esta guía de Ren'Py en español. En el [post anterior] aprendimos a personalizar el menú principal de nuestro juego. Hoy vamos a enfocarnos en la **edición de texto** para que los diálogos de tus personajes se vean más únicos. Cambiaremos el color, la fuente y el estilo del cuadro de diálogo, y te daré un enlace útil para encontrar **códigos hexadecimales de color** que puedes usar en tus proyectos. ¡Empecemos!

1. ¿Qué vamos a personalizar?

En Ren'Py, los diálogos de los personajes aparecen en un cuadro de texto (llamado "say screen"). Por defecto, este cuadro tiene un fondo gris, texto blanco y una fuente estándar. Hoy vamos a aprender a:

- Cambiar el color del texto de los personajes.

- Cambiar la fuente del texto.

- Ajustar el color y el tamaño del cuadro de diálogo.

Para hacer estos cambios, modificaremos el archivo `gui.rpy`, que controla los estilos de la interfaz en Ren'Py.

2. Preparativos: Encuentra una fuente y códigos de color

Antes de empezar, necesitarás:

- **Una fuente personalizada**: Busca una fuente gratuita que te guste en sitios como Google Fonts ([fonts.google.com]) o DaFont ([dafont.com]). Descarga el archivo de la fuente (por ejemplo, `MiFuente.ttf`) y colócalo en la carpeta `game` de tu proyecto.

  - Ejemplo: Usaremos una fuente ficticia llamada `MiFuente.ttf`.

- **Códigos hexadecimales de color**: Los colores en Ren'Py se definen con códigos hexadecimales (por ejemplo, `#FFFFFF` es blanco, `#000000` es negro). Puedes encontrar una referencia de códigos hexadecimales en este enlace: [ColorHexa] o [HTML Color Codes]. Estos sitios te permiten elegir colores y copiar sus códigos hexadecimales.

3. Cambiar el color del texto de los personajes

Vamos a cambiar el color del texto de los diálogos de Perrito y Gatita. Por defecto, usamos colores en la definición de los personajes (`color="#00B7EB"` para Perrito y `color="#FF69B4"` para Gatita), pero ahora cambiaremos el color del texto general en el cuadro de diálogo.

1. Abre el archivo `gui.rpy` en la carpeta `game` de tu proyecto.

2. Busca la línea que define el color del texto de los diálogos. Se verá algo así:

   ```

   define gui.text_color = "#FFFFFF"

   ```

   - `#FFFFFF` es blanco (el color predeterminado del texto).

3. Cambia el color a uno que te guste. Por ejemplo, un gris claro (`#D3D3D3`):

   ```

   define gui.text_color = "#D3D3D3"

   ```

   - Nota: Este cambio afectará el texto de todos los personajes que no tengan un color específico definido. Perrito y Gatita seguirán usando sus colores (`#00B7EB` y `#FF69B4`) porque ya los definimos en el `script.rpy`.

4. Cambiar la fuente del texto

Ahora, cambiemos la fuente del texto en el cuadro de diálogo.

1. En el mismo archivo `gui.rpy`, busca la línea que define la fuente del texto:

   ```

   define gui.text_font = "DejaVuSans.ttf"

   ```

   - `DejaVuSans.ttf` es la fuente predeterminada de Ren'Py.

2. Reemplázala con tu fuente personalizada:

   ```

   define gui.text_font = "MiFuente.ttf"

   ```

   - Asegúrate de que el archivo `MiFuente.ttf` esté en la carpeta `game`.

5. Cambiar el color y el tamaño del cuadro de diálogo

Por último, vamos a cambiar el color de fondo del cuadro de diálogo y ajustar su tamaño.

1. En `gui.rpy`, busca la línea que define el color del cuadro de diálogo:

   ```

   define gui.dialogue_background = "#00000080"

   ```

   - `#00000080` es un negro semitransparente (el `80` al final indica la opacidad).

2. Cambia el color a uno más claro, como un azul suave (`#87CEEB80`):

   ```

   define gui.dialogue_background = "#87CEEB80"

   ```

3. Ajusta el tamaño del cuadro de diálogo (ancho y alto):

   - Busca estas líneas:

     ```

     define gui.dialogue_width = 746

     define gui.dialogue_height = None

     ```

   - Cambia el ancho a algo más pequeño (por ejemplo, 600 píxeles):

     ```

     define gui.dialogue_width = 600

     ```

6. Código de ejemplo con los cambios

Aquí está cómo se vería tu escena con los cambios aplicados. No necesitas modificar el `script.rpy`, ya que los cambios en `gui.rpy` se aplican automáticamente.

```

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

    narrator "Es un día soleado en la playa."

    perrito "¡Hola, Gatita! ¿Te gusta el nuevo estilo del texto?"

    gatita "¡Sí, se ve mucho más bonito ahora!"

    return

```

Y en el archivo `gui.rpy`, los cambios que hicimos:

```

define gui.text_color = "#D3D3D3"  # Color del texto: gris claro

define gui.text_font = "MiFuente.ttf"  # Fuente personalizada

define gui.dialogue_background = "#87CEEB80"  # Fondo del cuadro: azul suave

define gui.dialogue_width = 600  # Ancho del cuadro de diálogo

```

7. Referencia de códigos hexadecimales de color

Para elegir colores para tu texto o cuadro de diálogo, te recomiendo usar una referencia de códigos hexadecimales. Aquí tienes algunos sitios útiles:

- **ColorHexa** ([www.colorhexa.com]): Un sitio donde puedes elegir colores y copiar sus códigos hexadecimales.

- **HTML Color Codes** ([htmlcolorcodes.com]): Otro recurso con una paleta de colores y sus códigos.

Por ejemplo:

- `#FF0000` es rojo.

- `#00FF00` es verde.

- `#87CEEB` es un azul suave (como el que usamos para el cuadro de diálogo).

8. Consejos para personalizar el texto

- **Elige colores legibles**: Asegúrate de que el color del texto contraste con el fondo del cuadro para que sea fácil de leer. Por ejemplo, un texto oscuro sobre un fondo claro (o viceversa).

- **Fuentes claras**: Usa fuentes que sean fáciles de leer. Evita fuentes muy decorativas que dificulten la lectura.

- **Prueba diferentes estilos**: Experimenta con diferentes colores y tamaños hasta que encuentres un estilo que te guste.

9. Ejercicios para practicar

Aquí tienes algunos ejercicios para que personalices el texto de tu proyecto:

1. **Cambia el color del texto**:

   - Elige un color diferente para `gui.text_color` (por ejemplo, `#FFD700` para un amarillo dorado) y prueba cómo se ve.

2. **Prueba otra fuente**:

   - Descarga una fuente gratuita de Google Fonts o DaFont, colócala en la carpeta `game`, y úsala en lugar de `MiFuente.ttf`.

3. **Ajusta el cuadro de diálogo**:

   - Cambia el color del cuadro de diálogo a otro tono (por ejemplo, `#98FB9880` para un verde pálido) y ajusta el ancho a 800 píxeles.

10. ¡Tu turno!

Aplica los cambios que te mostré en tu archivo `gui.rpy` y prueba tu proyecto. ¿Lograste cambiar el color, la fuente y el cuadro de diálogo? Usa los enlaces de códigos hexadecimales para elegir colores que te gusten y personaliza tu juego a tu estilo. Intenta los ejercicios y comparte tus resultados en los comentarios. En la próxima entrada, seguiremos explorando temas básicos para que termines tu primer proyecto completo. ¡Nos leemos el 14 de abril!