Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Twine -Guía para trabajo colaborativo-

El nombre de este programa es una voz del inglés que traduce “entrelazarse”, “madeja”.

Utiliza un marcado tipo código básico. Se puede alcanzar mayor complejidad mediante el uso de variables, lógica condicional, imágenes, sonidos, uso de CSS y java Script.

Dirección web de Twine para escribir el relato en línea

https://twinery.org/

El programa también se puede descargar para sistema Mac y Windows.

Programación

Programación en formato Harlowe 3.1

Twine presenta varias opciones de formatos para escribir las historias.

Harlowe 3.1 es el más reciente que se ha incluido.

Manual sobre Harlowe disponible en:
https://twine2.neocities.org/

Editar texto

Sobre audio en Harlowe: HAL, una librería para instalar sobre Twine

HAL es una biblioteca de audio para Harlowe (v2.1.0 o superior) diseñada para brindar paridad de características de formato (o casi) con el subsistema de audio de SugarCube. Esta biblioteca fue diseñada desde cero específicamente para su uso con Harlowe, y está destinada a ser lo más fácil de usar posible para programadores novatos sin comprometer la funcionalidad.

https://twinelab.net/harlowe-audio/#/

Guías y videotutoriales

Videotutoriales

En español

Tutorial introducción a Twine. Por María Goicoechea de Jorge. UNED

https://www.youtube.com/watch?v=TK7Wn3qu_08

Serie de tutoriales de texto

https://www.fabricadejogos.net/tags/twine/

Guía rápida completa con códigos

https://ohiofi.com/twine/

Guía en línea

http://twinery.org/wiki/twine2:guide

Guía rápida

https://mata.juegos/twine/

Videotutoriales

En inglés.
“Click” and “if” statements
https://www.youtube.com/watch?v=xsnNWOZYHnk

Cómo crear un juego en Twine
https://www.youtube.com/watch?v=Fp9Sxiv-O-0

En portugues

https://www.youtube.com/watch?v=oJYhUhFRqV0

Video 4 Hacer historias más inmersivas. En portugués
https://www.youtube.com/watch?v=6KyCqnSzRPU

Lo básico

http://www.mastergollum.com/tanuki/blog/twine-tutorial

Tutorial básico con código para libros juego

http://www.mastergollum.com/tanuki/blog/twine-tutorial

Trucos para Twine

http://creativewhisper.es/twine/trucos-twine-live-y-event/

Guías

Insertar imágenes, gifs e imágenes de fondo
https://ohiofi.com/blog/twine-pictures-gifs-and-background-images/

Comandos

Corchetes dobles para abrir ramificaciones [[. ]]

Color de texto [Text color red]
Para cambiar el color del texto

(text-color:"red") [El texto que se quiera cambiar de color debe ir entre estos corchetes]

Para cambiar el color de los hipervínculos:
Abrir en entorno de edición a edit story Stylesheet
Escribir código:

tw-link { Color:yelow; }

Formatear texto
Los textos escritos entre asteriscos dobles se muestran en negrita, y con //barras dobles// en itálica

Un renglón que empieza con # numeral seguido de un espacio va a ser un título grande, y con dos numerales un título un poco más chico (y así hasta los 6).

Renglones de corrido que empiezan con asterisco más espacio se muestran como listas (útil para mostrar listas de opciones), y las que empiezan con un cero más un punto más un espacio se vuelven listas numeradas.

Un renglón compuesto sólo por tres o más guiones se vuelve una raya horizontal.

Al empezar a editar un pasaje, se puede activar esta información básica:

Control de fuentes tipográficas

<font color="acá ponen el color en inglés" size="%" face="tipo de letra"> </font>
El número para el tamaño de la fuente debe ser menor del que estamos acostumbrados en los procesadores de texto.

<center> </center> para centrar texto

<right> </right> para poner texto a la derecha

<left> </left> poner texto a la izquiera
<br> separar párrafos, este no tiene etiqueta de cierre

Insertar imágenes

<img src="the URL of your image" width="500" height="300" alt="Two foxes">

