Make your own Smolder Scrolls - New and Improved! (Patreon)

Zenimax Online is sitting out Smolder Scrolls this year, but they kindly chose to highlight my previous tutorial on making your own! I've updated it heavily, and it's now also hosted over on the Imperial Library. Updated tutorial follows below: 

*** 

For Heart's Day 2020 and 2021, the Elder Scrolls Online team released "Smolder Scrolls Online,"  a collection of romantic adventures in the visual novel format. They  were a fun celebration of shipping culture, and I saw a lot of people  wishing for the ability to romance their favorite characters. Now, with a  little bit of work, you can make your own Smolder Scrolls style  adventures using the Twine engine!

Twine probably the most popular visual novel engine, used for  everything from basic text adventures to full on games. It's very easy  to use, very well documented, and, with a bit of css/javascript  knowledge, extremely versatile. I'll be walking you through creating a  Smolder Scrolls style story here, but I encourage you to dig around  their documentation to create more complicated stories.

The very first thing you need to do is get Twine. I'll be using the web version here, available at twinery.org/2, but you can also visit the main website to download a standalone application for Windows, Mac, or Linux.

Attached below is an HTML file (web page)  which duplicates the Darien story, and formats it to look similar to the  original Smolder Scrolls. Right click the file and select Download,  then open up Twine and hit Import from File in the  right menu. Select the downloaded file, hit OK, and it should pop up on  your Twine home page. You're now ready to reference how it's built, and  copy/paste from it.

Writing your story

The first thing you'll want to do is  plot things out. The best way to do that is to start by examining the  existing stories, archived on both here on the Library and UESP. There's a couple important things to note:

• Each paragraph is very short. Due to  the layout of the page (and the need to accommodate multiple devices),  you can't have a lot of text.
• The stories have one variable: a number  that tracks how much the character likes you. Each choice you make adds  or subtracts from it, and the lovers/friends/enemies result depends on  the final sum of that number.
• There are only 3 choices for the player to make during the course of the game.
• There are never more than a few lines before the player gets to make a choice (good game design!)

I highly recommend sticking to this format for your first story(s).  It's a good idea to start with a rough outline/sketch of what happens in  every chunk of the story (called "stubbing" by game designers) to make  sure that the flow is right. Make sure you call out which choices add to  or subtract from your romance variable, and what number you need to  arrive at for each final result. You can do this on paper, with sticky  notes, in programs like Draw.io, it's up to you! Here's an example of  how I might stub a story romancing Sotha Sil:

Once you're happy with your basic  structure, it's time to start writing. You can do this in any word  processor you like, or even within Twine itself as you "program" the  story (see the section below). Remember to keep your paragraphs and  player responses short, so that they can fit within the text box.

Adding art

A Visual Novel requires visuals! You'll need  a minimum of two images: a background scene for your character to exist  in (ideally at least 1920x1080 pixels) and picture of your character  (with transparent background).

Screenshots work well here if you can't or  don't want to draw, or you can partner with your favorite fan artist to  do a collaboration. I've also provided each of the original Smolder  Scrolls character images and backgrounds on the Imperial Libary, as well as a Sotha Sil  character and Mnemonic Planisphere background created by me below, which you're free to use.

If you'd like your character to have  different expressions or poses, you'll need to create each of those  images as a separate image, and link the appropriate image inside each  passage node (described below).

Once done, upload those images to a hosting  site, like Imgur. When grabbing a link from imgur, make sure that it  links back to the image itself, not to the imgur page hosting the image.  If you're using the images we provided, you can link them straight from  us. Just click the name of the image to open it, then copy the URL from  the address bar.

Putting everything together

You've got your story and you've got some art, so now it's time to  head into Twine and put it all together into a Smolder Scrolls  experience.

Open up Twine and hit the big green +Story button in the right menu. Give your story a catchy name, and it should open up on a new, blank story with a single node on it.

Do as it says and double click it to start editing. This is where the  magic happens. Select all the text in this window and paste in this  instead:

<img src="Your_Image_URL_here">

<span class="blackbox">While exploring outside Shimmerene with  Darien, a summer squall hits the island. You take refuge in an old, damp  ruin with the golden knight to wait out the storm.

{(set: $f to (font:'Oswald'))

==>

$f[[NEXT>|Intro2]]}</span>

Let's call this code block the "Main Block"

This will give you the basic shape of your very first page. No  character is speaking yet, and the button just says "NEXT > ". From there, you can edit the text with yours. Here's what you need to replace:

Once you've done that, click OK and you should see a new passage  created with the whatever name you gave it (the blue box in the  screenshot). Double click that passage, paste the stuff again, and  change the same areas. Keep doing this for all your introductory  paragraphs (the ones without player choice) until you get to a place  where the romanceable character is speaking and the player has to make a  choice of how to respond. For those passages, you'll want to copy/paste  this text instead:

<img src="Your_Image_URL_here">

<span class="blackbox">$f [DARIEN]

