Motor de juegos narrativos y educativos
para aprender programación web

Cambiar de estilo

En el archivo "estilo.css" tenemos definidos parte de los estilos de nuestro juego. Por ejemplo los colores de fondo y de texto, tamaños de texto y demás. Podemos modificar estos valores para personalizarlo un poco.

body {
  background: cadetblue;
}

button {
  font-size: 1.2rem;
  padding: 0.8rem;
  color: black;
  background: white;
}

Como puedes ver primero se define la etiqueta sobre la que se aplica, y entre llaves se ponen las propiedades que queremos cambiar. En este ejemplo estamos cambiando el cuerpo del juego (body) y el estilo de los botones (button).

Algunos estilos

• background: color del fondo.
• color: color del texto.
• font-size: tamaño del texto.
• padding: espacio entre el texto y la caja en la que está.
• border: color, tipo y tamaño del borde.
• border-radius: radio del borde en esquinas redondeadas.

Los colores se pueden escribir en inglés, o se pueden escoger de otras maneras, como indicando sus componentes rojo, verde y azul: rgb(255,0,0).

Imágenes y personajes

Con las hojas de estilo también podemos cambiar las imágenes de personajes y fondos del juego, o añadir otras nuevas

body{
  &[data-fondo="paisaje"]{
  background-image: url('img/paisaje.svg');
  }
}

diálogo-personajes{
	
  &[data-personaje="Deva"] personaje-actual{
    background-image: url('img/deva.svg');
  }
	
  &[data-personaje="Juglar"] personaje-actual{
    background-image: url('img/juglar.png');
    filter: drop-shadow(0 0 1rem white);
  }
}

El código puede parecer un poco complicado, pero lo único que tenemos que recordar es que hay que indicar dónde está la imagen que vamos a usar, y a que personaje o fondo se lo aplicamos. "data-fondo" es lo que indica el nombre del fondo, y "data-personaje" el nombre del personaje. Y en "background image" hay que meter la dirección (url) de la imagen que usaremos en cada caso.

Para entender un poco como lee esto el juego vamos a fijarnos en el primer bloque, en donde se escoge el fondo. La máquina interpretaría algo así como "En la etiqueta fondo, si tiene un atributo llamado 'data-fondo' cuyo valor es 'paisaje', entonces vamos a usar la imagen de fondo que está en la dirección 'img/paisaje.svg'".