Ver http://4totecuenta.blogspot.com/2016/09/agregado-de-imagenes-y-video-en-twine.html

Insertar gifs

<img src=insertar URL del gif>

Insertar videos

Primero, ir al sitio de Youtube donde se encuentra alojado el video que se quiere agregar al relato.
Una vez allí, elegir la opción de “Compartir”, que se encuentra debajo del video. Luego, elegir la opción “Insertar vínculo”. Cuando esto, aparecerá un vínculo que se debe copiar.
Por último, ir al cuadro donde se está escribiendo el relato en el programa Twine y pegar el código copiado en la parte del relato donde se quiere que aparezca.

Insertar música

https://youtu.be/bm9Lvd1Qg4Y

Efectos de sonido

<audio src= "" autoplay>

La URL del archivo de audio se inserta en el espacio entre las comillas. Para verificar su funcionamiento se debe dar play y luego publicar el juego y correrlo en el navegador.

TAmbién se puede hacer loop, así:
<audio src= "" autoplay loop>

Etiqueta de audio

Permite controlar la reproducción del audio en el pasaje
<audio controls autoplay> <source src="URL"> </audio>

Cambiar imagen de fondo

Videotutorial: https://www.youtube.com/watch?v=T2xl9JaGqpM

En el entorno de edición, elegir desde el menú inferior izquierdo la opción Editar hoja de estilo de la historia

Insertar el siguiente código:

tw-story { background-image:url("ENTER YOUR URL HERE"); background-size:cover; }

Cambiar imagen de fondo en un pasaje usando etiquetas

Codigo con etiqueta: - La etiqueta usada en este ejemplo es “snow”

tw-story[tags~="snow"] { background-image:url("ENTER YOUR URL HERE"); background-size:cover; }

Efecto de máquina de escribir

<!-- Set the text to show --> (set: $typewriterText to "Incluir texto aquí") <!-- Display (call) the Typewriter passage --> (display: "Typewriter")

TWINE

  1. CODIGO, USADO PARA EDITAR EL TEXTO DEL INICIO DEL JUEGO

    tw-passage[tags~=”AQUI VA EL NOMBRE DE LA ETIQUETA”] { text-align: center; color: red; font-size: 75px; line-height: normal; }

  1. CODIGO, USADO PARA EDITAR EL COLOR DE LAS OPCIONES tw-link { color:green; }
  1. PARA COLOR FONDOS tw-story[tags~=”AQUI VA LA ETIQUETA”] { background-image:url(“AQUI VA EL LINK DE LA IMAGEN”); background-size:cover; }
  1. GUARDAR PARTIDA {(link:”Guardar partida”)[ (if:(save-game:”Slot 1”)) Game saved! [ Sorry, I couldn’t save your game. ] ]}
  1. CARGAR PARTIDA (link: “Load game: “ + (“Slot 1”) of Saves)[ (load-game: “Slot 1”) ]
  1. Musica o vÌdeos de youtube

2.Poner imagenes


By: Loquetutos

Ver cómo hice un comic en Twine https://www.youtube.com/watch?v=Bc1mwvx_h24
Ver comic en twine https://jcporcel.itch.io/work-at-home-sim-es

Ejemplos de juegos y de programación

Instrucciones para crear un poema interactivo
https://ckolmos.blogspot.com/2020/07/tutorial-poema-interactivo.html

Ejemplo de poema interactivo
https://ckolmos.itch.io/cantos-escarlata

Ejemplo de juego literario (Programado en Unity)
El club de las letras
https://elotroadri.itch.io/el-club-de-las-letras

Juegos en castellano
https://itch.io/c/525421/twines-en-castellano

Juego musical
https://thenays.itch.io/nays-on-the-twine

Juegos (ver carátulas)
https://rumpel.itch.io/

Penélope espera sola
Un breve relato con buena programación
https://rumpel.itch.io/penlope-espera-sola

Lamentaciones de Ipuur
Texto basado en un antiguo papiro egipcio. Construye un poema a partir de tres aspectos. Fondo animado.
https://textagames.itch.io/lamentaciones-de-ipuur

