[TUTORIAL] Crear un poema interactivo con Twine

¿Quieres lanzarte con la poesía interactiva pero no tienes claro por dónde meterle mano? ¿Eres usuario de Twine pero te gustaría ver un ejemplo sobre el que trabajar? Este tutorial está pensado para los creadores que quieran participar en la Rayuela Poética con un poema interactivo y ya conozcan este motor de ficción interactiva. Si no tienes práctica con Twine, te recomiendo que veas antes alguno de los recursos que están listados al final del artículo.

En este tutorial vamos a ver cómo desenrollar una estrofa, cómo sustituir un verso por otro y cómo copiar fácilmente el poema resultante. Usaremos CSS, Javascript y Twine Harlowe (que no deja de ser html). Si no sabes nada de esto, no te preocupes, porque es muy sencillo. Al final, podrás hacer un poema como Cantos Escarlata, o utilizar las ideas para crear tus propias mecánicas ;)

¡Aviso para navegantes! El código de esta página son capturas de pantalla. No copy-paste. Sorry ^^

Piensa un tema y un formato

Vamos allá. Vamos a usar de ejemplo de trabajo Cantos Escarlata, el poema interactivo ganador de la Rayuela de Arena 2020. Meri y yo creamos este poema como parte del universo de Oniria, y se basa en que dos voces complementarias relatan la misma historia. Al hacer click en cada verso se desplegará una estrofa, o el verso cambiará a la voz complementaria. El poema se puede desenrollar por completo o no, dejando al "interlector" la decisión de la forma final del mismo. Eso sí, los versos desplegados no pueden volver a contraerse. "Lo que has visto no lo puedes olvidar" es una de las premisas de esta obra.

Cantos Escarlata está creado sobre un único pasaje de Twine. En este sentido es tremendamente sencillo. Cuando crees tu poema, puedes usar cambios de pasaje, pero ten en cuenta que desaparecerá el texto del nodo anterior y puede que no sea el resultado que quieres.

Usamos dos mecánicas simples de twine para nuestro poema: desplegar y sustituir.

Desenrollado de la estrofa

Lo he llamado así porque me recuerda mucho a la técnica de programación del "desenrollado de bucles" para analizar eficiencia. Tenemos un verso y al pinchar en él, se despliega el resto de la estrofa, empujando hacia abajo al resto del texto.

 

Para hacerlo, necesitamos la herramienta link de twine y una clase CSS. Al hacer click en una línea con link, se muestra el fragmento entre corchetes. Pero ojo, dentro de los corchetes, vamos a usar el tag <div class="desplegar"></div>. Todo el contenido de la estrofa debe estar entre la apertura y el cierre de DIV:

En la parte del CSS, tenemos que definir la regla .desplegar y utilizar una sencilla animación de CSS3. Si nunca has utilizado animaciones de CSS3, no te preocupes, en realidad son muy sencillas. En la regla ponemos el valor reposo (en este caso, max-height:0 para que no se vea porque tiene altura 0). Y después se colocan las propiedades de la animación: nombre, duración, etc. El ease es el suavizado matemático y no es muy relevante por ahora. Tampoco entraremos en los métodos de "rellenado", pero te dejo los enlaces por si quieres investigar. A continuación usamos la regla @keyframes para definir la animación en sí. En la subregla from definimos el estado inicial (de cuando la animación se dispara), y en to, el valor final. En este caso usamos un número muy grande al que sabemos que no va a llegar la altura de la "caja" del DIV. Con esto, ya deberías tener funcionando el desenrollado:

 

Sustitución del verso

En Cantos Escarlata, además de la sustitución del texto del verso, también cambiamos la tipografía. Es algo parecido a lo que hicimos en ¿Sueñan los fantasmas con ovejas zombis? donde el cambio de Oniria a Vigilia afectaba a los colores del fondo y de la fuente. En la siguiente imagen puedes ver el cambio de fuente. Es muy sutil y algunos "lectoractivos" no se dieron cuenta, pero no deja de ser una capa de sutileza que viene bien a todo poema:

Para hacer esta técnica, de nuevo recurrimos al tandem Harlowe-CSS. Por la parte de Harlowe, vamos a usar "cycling-link", que nos permite intercambiar dos enlaces. Y el truco de la fuente se hace colocando una etiqueta <span> con una clase diferente a cada una de las dos opciones del cycling-link. en resumen: tenemos dos frases que se intercambian, cada vez que se produce el cambio, se aplica la relga CSS apropiada para esa frase. Si le pillas el truco a esta técnica, puedes hacer muchísimos efectos metiendo CSS en tus obras.

Nuestras clases CSS son "asercion" y "respuesta" ya que el meta-juego de versos es esa especie de diálogo que comentaba al principio. El código concreto de Cantos Escarlata es el siguiente:

Si no has importado fuentes en CSS en Twine, la mejor forma que he encontrado es añadir esta línea al principio:

@import url('https://fonts.googleapis.com/css?family=Julius+Sans+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bellota&display=swap');

Todas las fuentes que uso las busco en Google Fonts, y te recomiendo que hagas lo mismo, ya que es el método más sencillo para Twine.

Mostrar poema para compartir

Normalmente vas a querer desactivar la selección de texto en un poema interactivo, ya que no quieres romper la estética con un missclick, pero eso tiene el inconveniente de que el "juguector" (nada... no hay forma) no pueda copiar y compartir su poema. Así que vamos a tirar de javascript para este caso. Vamos a paso a paso en este apartado:

1. Encierra todo tu pasaje de twine dentro del tag
   <span id='poema'></span>
2. Coloca un botón al final del todo, en la última línea:
   <span class="copiar" onclick="Copy.addItem()">copiar poema</span>
3. Vete al editor de javascript de Twine y añade lo siguiente:

 Con eso deberías tener un botón que muestre todo el texto del poema en una ventana emergente, listo para copiar y pegar donde quieras.

¡A escribir!

Éste es el kit básico de creación de poesía interactiva con Twine, pero hay mil ideas con las que se puede experimentar. Estos trucos son solo un ejemplo. Si usas alguno de ellos, no olvides pasar por aquí y dejar tu aportación en los comentarios para que podamos añadir más trucos de poesía interactiva al post.

A continuación te dejo algunos recursos que te pueden ayudar:

• Introducción a Twine por David T. Marchand: En este tutorial gratuito puedes encotrar lo básico para crear una ficción interactiva de tipo "elige tu propia aventura" en Twine. Te servirá para tener las bases y hacer una experiencia sencilla.
  
• Curso completo de diseño de experiencias de texto interactivas: En este curso online de Ágora Abierta se aborda de forma mucho más completa la ficción interactiva con Twine. Si quieres profundizar y aprender más sobre tramas, estructuras y diseño de proyectos, está hecho para ti. Lo hemos creado pensando en creadores que quieren empaparse y comenzar a crear lo antes posible.
  
• Jam de poesía interactiva Rayuela Poética 2020: En caso de que no hayas llegado aquí desde la página de la jam, ¡No te la pierdas!
  
• Discord de Textualiza: Aquí puedes entrar a preguntar dudas o cualquier tema. Siempre habrá alguien dispuesto a ayudarte.