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

Mostrar y ocultar objetos

Ahora que tenemos las imágenes vamos a crear una escena como la siguiente y haremos que las gemas no estén visibles al principio pero el jugador pueda hacerlas aparecer:

Lo primero es añadir los elementos a la escena. Tres para los altares que pulsaremos para colocar las gemas, y otros tres para las gemas:

<cascada-deva>
	<button data-escena="escena-paisaje"></button>
	
	<button data-diálogo="altar_cuerpo"></button>
	<button data-diálogo="altar_mente"></button>
	<button data-diálogo="altar_espíritu"></button>
	
	<gema-cuerpo class="oculta"></gema-cuerpo>
	<gema-mente class="oculta"></gema-mente>
	<gema-espíritu class="oculta"></gema-espíritu>
	
	<script src="escenas/cascada.js"></script>
	<link rel="stylesheet"href="escenas/cascada.css">
</cascada-deva>

Ahora solo tenemos que colocar los objetos con css, como hicimos antes. Por ejemplo, estas serían las propiedades de la gema del cuerpo:

gema-cuerpo{
	background:url('gema_cuerpo.png');
	background-size:100%;
	position:absolute;
	
	width:29em;
	height:21em;
	left:8em;
	bottom:75em;
}

¿Pero como hacemos que aparezcan y desaparezcan? Pues para eso definiremos una nueva clase llamado oculta, que ponga la opacidad (lo contrario a la transparencia) a cero:

.oculta{
	opacity:0;
}

Los elementos suelen ser opacos originalmente, es decir, la luz no los atraviesa y por tanto son visibles. Su opacidad original es 1, el máximo. Pero ahora podemos añadir esta clase a cualquier elemento html y se volverá completamente transparente. Aunque también podríamos hacerlos medio transparente si ponemos la opacidad a 0.5, por ejemplo.

Si te fijas, en el html de antes las gemas ya tenían esa clase: class="oculta". Las clases sirven para reutilizar un mismo estilo a varios elementos distintos. Dentro del atributo class podemos añadir varias clases separadas por espacios en blanco.

Ahora podemos añadir la clase o quitar la clase oculta en los diálogos para mostrarla u ocultarla:

let tienes_gema_cuerpo = true
let gemas_colocadas = 0

diálogos.añade("altar_cuerpo", 
	{personaje:'Narrador'},
	"En este altar pone:",
	'"El cuerpo es la parte del ser que puede interactuar con la naturaleza."',
	{opciones:[
		{texto:'Colocar gema roja',sigue:'coloca_gema_cuerpo', si: ()=> tienes_gema_cuerpo},
		{texto:'Colocar gema verde',sigue:'gema_incorrecta', si: ()=> tienes_gema_mente},
		{texto:'Colocar gema azul',sigue:'gema_incorrecta', si: ()=> tienes_gema_espíritu},
		{texto:'Dejar el altar'},
	]},
)

diálogos.añade("coloca_gema_cuerpo", 
	()=> tienes_gema_cuerpo = false,
	()=> gemas_colocadas++,
	()=> selecciona('gema-cuerpo').clase.oculta = false,
	"La gema comienza a brillar, flotando sobre el altar.",
)

Este código tiene dos diálogos:

1. El primero comienza al pulsar el altar, nos cuenta algo sobre él, y nos permite dejar una gema en él.
2. El segundo sucede si dejamos la gema correcta, y aquí guardamos la información, quitamos la clase oculta y describimos lo que sucede.

Lo que más nos importa es entender el código selecciona('gema-cuerpo').clase.oculta = false. Este código sirve para seleccionar un elemento, en este caso gema-cuerpo y ponerle o quitarle una clase: Si el valor que le damos es true se la ponemos, y si es false se la quitamos.

Así podemos hacer aparecer y desaparecer objetos de la escena, usando las clases para cambiar su estilo. Pero también podemos cambiar otros estilos para causar cambios más interesantes.

Efectos y transiciones

Con css y clases podemos cambiar todo tipo de estilos. Hacer que un texto cambie de color, o que un elemento se mueva, entre muchas otras cosas. Por ejemplo aquí estamos aplicando distintos efectos sobre el cuélebre (dragón asturiano) que cambia su color y hace aparecer un halo rojo:

Este efecto se consigue con el siguiente código. Aplicamos un estilo filtro al personaje cuélebre, pero solo cuando tiene puesta la clase cuélebre_enfadado:

[data-personaje="cuélebre"] personaje-actual.cuélebre_enfadado{
	filter: hue-rotate(-90deg) brightness(80%) drop-shadow(0 0 10em red);
}

Este filtro está formado por varios efectos, separados por espacios:

• hue-rotate: Cambia el color girando en el espectro de colores.
• brightness: Cambia el brillo, oscureciendo o aclarando al subir o bajar del 100%.
• drop-shadow: Genera una sombra debajo de la imagen, que en este caso se usa como halo rojo.

Al añadir o quitar una clase conseguimos que el estilo se modifique de inmediato, pero también podemos hacer que vaya de uno a otro más despacio con la propiedad transition:

[data-personaje="cuélebre"] personaje-actual{
	transition: filter 1s;
}

Como ves a esta propiedad le pasamos la propiedad que queremos que cambie despacio (filter en este caso), y luego el número de segundos que dura el cambio. Así que como ves, con css podemos conseguir dar mucha vida a nuestro juego usando transiciones y cambios de estilo.