miércoles, octubre 9, 2024
spot_img
InicioProgramacionCrea un juego de 'Elige tu propia aventura' basado en HTML usando...

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

¿Te gustaría aprender Programación, Desarrollo Web, Análisis de Datos, Python y mucho más? Aquí hay cursos desde cero sobre estos temas, que incluyen certificados, soporte y una gran comunidad. 😎 👉 Ver lista de cursos.

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:

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web


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’.

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

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’.

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

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:

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

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:

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

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.

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

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

También 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 provocar que una elección 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’).

Existen muchos tutoriales disponibles en Internet, así que no te preocupes y 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:

Crea un juego de 'Elige tu propia aventura' basado en HTML usando el editor Twine 2- Azul Web

Descarga Twine

¿Sabías que este sitio web no incluye anuncios gracias a Azul School? Es nuestra comunidad de aprendizaje, donde puedes acceder a una gran variedad de cursos de tecnología. Haz clic aquí para conocerla.


Ernesto Mota
Ernesto Mota
Nací en el d.f., sigo siendo defeño, hoy radico en la hermosa ciudad de Cuernavaca, Morelos, soy Ing. en Sistemas computacionales, con un posgrado en Tecnologías de información, Doctorando en ambientes virtuales de aprendizaje y realidad aumentada, Tecnólogo es mi categoría laboral, y mi linea de investigación es la realidad aumentada aplicada a nuevos entornos de aprendizaje.
RELATED ARTICLES

Most Popular

Recent Comments

×