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.

Screenshot of a Twine scenario. The passage has a white background with three dark blue buttons. An illustrated character is shown to the right of her dialog. Select the image to try the scenario.

Default style

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.

Twine story with black background, white text, and blue links

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.

  1. Select the colors button.
  2. Change the text color to the flat color black.
  3. 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.
  4. 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")
)
Twine story with light blue background, black text, and blue links.

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
Twine story. The passage has a white background, rounded corners, and a medium blue left 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))
 )
Twine story, now with three buttons. Two are dark blue. The middle button is a lighter shade of blue due to the hover setting.

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.

7 thumbnails of an illustrated character in different poses in a folder with a file called stakeholder_feedback.html

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.

First passage in the Twine story. Select the image to try the story.

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)
Twine story without the blue sidebar and undo button on the left side

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

  1. 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

  2. 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!

    1. 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).

Leave a Reply