CategoríaTwine

Trucos Twine – (live:) y (event:)

Éste es el cuarto post de una serie de minitutoriales sobre Twine enmarcados en #LEARNUARY, un esfuerzo colectivo por aprender nuevas habilidades durante el primer mes del año.

Ya comenté en un post anterior que Twine sólo ejecuta el código de un pasaje cuando se entra al pasaje, por lo que si alguna acción del jugador cambia alguna variable dentro de ese pasaje los condicionales que haya en él no se recalcularán para adaptarse al cambio.

Sin embargo, en Harlowe tenemos el comando (live:) que hace que el siguiente fragmento de código que pongamos junto a él se reejecute cada cierto tiempo. Ésto quiere decir que si ponemos (if:), (unless:) o (either:) dentro de hook que esté vinculado a un (live:), éste condicional se reevaluará cada intervalo.

Por ejemplo, nos puede servir para crear una cuenta atrás y que, cuando ésta termine, el jugador sea enviado a un pasaje diferente automáticamente.

Los usos de éste comando son muchos y muy variados. Podemos mostrar un enlace sólo si el jugador está en un pasaje el tiempo suficiente, cómo en el siguiente ejemplo (ésto viene muy bien si queremos recompensar su paciencia o queremos reflejar el tiempo de espera de un personaje)

Sin embargo, tener que crear nuestros propios temporizadores para éstas acciones es bastante pesado, por lo que en Harlowe se ha buscado una manera de automatizarlo y simplificarlo: el comando (event:).

(event:) reune las propiedades de (live:) y un (if:) además de (stop:) que es el comando que se usa para parar toda la secuencia. El ejemplo anterior hace lo mismo que el que habíamos visto pero con mucho menos código. Se activa cuando se carga el pasaje y va contando el tiempo transcurrido, al llegar a 5 segundos ejecuta el hook oculto.

Trucos Twine – Cycling-link y bind

Éste es el segundo post de una serie de minitutoriales sobre Twine enmarcados en #LEARNUARY, un esfuerzo colectivo por aprender nuevas habilidades durante el primer mes del año.

Ésta es una funcionalidad de Twine muy simple, pero muy efectiva para marcar el tono de la historia que estamos narrando y darle al jugador agencia dentro de la misma.

(cycling-link:) nos permite crear un enlace que va cambiando entre distintas opciones cada vez que el jugador hace click sobre él, pero sin abandonar la página. Bien usado nos permite, entre otros muchos usos, darle al jugador la posibilidad de construir una oración a su antojo, o generar la sensación de que el personaje está dudando entre las opciones disponibles.

Combinándolo con el comando bind, podemos almacenar la elección del jugador en una variable que podamos usar más adelante como queramos. La sintáxis quedaría como sigue:

La elección del jugador se almacena de manera dinámica en la variable conforme el jugador pulsa sobre el cycling-link, pero recordemos que Twine sólo ejecuta la lógica de un pasaje al cargarlo. Lo que significa que si creamos un fragmento como el que sigue:

Al pulsar sobre «Ésta es la opción que he elegido», se mostrará en pantalla la opción que estuviera seleccionada (la que fuese visible en el pasaje) en ese momento, pero si tras eso cambiamos a otra opción el texto no variará dado que Twine ya ha ejecutado el (print:) correspondiente.

Uno de los usos más frecuentes del cycling-link es la de almacenar detalles sobre personajes o ubicaciones que luego puedan ser mostrados en descripciones en otros puntos de la historia. Aquí dejo un sencillo ejemplo:


Trucos Twine – Fuentes personalizadas

Éste es el primer post de una serie de minitutoriales sobre Twine enmarcados en #LEARNUARY, un esfuerzo colectivo por aprender nuevas habilidades durante el primer mes del año.

Vamos a comenzar nuestra serie de tutoriales sobre Twine con algo sencillo, pero que ayuda mucho a personalizar las historias que escribamos: importar y utilizar fuentes personalizadas.

Además de la fuente estándar de Twine, podemos utilizar fuentes que sean comunes a muchos sistemas operativos y dispositivos simplemente accediendo al CSS de la historia

Fuentes Personalizadas CSS

y añadiendo la línea:

Fuentes Personalizadas estándar

Pero, ¿Qué hacemos si la fuente que queremos usar no es de las comunes, o simplemente, queremos asegurarnos de que el sistema no nos la cambia?

Hay dos maneras de hacer ésto en Harlowe: mediante un enlace a un sitio web externo o incorporando el archivo con la fuente junto con el HTML y luego «llamándola» desde el código.

Para enlazar a un sitio externo se utiliza el comando @import url, sólo tenemos que buscar la dirección en la que está almacenada la fuente. Yo aconsejo usar Google Fonts, que además de tener una enorme variedad de tipos de letra, carga muy rápido las fuentes personalizadas. Pongamos que quiero utilizar la fuente «Montserrat» (que es la que utilicé en «La Página en Blanco» con un resultado muy bueno en mi opinión) enlazándola desde Google Fonts. Así es como quedaría el código:

Fuentes Personalizadas Import

Cuidado con la sintaxis, si nos dejamos unas comillas o punto y coma el código no funcionará. El mismo Google Fonts nos dice como tenemos que usarla, sólo hay que hacer copy&paste de la sección de @import, ignorando las etiquetas de html.

Fuentes Personalizadas Google Fonts

Por último, en el caso de que queráis incluir una fuente sin tener que enlazar a algún sitio externo, sólo tenéis que descargarosla de la página que decidáis (yo por ejemplo recomendaría DaFont) y acompañarla junto con el html cuando exportéis el juego. Luego sólo hay que usar el comando @import url poniendo en la ruta de acceso el nombre del archivo de fuente que hemos incluido.