top of page
  • Foto del escritorReclunautas

#EsTendencia Crea un juego de ‘Elige tu propia aventura’ basado en HTML usando el editor Twine 2

En los años 70s existió una colección de libros llamados ‘Elige tu propia aventura’, que era una especie de ‘ficción interactiva’: libros en los que elegías el desenlace de la historia (“Si llamas a la puerta, pasa a la página 100, si sales corriendo, pasa a la página 105”) así determinabas la evolución de sus tramas.


Fueron tiempos de gloria comercial para estos libros, cuando empezaron a llegar los videojuegos su gloria empezó a decaer porque ofrecían una forma aún más interactiva e inmersiva de ficción. Sin embargo, existe un formato híbrido entre ambos: los videojuegos interactivos basados en (hiper)texto, que sustituyen el “pasa a la página X” por un clic de ratón.


Twine 2

Una de las buenas noticias es que si comparamos los videojuegos más ‘tradicionales’, el formato de (hiper) texto resulta mucho más fácil de programar si usamos las herramientas adecuadas. En esta ocasión echaremos un vistazo introductorio a la más popular de ellas, Twine 2, un editor ‘open source’ de ficción interactiva que genera juegos basados en HTML5, CSS y JavaScript y está disponible para Windows, Linux y Mac OS X… y también está disponible en una versión 100% online, así que si quieres probar esta herramienta no tendrás inconveniente para hacerlo.


Nosotros, lo instalaremos desde la web (el proceso de instalación es muy sencillo); una vez que lo iniciemos, estaremos ante una ventana como esta:

Solo bastara un clic en el botón verde nombrado ‘Historia’ para iniciar nuestra historia interactiva. Nos mostrará un cuadro de diálogo para que escribamos cómo llamaremos esta historia: después de escribir el nombre, sólo debemos clic en ‘Añadir’.

Eso nos coloca en una pantalla en la que cada recuadro es una escena que —una vez vayamos añadiendo más— aparece enlazado con otros según se estructuren las posibles ‘rutas de lectura’.

Si damos doble clic sobre la primera escena, podremos editar su título y contenido. Escribiremos nuestra primera escena (puede ser tan breve o extensa como lo quieras), incluiremos, en algún lugar del texto ‘hiperenlaces’ a una o varias nuevas escenas, que se crearán automáticamente una vez cerremos la ventana de edición:

Para poder crear los hiperenlaces, solo es necesario utilizar el editor de la parte superior de la ventana, seleccionando el texto y pulsando en el botón ‘Link’. Si especificamos un ‘Passage name’, podremos establecer un nombre concreto para la nueva escena, lo cual será de gran utilidad una vez empecemos a acumular escenas en el editor.

Y, por lógica, dando clic en el botón ‘Reproducir’ de la ventana principal, podremos ir visualizando en nuestro navegador cómo nos está quedando el juego:

Las opciones que nos brinda el editor

Echando un vistazo al editor podremos ver las opciones que existen para dar formato al texto (negritas, cursivas, títulos, listas, color de texto y fondo)… pero también podremos recurrir a formas más complejas de personalizar lo que se muestra al usuario editando el CSS y el JavaScript del juego. También podemos insertar imágenes, vídeo y audio insertando etiquetas HTML.


Descarga Twine




94 visualizaciones0 comentarios
bottom of page