Make your own Smolder Scrolls (Patreon)

For Heart's Day this year, the ESO team released "Smolder Scrolls Online," a trio 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 platform. 

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. It is both downloadable and usable directly online (I recommend installing the program, so that you don't accidentally clear your browsing data and lose your story). 

The HTML file attached below duplicates the Darien story, and skins the platform to look like the original Smolder Scrolls layout. This post will explain how to take that example and create your own story with 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 TIL 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 final lovers/friends/enemies result depends on its sum. 

I highly recommend sticking to this format for your first story(s). I advise starting with a rough outline/sketch of what happens in every chunk of the story (this is called "stubbing" in game dev) 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. 

Looking at Darien's layout, for example, you'll notice that there are only three choices for the player, and there's never more than a few lines before the player has to make a choice. It's also easier to become enemies with Darien (romance result of 1 or less) than it is with Razum-dar (romance result of -1 or less). 

Once you're happy with the flow, you can go ahead and start adding it to the engine. 

The Art

You'll need a minimum of two images: a background and a png with a transparent background featuring your character. Screenshots will work well here if you don't feel like drawing. Smolder Scrolls looks like it traced over screenshots and then colored that, which is another quick method. If you'd like your character to have different expressions (sad, happy, etc.) you'll need to create each of those images as a separate png.

Once done, upload those images to a hosting site, like imgur. 

I've included Darien's foreground and background in the attachments below. 

Adding to Twine 

Before anything else, I highly recommend reading/watching a few basic Twine tutorials. You're also free to jump in and mess around, but I won't be going through everything super detailed here. 

You'll want to open up my example, as well as create a new story in a different window. It'll create a starting passage by default. Copy my starting passage, then double click yours and paste it over all the text in there. 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. 

When you're ready to add multiple choices for the player, or indicate that the romanceable character is speaking, the syntax is essentially the same: 

(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. To it, add either (set: $romance to $romance + 1), if this choice makes them like you more, or (set: $romance to $romance - 1) if the choice makes them like you less. 

$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 with your conditional results, you'll want to check the the value of $romance. To do this, you'll set up an IF condition before your button. It'll look like this: 

Finally, with everything written, you'll want to add the visuals. Click your story name in the bottom left and select "Edit Story Stylesheet". Then do the same in my example story. Copy everything in the example stylesheet into your new stylesheet, and change this value:

Make sure to give it a few test runs, and you should be ready to share! 

Once you've done a few basic ones, Twine offers a lot of options for more advanced interactivity. This skin works on the Harlowe framework, so take a look through their documentation for an idea of everything that's possible.