Visual Design for Scenarios in Twine
Create a polished visual design for scenarios in Twine using enchant macros in Harlowe, following these step-by-step directions.
While I often use Twine for simple text-based prototypes of branching scenarios, it’s also possible to create a more polished look and feel. With some work on the visual design, you can use Twine to create branching scenarios for end users without migrating the content to another tool for final development. In this post, I’ll build on the basics for formatting that I explained in my previous post on the Harlowe Story Format for Twine. This requires changing the formatting with “enchant” macros on three separate elements: the page, passage, and links.
This is the starting point; just basic text and links. The default style is a black background with white text. I wrote the entire scenario before working on the visual design. This is adapted from a scenario I used for some earlier examples.
Page settings: Gradient background and text
As in my previous post, I created a new passage titled Style with the tag “header.” (If you haven’t read that post yet, it may be helpful to review it before continuing.) The page settings affect the entire background and story.
- Select the colors button.
- Change the text color to the flat color black.
- Change the background to a gradient. I used some light blues for a subtle gradient. You may need to play around with the gradient options until you get exactly what you want.
- Set it to affect the entire page.
That generates the following code:
(enchant:?page, (text-color:black)+ (background:(gradient: 157,0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF)) )
I also changed the font to Open Sans by adding +(font:”Open Sans”). This command works with any font available to the browser, so any standard online fonts should work.
This is the final code for the page:
(enchant:?page, (text-color:black)+ (background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+ (font:"Open Sans") )
Passage settings: Background, rounded corners, sidebar
Next is the passage settings. The passage settings control the container for the story text itself. You can copy and paste the settings below into the Style passage.
(enchant:?passage, (background:(white)) + (corner-radius:20) + (border:"none", "none", "none", "solid")+ (border-size:120) + (border-color:#6F95C8) )
- background = the background of the passage
- corner-radius = the setting for how rounded the corners are
- border = the border around the passage. The only border shown is on the left side, and it’s a solid color. That’s the background for the sidebar with the previous button.
- border-size = the width of the sidebar
- border-color = the color of the sidebar
Link settings: Background color, rounded corners, hover
To make the links look more like buttons, I changed the background and text colors. I also added rounded corners and a hover style with a different color. These enchant settings should be attached to the link.
(enchant:?link, (background:#052650) + (border:'solid') + (color:white) + (corner-radius: 12) + (border-color:#F8F7FF) + (border-size:1) + (hover-style: (bg:#3168b0) + (border-color:white)) )
Images in passage
To add images in Twine, use the img HTML tag. You will need to add images in each individual passage, not the style passage, if you want to show changing character poses.
<img src="nia_thinking.png" alt="Jeanne with 1 finger pointing up" width=40% style="float:right">
You can either link to images online using a full URL or link to images with a relative link. In this case, I put all of the images in the same folder as the published scenario. The images in this scenario are from the eLearning Art “designer realistic” illustrated character set.
Note that when you Play a scenario in Twine, it will only show the alt text for the image. You must publish the scenario for image links to work correctly.
See the whole scenario
You can try the scenario for yourself to see how it works.
Other visual design variations
You can use my enchant macros as a starting point for your own visual design in Twine scenarios. Copy and paste the entire code below, then edit and experiment with your own variations.
(enchant:?page, (text-color:black)+ (background:(gradient: 157, 0,#EAF0F7,0.7102,#C1D2E7,1,#F8F7FF))+ (font:"Open Sans") )(enchant:?passage, (background:(white)) + (corner-radius:20) + (border:"none", "none", "none", "solid")+ (border-size:120) + (border-color:#6F95C8) )(enchant:?link, (background:#052650) + (border:'solid') + (color:white) + (corner-radius: 12) + (border-color:#F8F7FF) + (border-size:1) + (hover-style: (bg:#3168b0) + (border-color:white)) )
One variation is to hide the sidebar. That will remove the undo and redo buttons. In this case, you need a solid border all around the passage, but it should be narrower. Use the hide macro to hide the sidebar.
(enchant:?passage, (background:(white)) + (corner-radius:20) + (border:"solid")+ (border-size:3) + (border-color:#6F95C8) ) (hide:?sidebar)
Check out the Styling with Enchantments example story for additional ideas and code samples for changing the look of your stories.
Same scenario, different tools
I have used this same scenario (with slight variations) for demos in several different tools. Check out these examples to see other ways that the same content could be presented differently, depending on the tool.
12 thoughts on “Visual Design for Scenarios in Twine”
As I am working on my project in your class, I was also looking for some visual design tips in Twine. I just wanted to thank you for sharing this post with us. It’s extremely helpful
I’m doing some updates on this for lesson 7, so you’ll have some new information related to visual options in Twine within the course too.
Hi Christy! It’s been a very busy few weeks, so I’m just now reading this. Thank you so much for sharing your process and these step-by-step instructions. I’m saving this valuable info!
Glad it’s helpful! Of course, it took me 2 hours of fiddling to figure this out. I had to go back to retrace my steps to create this post. It looks a lot cleaner and more straightforward here than it actually did in real life! But, now that I have this example, it will go faster every time in the future (and hopefully will go faster for anyone else following the directions).
Thanks!! Great tip, didn’t know Twine – will give it a try as it is open source 🙂
Great! I have some instructions for getting started with Twine in this post: https://www.christytuckerlearning.com/twine-makes-branching-scenarios-easier/