"And I must say, you look quite good soaking wet."

[["You look good shirtless, as always"]]

[["Cut it out, Darien"]]</span>

We'll call this block the "Choice Block"

Again, you'll need to replace some things from that example with your own text and images. Here's what:

(You'll notice I did not give the next passage a unique name -- by  default, Twine will name it the same thing as the display text. This  works well when you have dialog choices, but doesn't work when you have  multiple choices named "NEXT>")

Finally, you've got to add your variable that tracks how much your  character actually likes you. Click one of the passages that resulted  from adding your choice in the step above. You'll want to paste in  this:

<img src="Your_Image_URL_here">

<span class="blackbox">$f [DARIEN]

"Sorry. Just thought I’d try to relieve some tension."

{

(set: $romance to $romance-1)

==>

$f [[Next>|MidIntro]]

}</span>

We'll call this one the "Result Block". It's very  similar to the Choice Block, except that it includes a little bit of  code to adjust how much the character likes you.

If the choice the player made makes the character like them more, replace the orange section with: (set: $romance to $romance + 1).

If the choice makes the character like the player less, replace it with: (set: $romance to $romance - 1)

$romance is the variable name (the $  lets Twine know that it's got a value you can change). By default, it's  set to 0, so you're either adding 1 or removing 1 from the default  value.

If you want to branch the dialog choices based on how the character  feels about you, or if you're ready to end the story and show the player  how well they did, you'll want to check the the value of the $romance  variable. To do this, you'll set up an IF condition before your NEXT>  button. To do that, write (if: $romance = X) before  your choice, replacing X with the number that you want to call and =  with the comparison symbol. For example, if you want to only display a  choice if the character has a romance rating of 1 or less, you'll want  to write (if: $romance <= 1) instead. Your options are = or is (equal to), >= (greater than or equal to), > (greater than), < (less than), and <= (less than or equal to). Make sure that all possible number combinations are accounted for!

Here's an example of this in practice:

Keep adding new Main, Choice, and Result blocks until you've got the  story structure you're happy with. Here's the full outline of Darien's  story, as reference:

While the writing is done now, the art is not quite ready yet. As the  final step, we need to tell Twine what this story should look like. To  do this, click the menu in the bottom left hand of your story window and  select Edit Story Stylesheet.

In the window that pops up, paste the following:

@import 'https://fonts.googleapis.com/css?family=Jim+Nightshade';

@import 'https://fonts.googleapis.com/css?family=Oswald:400';

tw-sidebar tw-icon.redo {

display: none;

}

tw-sidebar tw-icon.undo {

display: none;

}

html, body {

height: 100%;

margin: 0;

padding: 0;

}

tw-story {

font-family: 'Jim Nightshade', cursive;

font-size: 35px;

padding: 5%;

background-image: url("Background_Image_URL_Goes_Here");

background-size:cover;

background-repeat: no-repeat;

max-width: 100%;

max-height: 100vh;

}

tw-passage.strong {

color:red;

}

tw-link {

color:lightgray;

backroung-color: rgb(0,0,0,0.5);

padding:8px;

border: 3px solid white;

text-decoration:none;

font-style: normal;

font-family: 'Oswald', sans-serif;

font-size: 20px;

}

tw-link:hover {

color:white;

font-family: 'Oswald', sans-serif;

}

img {

padding: 0;

display: block;

margin: 0 auto;

max-height: 100vh;

max-width: 100%;

position:relative;

bottom:0px;

}

.blackbox {

background-color: rgba(0, 0, 0, 0.5);

border: 3px solid white;

width:90%;

padding:30px;

position:fixed;

bottom: 10%;

}

This big block of stuff tells the story where and how to display  images, what fonts to use, and provides other format information. There  is one thing you need to change here: Background_Image_URL_Goes_Here should be the URL of the image you want to be your background. Make  sure to include the http:// or https:// prefix, and keep the whole thing  in quotation marks as shown.

If you need more help, Twine's tutorials are a great place to start.  We're using the Harlowe framework, so make sure you're looking at  documentation specific to it. You can also look at the example file  provided below which replicates Darien's story.

Publishing your Story

You've written your story and given it some art, and you're almost  ready to publish! The last thing you should do is play through it a few  times to make sure that your math is giving you the result you want and  that everything looks and works like intended. Once you're satisfied,  it's time to share your fantasies with the world!

To publish your story, you'll need to click the bottom left hand menu and select Publish to File.  This will download an HTML file to your computer. You can then email  the file to your closest friends or put it on a file sharing site, such  as Google Drive, Dropbox, OneDrive. If you go that route, people will  need to download your file and open it in a browser (such as Chrome or  Safari) to play it.

You can also host it directly on the web if you have your own website. GitHub Pages is probably the simplest way to grab your own little chunk of the  internet. It's totally free and has no ads. As an example, you can find  my Darien recreation at: https://ladynerevar.github.io/SmolderScrollsTest/

*** 

(Previous version of this tutorial can be found here)