Ficción interactiva mediante hipertexto: una plantilla con HTML5, JavaScript y CSS
Estadísticas:
Rasgo 1:
Rasgo 2:
Rasgo 3:
Marcapáginas
Guardados automáticamente
Almacenados por el lector
Escena 1: Conceptos generales
1.a. Introducción
Bienvenido a este tutorial sobre la plantilla de ficción interactiva. Vamos a presentar una herramienta para escribir ficción interactiva a través de enlaces de hipertexto que tiene algunas características únicas y un diseño visual que favorece los juegos narrativos
La ficción interactiva mediante hipertexto es el equivalente digital de los libros Elige tu propia aventura que se popularizaron en la década de 1980. La historia se relata en fragmentos que invitan al lector a escoger de entre un conjunto de opciones para avanzar en el relato. Sin embargo, a diferencia de la versión en papel, este formato digital ofrece mucha más flexibilidad para narrar historias complejas y permite elementos de juego más interesantes.
- Continuar
1.b. Escenas y fragmentos
La estructura de nuestra plantilla para ficción interactiva se basa en escenas, que son bloques de texto conectados unos con otros. Al final de cada escena es necesario elegir un curso de acción que prosigue en otra escena.
Escenas
La lista siguiente es un ejemplo de opciones que marcan el final de una escena y la necesidad de elegir uno de esos enlaces para acceder a una nueva escena (También está desactivado):
- Esto es un texto para elegir una escena
- Esto es un texto para elegir otra escena distinta
Las listas de opciones siempre están encabezadas por la invitación "Tú eliges:"
Hay que notar que una escena tiene siempre una misma imagen arriba o a la izquierda (según el tipo de dispositivo utilizado).
Fragmentos
Las escenas suelen contener mucho más texto del que se puede mostrar en una pantalla de una sola vez. Aquí es donde intervienen los fragmentos.
Un fragmento es un bloque de texto que cabe por completo en una pantalla y acaba en un botón que invita a continuar. En cambio, una escena es uno o más fragmentos que terminan con una lista de opciones entre las que elegir para seguir a una u otra escena.
Esto es un ejemplo de botón que marca el final de un fragmento (este solo es un ejemplo, y está desactivado):
- Continuar
Por tanto, al final de un fragmento no hay una elección real, sino una invitación a seguir pulsando el botón "Continuar". Los fragmentos pueden ser útiles para reducir el volumen de texto en pantalla, troceando el contenido de las escenas.
Avancemos hasta el último fragmento de esta escena.
- Continuar
1.c. Acciones no obligatorias y elección de nueva escena
Además de las listas de opciones al final de cada escena para elegir una nueva, hay otro tipo de listas de opciones que no implican cambio de escena. Se trata de listas de opciones sobre las que el lector podrá o no elegir, y que pueden, o no, influir sobre los valores estadísticos del panel que hay justo debajo de cada imagen.
- Elige una acción si quieres:
Con respecto a estos diálogos hay que tener en cuenta:
- Cuando se elige una opción el diálogo desaparece, y
- El nombre de cada uno de estos rasgos puede configurarse (mediante JavaScript) y queda a juicio del autor su manipulación y su papel en la narración.
Los valores de los rasgos también pueden fluctuar según las exigencias de la narración, a gusto del autor, al elegir el curso de acción de una u otra escena (que son elecciones obligatorias).
Ahora finaliza la primera escena de este tutorial y el lector se enfrenta a la elección del tema en que quiere profundizar. En este caso, como la finalidad de este tutorial es puramente didáctica y no narrativa, se ofrecerá la posibilidad de retornar a escenas anteriores para que sea posible acceder a toda la información con una sola lectura. En un caso de uso real es razonable no dejar abierta esta posibilidad de retroceso en la narración.
- Quiero ir a la escena 2 para aprender algo sobre las barras estadísticas de los rasgos del personaje
- Prefiero ir a la escena 3 para saber qué ajustes se pueden establecer y cómo guardar lecturas en caso de que queden interrumpidas
Sobre los rasgos y sus barras de progreso
(Como estamos en una neuva escena ha cambiado la imagen que acompaña este texto)
Una de las posibilidades más interesantes que ofrece el formato digital de la narración interactiva es la de enriquecer el relato con ciertos rasgos del personaje protagonista o del mundo en el que se mueve. La creatividad del autor puede llevarle a mejorar o empeorar ciertos valores personales del protagonista o el mundo en que se desenvuelve según sus elecciones. Ya hemos visto que estas elecciones pueden ser:
- no obligatorias (pueden ser diálogos, o pequeñas acciones que no alteran la estructura de la narración)
- Elecciones obligatorias, que son necesarias para determinar por qué rama de la historia avanza el lector a través de una escena u otra.
Vamos a ver un nuevo ejemplo de elección no obligatoria, para que el lector compruebe cómo funciona y su efecto sobre las barras estadísticas que hay debajo de la imagen que acompaña cada escena:
- Elige una acción si quieres:
Para que el lector pueda comprobar por sí mismo el funcionamiento de este sistema, los siguientes enlaces permiten variar a voluntad sus valores, sin que desaparezcan los enlaces.
- Rasgo 1 (+20%)
- Rasgo 1 (-10%)
- Rasgo 2 (+5%)
- Rasgo 2 (-5%)
- Rasgo 3 (10%)
- Rasgo 3 (-10%)
Estimamos que en una narración interactiva que no tenga la finalidad de demostración de las posibilidades de esta plantilla es necesario que el lector no tenga posibilidad de rectificar a posteriori las elecciones ya hechas..
- Continuar
2.b. Ideas para las elecciones voluntarias
Las barras que hay justo debajo de la imagen de cada escena indican el progreso o retroceso del lector en distintos rasgos de personalidad o cualidades morales del protagonista en función de las elecciones que va haciendo en el transcurso de la historia.
Rasgos de personalidad
Algunos ejemplos de rasgos de personalidad:
- Calma
- Cortesía
- Empatía
- Compasión
- Resistencia
- Sinceridad
- Felicidad
- Confianza
- Egoísmo
- Cinismo
- Terquedad
Cualidades morales
También cualidades morales:
- Honestidad
- Compasión
- Valor
- Justicia
- Sacrificio
- Honor
- Humildad
Se recomienda que si el autor decide añadir rasgos morales utilice varias virtudes morales como "Honestidad" y "Compasión" antes que una puntuación moral general como "Bondad" o "Maldad". Es preferible proponer dilemas morales donde es difícil decidir lo que es bueno o malo, ya que si se debe elegir entre dos opciones, una evidentemente buena y otra obviamente mala, la mayor parte de la gente no tendrá que pensar mucho sobre la decisión.
Características del mundo de la narración
Finalmente, además de estas características del protagonista, también se pueden manipular algunas características del mundo en que se desarrolla la narración, de su sociedad o cultura.
Por ejemplo, ¿la ciudad está mejorando o empeorando? ¿Cuánta gente me teme o me admira? ¿Cuál es mi reputación?
También se puede medir el progreso hacia un gran acontecimiento: ¿cuánto tiempo está pasando? ¿cuán cerca se está de ganar la guerra? ¿cuántos recursos quedan?, etc.
Hemos terminado esta escena, y hay que tomar una nueva decisión:
- Puedes ir a la escena 3 para saber qué ajustes se pueden establecer y cómo guardar lecturas en caso de que queden interrumpidas
- O bien puedes volver al principio de esta guía
Guardar lecturas: los marcapáginas
Debajo de la imagen de cada escena y de las barras estadísticas hay un recuadro titulado "Marcapáginas"
Marcapáginas automáticos
Nuestra plantilla incluye un sistema automático para guardar la última lectura realizada en el dispositivo utilizado. Esto se hace aprovechando una característica de los navegadores modernos para almacenar información relativa a la página en el propio navegador del usuario.
De esta manera, si se recarga la página de forma que se vuelva al inicio de la narración, se puede recuperar el punto de lectura fácilmente tal como se describe a continuación.
Para acceder a las opciones de retomar la última lectura guardada automáticamente hay que pulsar el botón "Marcapáginas automáticos", situado a la izquierda del panel de marcapáginas. En la ventana modal que aparece hay tres opciones, que permiten:
- La primera opción permite sencillamente volver a la última lectura
- El segundo botón permite borrar los datos de lectura almacenados y continuar por el punto de la narración en que se está en ese momento
- El último botón permite borrar la última lectura guardada automáticamente y reiniciar todos los valores estadísticos, volviendo al principio de la narracón
- Continuar
Los puntos de lectura guardados voluntariamente por el lector
Finalmente, hay una opción para que el lector pueda guardar voluntariamente hasta tres puntos de lectura (columna de la izquierda, etiquetados como "Guardar en marcador 1", etc.) y retornar a dichos puntos de lectura pulsando los botones de la columna de la derecha (etiquetadas como "Seguir en marcador 1", etc.)
- O bien puedes volver al principio de esta guía