By default, Twine creates text-based branching narratives, but you can also turn a Twine into an interactive comic using images. Below you'll find two versions of an image-based Twine. For both of these Twines, we used the SugarCube story format, but we jazzed them up with custom CSS to show Twine's customizability.
We recommend image-based Twines for those who are more familiar with Twine and/or who have a basic or intermediate knowledge of HTML and CSS. Unlike other programs, Twine doesn't have an "upload" or "insert" option/button for images, so there is some creativity and coding knowledge needed to make a fairly refined image-based Twine. Knowing someone with these skills or being a very good Googler/troubleshooter also comes in handy.
Scenario for the Image-Based Twine: You are an Engineering professor who is trying to make your department more welcoming for aspiring female engineers, but it might prove more complicated than you anticipated.
This first example is a completed Twine narrative using comics. Please use the text-based links beneath the images to advance through the Twine passages. In this Twine, we used the SugarCube story format and used custom CSS to change the colors and format the images. We like the user interface bar included with SugarCube, because it gives learners a way to save their progress (which can also be useful for turning in assignments for completion credit) and restart quickly, but to make the images easier to view, we set it to be collapsed at the start of the Twine.
Due to the image size, this Twine is best viewed on a desktop or laptop browser.
The second example is a Meta-Twine. The Meta-Twine follows the single "correct" path in the Twine (i.e. we make the decisions for you), and includes tips and tricks for helping you create and conceptualize your own image-based Twines and branching narratives. For the Meta-Twine, we disabled the collapsible user interface bar on the left to make room for the images and tooltips, but added a "Back" link so you could still revisit old passages. To view the tips, place your cursor on the image and the tooltip will appear.
Due to the image size, this Twine is best viewed on a desktop or laptop browser.
If you have a minute or two to spare, please consider using our feedback form to tell us a little bit about yourself, why you came to our site, and what you thought about our toolkit! As a lab dedicated to improving instructional design and access to educational technology at our university and beyond, we're always looking for ways to evaluate and improve our resources. We will not ask you for any identifiable information in this form.