Así puedes crear un juego de ‘Elige tu propia aventura’ basado en HTML

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

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.

Gi2lj

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

FUENTE: https://www.genbeta.com/desarrollo/asi-puedes-crear-juego-elige-tu-propia-aventura-basado-html-usando-editor-twine-2

Otras entradas que pueden interesarte

Mauricio Valderrama Escrito por:

2 comentarios

  1. Gerard
    12 mayo, 2021
    Responder

    Genial, muy buen contenido.

  2. Andres
    12 mayo, 2021
    Responder

    fantástico método de creación.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *