Así puedes crear un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2

Así puedes crear un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2
1 comentario Facebook Twitter Flipboard E-mail

Muchos de vosotros recordaréis y habréis leído/jugado la colección de libros 'Elige tu propia aventura', que en los años 70 inauguró lo que llamamos 'ficción interactiva': libros en los que eran tus propias decisiones como lector ("Si llamas a la puerta, pasa a la página 100, si sales corriendo, pasa a la página 105") las que determinaban la evolución de sus tramas.

Los tiempos de gloria comercial para estos libros pasaron hace ya años, en parte por la competencia de los videojuegos, que ofrecían una forma aún más interactiva e inmersiva de ficción interactiva. 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.

Te presento a Twine 2

La buena noticia es que, en comparación con los videojuegos más 'tradicionales', este formato resulta mucho más fácil de programar si usamos las herramientas adecuadas. En este caso, vamos a echar 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.

Nosotros, sin embargo, vamos a instalarlo desde dicha web (el proceso de instalación no tiene ningún misterio); una vez que lo iniciemos, estaremos ante una ventana como esta:

Twine2

Para iniciar nuestra primera historia interactiva, bastará con hacer clic en el botón verde nombrado 'Historia'. Aparecerá un cuadro de diálogo para que indiquemos cómo denominaremos este historia: tras escribir el nombre, sólo debemos clic en 'Añadir'.

Twine2 3

Eso nos situará ante 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 los posibles 'trayectos de lectura'.

Twine2 6

Si hacemos doble clic sobre la primera escena, podremos editar su título y contenido. Escribiremos nuestra primera escena (puede ser tan breve o extensa como estimes oportuno), e 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:

Editando

Para crear los hiperenlaces, basta con 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 supuesto, pulsando en el botón 'Reproducir' de la ventana principal, podremos ir visualizando en nuestro navegador cómo nos está quedando el juego:

Nobel
Visualización de la primera escena. No, el talento literario no viene incluido con el software, ¿cómo lo has notado?

Las opciones que nos brinda el editor

Un repaso al editor nos muestra 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. Ah: también es posible insertar imágenes, vídeo y audio insertando etiquetas HTML.

Con un poco de maña, puede quedarnos algo tan resultón como esto:

Gi2lj
Captura de pantalla de 'Shadows of Huntshire', disponible en Itch.io.

Además de eso, podemos ver que el editor también nos permite usar macros, variables, generador de números aleatorios, comandos condicionales, etc. Así, es posible recurrir a métodos más propios de los juegos de rol (como las tiradas de dados) o hacer que una elección pasada del jugador repercuta en otra escena recurriendo a variables (del tipo de 'Si tocó la Gema Maldita, restar 20 puntos de vida cuando entre en el Templo del Mal').

Sabiendo eso (tranquilo, hay múltiples tutoriales disponibles en Internet), sólo tenemos que seguir añadiendo escenas hasta completar la(s) trama(s) de nuestra aventura y conducir al usuario al 'FIN'. Una vez hecho podremos publicar nuestro juego como HTML... o utilizar alguna herramienta de terceros para generar un archivo ejecutable:

Publicar
Comentarios cerrados
Inicio