Ladynerevar
patreon
Make your own Smolder Scrolls - New and Improved!
🕑 Added 2022-02-14 03:22:34 +0000 UTCZenimax 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)
