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

Zonas interactivas

Vamos a añadir nuevas escenas y botones para pasar de unas a otras. La escena de paisaje será un mapa, en el que pulsando encima de cada botón podremos pasar al resto de escenas.

Por cierto, fíjate que "arbol-mágico" aparece sin tilde en la primera "a". Esto es por normas de HTML, que no permite meter caracteres de otros idiomas en la primera letra (fue diseñado en inglés).

<escena-paisaje>
	<button data-diálogo="cueva"></button>
	<button data-diálogo="árbol"></button>
	<button data-diálogo="menhires"></button>
	<button data-diálogo="cascada"></button>
	
	<script src="escenas/paisaje.js"></script>
	<link rel="stylesheet" href="escenas/paisaje.css">
</escena-paisaje>

<cueva-cuelebre>
	<button data-escena="escena-paisaje"></button>
</cueva-cuelebre>

<arbol-mágico>
	<button data-escena="escena-paisaje"></button>
</arbol-mágico>

<menhires-inscritos>
	<button data-escena="escena-paisaje"></button>
</menhires-inscritos>

<cascada-deva>
	<button data-escena="escena-paisaje"></button>
</cascada-deva>

Ahora que tenemos los botones, vamos a ocultarlos. Los haremos invisibles de manera que parezca que pulsamos sobre zonas del propio paisaje para ir a los distintos lugares:

Para darles este aspecto a los botones tenemos que modificar el archivo paisaje.css. Primero definimos el estilo general de los botones, y luego escogemos su tamaño y posición:

button{
	border:none;
	background:none;
	padding:0;
	font-size:1em;
	position:absolute;
	
	border: 2px solid red;
	
	&[data-diálogo="cueva"]{
		width:20em;
		height:20em;
		right:20em;
		top:120em;
	}
	
	&[data-diálogo="árbol"]{
		width:20em;
		height:20em;
		left:20em;
		top:120em;
	}
	
	&[data-diálogo="menhires"]{
		width:20em;
		height:20em;
		left:20em;
		top:220em;
	}
	
	&[data-diálogo="cascada"]{
		width:20em;
		height:20em;
		right:20em;
		top:220em;
	}
}

Vamos a mirar con detalle los estilos que hemos puesto (o quitado) a los botones:

• Lo primero que hacemos es quitar el borde (border) y fondo (background) de los botones, poniéndolos a none
• Eliminamos, poniendo a cero, el margen que hay entre el borde y contenido (padding)
• Cambiamos el tamaño de los botones a 1em. La unidad em indica el tamaño relativo al elemento en el que está.
• Cambiamos la posición a absolute, lo que nos permite colocar los botones donde quedamos.
• Además, para poder ver donde está cada botón, le ponemos un borde rojo sólido. Esto se puede borrar una vez esté bien colocado.

Después de esto podemos ver que estamos indicando el ancho (width) , alto (height) y posición (top, left, right, bottom) de cada botón para colocarlos donde queramos. Para escoger los botones usamos un selector basado en su atributo data-diálogo: [data-diálogo="cascada"]

Como ya vimos, el atributo data-diálogo indica el diálogo que se inciará cuando pulsemos en ese área. Estos diálogos se definen como otras veces:

diálogos.añade("intro", 
	Juglar.cambia_escena("escena-paisaje"),
)

diálogos.añade("cueva", 
	Juglar.cambia_escena("cueva-cuelebre"),
)

diálogos.añade("árbol", 
	Juglar.cambia_escena("arbol-mágico"),
)

diálogos.añade("menhires", 
	Juglar.cambia_escena("menhires-inscritos"),
)

diálogos.añade("cascada", 
	Juglar.cambia_escena("cascada-deva"),
)

Botones con imágenes

Para los botones de salida de cada escena vamos a hacer algo distinto. Para empezar no abriremos un diálogo, sino que indicaremos la escena a la que volvemos directamente: data-escena="escena-paisaje". Pero además vamos a usar una imagen propia para el botón que será igual en todas las escenas:

Para mostrar esta imagen, de nuevo tenemos que ir a paisaje.css:

button[data-escena="escena-paisaje"]{
	background:url('volver.png');
	border:none;
	background-size:100%;
	padding:0;
	font-size:1em;
	position:absolute;
	
	width:24em;
	height:14em;
	left:5em;
	top:50em;
}

Como puedes ver lo que hacemos es parecido a lo que hicimos con los otros botones. Solo que además en este caso añadimos un fondo de imagen (background-image).