Buscar juego Depression quest

Buscar juego Recipe for love

Buscar juego The temple of no

Buscar juego The stanley parable

Buscar juego Dr. LAngeskov

Buscar juego Santomás % el ritual del tereré

Juegos elaborados en el curso Literatura contemporánea (2020-2)

El hilo de Carola

https://mediaticos.itch.io/el-hilo-de-caroloa

Contando para no morir

https://mediaticos.itch.io/contando-para-no-morir

Las personas construyen y reconstruyen

https://mediaticos.itch.io/las-personas-construyen-y-reconstruyen

Efímeros: microrrelatos

https://mediaticos.itch.io/efmeros

La Candida Erendira, más allá del final

https://mediaticos.itch.io/la-cndida-erndira-ms-alla-del-final

Fragmentos

https://mediaticos.itch.io/fragmentos

Una historia cotidiana del futuro

https://mediaticos.itch.io/una-historia-cotidiana-del-futuro

Otras herramientas

CSS (del inglés Cascading Style Sheets) Hojas de Estilo en Cascada

CSS es utilizado para diseñar y dar estilo a las páginas web, por ejemplo, alterando la fuente, color, tamaño y espaciado del contenido, dividirlo en múltiples columnas o agregar animaciones y otras características decorativas.

CSS básico
https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/CSS_basics

Twine CSS pack

Este paquete contiene tres archivos html hechos en hilo que puede importar en hilo y construir como plantillas. Esto estaba destinado a principiantes que podrían no estar bien versados ​​en css pero les gustaría comenzar con algo diferente a la hoja de estilo predeterminada harlowe 3.1.0.

Puede personalizar las hojas de estilo para cada uno de estos en un hilo o mantenerlas iguales y simplemente reemplazar el contenido del pasaje si lo desea, puede hacer lo que sea.
Descarga:
https://storkvomit.itch.io/twine-css-pack

Bitsy

Bitsy es un pequeño editor para pequeños juegos o mundos. El objetivo es facilitar la creación de juegos en los que puedas caminar y hablar con la gente y estar en algún lugar.
https://rumpel.itch.io/guia-bitsy

Juego hecho con Bitsy

https://rumpel.itch.io/welcome-to-the-badhouse

PC98 Layout for Twine

Este diseño es un diseño de estilo PC98, basado en gran medida en Dead of the Brain, para usar en Twine. La idea era crear algo que facilitara comenzar a incluir contenido para una VN en este estilo.

https://fiaglas.itch.io/pc98-layout

Video contar pequeñas historias en Twine

https://www.youtube.com/watch?v=dj1tEQOYSBY

Elaboración del guion de la historia

Posibles propuestas de creación:

  • Libro juego: relato interactivo
  • Adaptación de relatos
  • Creación de relatos originales a partir de piezas literarias
  • Creaciones originales
  • Relatos visuales
  • Juegos
  • Poemas

Ejemplo guion No.1
Adaptación del cuento El libro de arena, de J.L.B.

Un libro de arena en Twine

Se trataría de un juego literario basado en el célebre cuento El libro de arena, de Borges.

La trama del juego sería la misma del cuento, solo que en este caso se trata de recrear el libro y darle, además de los contenidos que aparecen en el cuento, otros. También se podría buscar que se genere un efecto de cadáver exquisito al pasar de un vínculo a otro.

