En esta guía vamos a usar el formato **Harlowe**, que es el predeterminado de Twine 2. Sin embargo, el formato *SugarCube* está basado en Twine 1, por lo que tenéis más recursos disponibles derivados de la primera versión del programa. Podéis usar el formato que prefiráis.
Una de las guías más completa de Harlowe la podéis encontrar en: http://twine2.neocities.org/
Aquí tenéis toda una serie de videotutoriales dedicados a esta herramienta, en Harlowe y otros formatos: https://www.youtube.com/playlist?list=PLlXuD3kyVEr5tlic4SRe6ZG-R9OyS1T4d
Se puede cambiar el formato desde el menú principal o en la pantalla de edición de pasajes, pinchando en la flecha de la esquina inferior izquierda, junto al nombre de nuestra historia.
[[Continuar]]
Para ver diferentes ejemplos destacados del uso de Twine, puedes visitar esta dirección: https://gamerant.com/top-twine-games-interactive-fiction/
Hay muchísimos más ejemplos, busca por Internet todos los que quieras para buscar inspiración, si la necesitas.
Si queremos añadir imágenes, tendremos que enlazarlas mediante un código HTML.
Primero, tenemos que tener el link de nuestra imagen así:
img src="aquí va la url de la imagen"
**IMPORTANTE**: Debemos cerrar esta línea con los símbolos de mayor y menor que (<>). Sin las comillas.
Quedaría así:
<img src=http://i0.kym-cdn.com/photos/images/original/000/912/164/edb.jpg>
Este es el tamaño original de la imagen, pero podemos modificarlo cambiando los parámetros de ancho y alto. Por ejemplo, así (cerrando entre <>):
img src="url de la imagen" width="500" height="400"
Quedaría de esta forma:
<img src=http://i0.kym-cdn.com/photos/images/original/000/912/164/edb.jpg width=500 height=400>
[[Añadir vídeos es similar:->AñadirVideo]]
Para vídeos, reemplazamos el comando *img* por *video*. Para [[sonidos->AñadirSonidos]] es muy parecido también.
No obstante, esto sirve para vídeos alojados en una url independiente. Para vídeos de YouTube, Vine y similares, es incluso más sencillo.
Tan solo hay que copiar el código que nos aparece al seleccionar la opción de insertar el vídeo. Copiaremos el código que nos aparezca y lo pegaremos aquí. Por ejemplo, en Vine:
<iframe src="https://vine.co/v/eIhX35w1pYv/embed/simple?audio=1" width="600" height="600" frameborder="0"></iframe>
O en YouTube:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ClwqAl3DVms" frameborder="0" allowfullscreen></iframe>
Ambos vídeos podemos modificarlos cambiando los valores, como el ancho y el alto.
<iframe src="https://vine.co/v/eIhX35w1pYv/embed/simple?audio=1" width="250" height="250" frameborder="10"></iframe>
O:
<iframe width="250" height="250" src="https://www.youtube.com/embed/ClwqAl3DVms" frameborder="5" allowfullscreen></iframe>
Así podemos añadir sonidos:
audio src="la url del sonido" autoplay
La línea debe ir entre <>
El comando *autoplay* hace que el sonido cargue en cuanto se abre el pasaje en el que se encuentra. Por ejemplo, aquí llevarás un rato escuchando la música de *Regreso al Futuro*.
.
.
.
.
.
.
.
.
.
Y como es genial, habrás esperado a que termine.
¿No?
.
.
.
Vale, podemos continuar.
Nota: para usar el sonido de manera más compleja, necesitarás usar el formato *SugarCube*. Si lo necesitas, puedes encontrar diferentes macros y guías en la web oficial de Twine.
<audio src=http://www.instantsfun.es/audio/back_to_the_future.ogg autoplay>
En Twine, podemos crear eventos aleatorios, variables y estadísticas como si de un RPG se tratase.
Crear un RPG al uso requerirá de una capacidad de código más avanzada, pero aquí observaremos algunas formas más asequibles de añadir este tipo de características. Para un acercamiento al sistema de variables similar al de un RPG, [[ven por aquí->RPG0]].
Por ejemplo, para hacer eventos aleatorios binarios podemos usar la función **'either'**, indicando entre que opciones elegirá el programa. Entre paréntesis, escribimos *either:"res1","res2"*. Es decir, elegirá **o uno u otro**.
Un ejemplo con esta función:
*"Como de costumbre, lanzas una moneda al aire. Como de costumbre, el resultado no te importa. Tu compañero, por el contrario, sí que se fija. El resultado es (either:"cara","cruz")."*
Podemos incluir más resultados, simplemente los separamos por comas. Ejemplo: "Sales a la calle. El día es (either:"soleado","lluvioso","nublado","una mierda")"
Para editar el estilo de nuestra historia, Twine utiliza CSS.
CSS es un lenguaje de diseño gráfico muy utilizado junto a HTML. Para realizar cambios complejos en el estilo, necesitaremos conocer más en profundidad este lenguaje. No obstante, hay diferentes pautas para realizar cambios más sencillos.
Necesitaremos ir a la flecha en la esquina inferior izquierda, junto al nombre de nuestra historia. Ahí seleccionaremos *Editar hoja de estilo de la historia* e introduciremos los cambios de estilo que queramos.
Podemos cambiar de manera muy sencilla tanto la fuente y el tamaño de letra como el color del fondo. (Ver imágenes adjuntas)
IMPORTANTE: La manera más fácil de cargar una fuente tipográfica es que el ordenador en el que se ejecuta el archivo la tenga. Si no, ésta no aparecerá. Se pueden ver diferentes tipos de fuente y el porcentaje de ordenadores que las tienen instaladas en páginas como http://www.cssfontstack.com
Para cambiar el color, utilizaremos el código hexadecimal que lo representa. Se pueden usar multitud de páginas para buscar estos códigos, como por ejemplo: https://color.adobe.com/
Más formas de cambiar el estilo mediante CSS: https://twinery.org/wiki/twine2:change_the_font_colors_or_appearance
Para que el usuario introduzca texto podemos utilizar la función *prompt*.
Para ello, podemos combinar esta función junto a una variable. Por ejemplo, para preguntar el nombre del jugador. Las variables en Twine se denominan mediante el símbolo del dólar ($) seguido del nombre de la variable.
En este caso, nuestra variable sería el nombre ($+nombre). Así, podemos hacer que lo que escriba el jugador tome el lugar de dicha variable.
Ejemplo:
(put: (prompt: "¿Cómo te llamas?") into $nombre)
Tu nombre es $nombre.
Otro ejemplo:
(put: (prompt: "¿Cómo eres?") into $eres)
Estas variables se guardan durante la historia. Pincha en el siguiente pasaje para [[comprobarlo->ComprobPrompt]]
Te llamas $nombre y eres $eres
En Harlowe, poniendo entre asteriscos una palabra, se pone en *cursiva*. Con doble asterisco, en **negrita**. Para subrayar un texto, pondremos nuestro texto entre <'u'>____<'/u'> <u>Quedaría así</u> (En el código no se ponen las comillas)
Así se puede crear un [[pasaje->CambiarEstilo]]. Introduciendo una palabra entre dos corchetes a cada lado [ [ *palabra* ] ] En este pasaje veremos cómo cambiar el estilo de nuestra historia de Twine.
Se puede ocultar el nombre del pasaje utilizando flechas ->
Por ejemplo, aquí pondré la frase [[Cómo añadir Imágenes->AñadirImágenes]] pero llevará a otro diferente que he titulado *AñadirImágenes*
Pinchando aquí se puede ir al [[segundo camino->AleatorioStats]], en el que veremos cómo añadir diferentes eventos aleatorios.
Si queremos hacer que el usuario introduzca texto, podemos ir al [[siguiente pasaje->IntroducirTexto]]
Para sustituir texto cuando el jugador interactúe con él, ve por [[aquí->Click]].
La función **click** hace que el texto en el que el usuario pincha añada algo o se convierta en otro diferente. Esto puede tener muchos usos, como mostrar el resultado de una acción inmediatamente o ver la evolución de un evento, objeto o personaje tras interactúar varias veces con él.
Ejemplo:
"Ante Link se encontraba el cofre del tesoro. Trató de abrirlo con todas sus fuerzas. (click: "Trató de abrirlo con todas sus fuerzas.")[Pero no se abría ni a patadas]"
Si lo que queremos es reemplazar una palabra o frase, utilizaremos **click-replace** en vez de **click**.
Por ejemplo:
"Hay una pequeña criatura en el suelo de la cocina. No parece peligrosa, así que intentas agarrarla(click-replace: "así que intentas agarrarla")[pero lo es, y ahora se ha comido tu brazo]".
.
"Quedan seis bombones. Decides comértelos todos(click-replace: "Quedan seis bombones. Decides comértelos todos")[No quedan bombones]".
...
Relacionada con la función **click** está la función **mouseover**, que se utiliza exactamente igual que la anterior pero hace que el texto cambie simplemente cuando el jugador pasa el ratón por encima, en lugar de haciendo click.
Ejemplo:
"Una fina capa de polvo cubría la portada.(mouseover: "portada")[ Al limpiarla, consigues ver el título del libro: *Yo maté a Chanquete*]"
Ejemplo junto a la función **replace**:
"La moneda está sucia, así que la limpias (mouseover-replace: "sucia, así que la limpias")[limpia]".
Desde que te escapaste de casa, llevas $días días viajando. De aventura. Tienes $guiles guiles y $salud puntos de salud.
¿Qué haces?
[[Descansar]]
[[Comprar]]
[[¡A la aventura!]]
...
Tras esto podremos seguir personalizando nuestro RPG, añadiendo más elementos. Para observar un ejemplo de cómo crear un sencillo juego de rol mediante Twine, visita: http://lambdamaphone.blogspot.com.es/2015/02/using-twine-for-games-research-part-ii.html
[[RPG1]]
[[RPG1]]
[[RPG1]]
Aquí podemos configurar el estado inicial de las variables que más tarde ejecutaremos.
(set: $días to 0)
(set: $guiles to 10)
(set: $salud to 10)
[[Continuar->RPG1]]