A downloadable template

Download NowName your own price

A free template made using Twine's SugarCube 2 story format<3

Features:

  • Responsive & mobile-friendly UI (styling for both portrait and landscape modes)
  • Custom save names/autosaving features
  • Settings for changing light/dark modes, fonts, & font size
  • Settings for toggling notifications & dialog tags
  • Imported fonts, including OpenDyslexic
  • Built-in stat bars (with HTML/CSS & JavaScript sample)
  • General theme styling

I did my best to label the CSS and explain the JavaScript, but let me know if you have any questions or suggestions!

Download

Download NowName your own price

Click download now to get access to the following files:

index.html 527 kB

Development log

Comments

Log in with itch.io to leave a comment.

(+1)

Hey there! Loved the template! Can you just tell me how i can keep a sidebar with some basic stats always open? So I can show some information real-time during game, without having to click on "stats". Thank you!

(+1)

Thank you so much!! That's a good idea, and there are a couple things you could do. You could 1) opt to keep the bottom bar open at all times (instead of having it open on hover) and keep your real-time stats down there instead of in a separate stats page. To do that, you would need to adjust the footer height in the stylesheet - right now it's at 10% so just change that to whatever height you want and erase the .footer:hover section.  Or 2) you could add in a whole new section altogether to store the stats in, but that'll take a lot more coding to make work. Off the top of my head, I'm thinking you could add a new div id to the StoryInterface passage like this:


You'll need to add a new passage to store your stats (so in my example the new passage would be titled static-stats), and you'll need to add styling for the new div in the stylesheet.

#static-stats {
  font-family: var(--sansserif);
  font-size: 80%;
  text-transform: uppercase;
  letter-spacing: .2em;
  line-height: 1.5;
  position: absolute;
  right: 0;
}

Totally depends on how you want the stats to look, but this is what I put for the example and it ends up looking like this:


You'd have to play around with mobile formatting though since the mobile version doesn't leave room for stats on the side like this. Maybe something like:

top: 10%;
left: 50%;
transform: translateX(-50%);

This would put the stats right in the middle above the passage, but it does interfere with the title a bit (and also just doesn't look great). But hopefully this is a good starting point for you to make it work!!

(+1)

That helps me a lot!! Thank you so much! I'll try to mess with it a bit! Thank you for your help!

(+1)

No problem at all! Can't wait to see what you come up with!!

Thanks so much! I've only used Harlowe, but when I give Sugarcube a shot I'd love to use this template.

Your game looks wonderful, I may have to check out Harlowe myself! But thank you, I can't wait to see what you create with it:)

Thanks for the kind words! (The template was based on the visual novel template by Sun Labyrinth. I didn't use nearly the bells and whistles, but I'll update my game page to reflect her initial groundwork).

Oooh okay thank you, I'll definitely have to check that template out!