La característica de este juego literario en Twine sería que el jugador nunca pasara dos veces por las mismas páginas del libro. Como los pasajes creados en Twine no pueden ser infinitos, una opción es intentar que se combinen o transformen de algún modo. Así, cuando el jugador retroceda, verá un contenido diferente (Este problema hay que planteárselo a un programador

El objetivo es que después de recorrer el libro y constatar su permanente cambio, el jugador logre deshacerse de él, tal como lo hizo Borges en su cuento.

Ejemplo guion No. 2
Historia gráfica
Rayados, evolución de la línea

Cada cual tiene su rayón

La locura, si se permite la palabra, tiene muchas expresiones.

Ejemplo guion No.3
De Tlön a Tlinkit

Documentación relacionada y teoría

Sobre juegos interactivos
https://www.mata.juegos/es/2019/05/increible-desarrolladora-desaparece-lana-polansky/

Publicación de los relatos en Twine

Opción 1

Publicación en plataforma de videojuegos itch.io

Esta plataforma para desarrolladores indie (independientes) es una alternativa a la más conocida y poderosa Steam. Ha tomado mucha fuerza. Es gratuita y permite que se jueguen los programas en línea. Tiene opciones para vender los juegos, pero el caso que nos ocupa es de tipo educativo. Los relatos podrían entrar en la categoría de books.

Para tener una idea, hay que mirar la página y buscar juegos en twine:

https://itch.io/

¿Cómo subir los juegos a la plataforma itch.io?

https://itch.io/t/286487/cmo-subir-los-juegos-gua-y-respuesta-a-preguntas

Subir juegos a itchio

http://creativewhisper.es/game-design/trucos-twine-subir-tu-juego-a-itchio/

Portada en icht.io y temporizador para inicio

https://itch.io/t/285629/cmo-le-pongo-una-portada-a-mi-juego-de-twine

Estrategia de producción colectiva para integrar narraciones interactivas en Twine dentro del curso Literatura contemporánea del período 2021-1

Paso 1.

Crear equipos y definir las funciones

Cada grupo de clase se organiza en equipos que se encargarán de alguno de los procesos de creación. Cada equipo define un coordinador.

Estos son los equipos y sus funciones:

  • Programadores: -integrar en twine los relatos a partir de los materiales aportados por los otros equipos.

  • Guionistas: generar con la participación de todos, el número y tipo de narraciones que se definan para la experiencia de lectura propuesta con Twine.

  • Ilustradores: crear las imágenes que acompañarán las narraciones propuestas.

  • Editores de audio y video: editar las imágenes y videos requeridos.
    Proponer la ambientación sonora, las pistas musicales y las locuciones que puedan acompañar las narraciones.

  • Comunicadores: Reunirse con los coordinadores de los equipos. Garantizar el flujo de trabajo para la entrega de los productos propuestos. Coordinar la producción general de los relatos y las estrategias de comunicación para lanzar los relatos interactivos. Testeo de las narraciones.

Paso 2.
Explorar durante las clases, contenidos elaborados en Twine. Definir tema, tipo y número de contenidos digitales interactivos que se crearán.

Paso 3.
Revisión de versiones Beta de los contenidos elaborados, para corregir errores y mejorar la experiencia de usuario.
Publicar en Internet el evento de la SCPD.

Estrategia de producción colectiva para integrar marraciones interactivas en Twine dentro del curso Literatura contemporánea del período 2020-2

Paso 1.

Crear equipos y definir las funciones

Cada grupo de clase se organiza en equipos que se encargarán de alguno de los procesos de creación. Cada equipo define un coordinador.

Estos son los equipos y sus funciones:

  • Programadores: -integrar en twine los relatos a partir de los materiales aportados por los otros equipos.

  • Creativos: generar con la participación de todos, el número y tipo de narraciones que se definan para la experiencia de lectura propuesta con Twine.

  • Ilustradores: crear las imágenes que acompañarán las narraciones propuestas.

  • Editores de imagen y video: editar las imágenes y videos requeridos.

  • Diseño sonoro: proponer la ambientación sonora, las pistas musicales y las locuciones que puedan acompañar las narraciones.

  • Editores/Comunicadores: Reunirse con los coordinadores de los equipos. Garantizar el flujo de trabajo para la entrega de los productos propuestos. Coordinar la producción general de los relatos y las estrategias de comunicación para lanzar los relatos interactivos en la SCPD. Testeo de las narraciones.

Paso 2.
Explorar durante las clases, contenidos elaborados en Twine. Definir tema, tipo y número de contenidos digitales interactivos que se crearán.

Paso 3.
Revisión de versiones Beta de los contenidos elaborados, para corregir errores y mejorar la experiencia de usuario.
Publicar en Internet el evento de la SCPD.

TEMAS