100% Good Twine Sugarcube Templates
A downloadable asset pack for Windows, macOS, Linux, and Android
The templates have been updated for SugarCube 2.37. Some code, especially the Save Settings and one macro, is not compatible with earlier version. You can find the original templates for SugarCube 2.36 on my GitHub Repo.
Hello visitor,
Welcome to this totally legit page created by me and my grand skills of graphic design to show you how totally legit and definitely not a scam this deal is.
Below, you can find 100% GOOD {YES, 100% GOOD!!!} Twine SugarCube Templates. Homebrewed. No bug in sight. TESTED BY ACTUAL REAL HUMANS. 100% works *mumble* of the times. All of these legit things are all FOR FREE {YES, 100% FREE!!!} and not a scam at all. You can use these funky files to your heart's content!
FOR THE FULL PRICE OF ZERO, you will have:
- some files, i dunno. haven't opened them
- the gratification of doing a good deed. i guess
- lots of happiness. maybe
- learned something?
- ... and probably having made a deal with some devil, somehow. don't ask me i dont make the rules
Anyway, I should definitely repeat that this is absolutely not a scam. Those files are and will always be available for free. Come on, download them. I know you want to... *wink*
Disclaimer:
All of the above was obviously a joke (please don't report this account, this is not a scam). These files are only funky in terms of colours and have been tested for bugs. They are completely editable and free to use, under the CC-BY license.
If you use any template, throw me a link so I can see the result. <3
All templates are currently usable with the Twine 2 and SugarCube (2.37.2). Using these templates with earlier versions of SugarCube will break code (Settings/Saves/Dialog API + do/redo macro). You can find the original version of these templates on my GitHub repo.
ALL TEMPLATES HAVE THE SAME IFID: Check this tutorial to change the IFID of a template before use!
If you have any question about or any issue with the template, send me an ask over on Tumblr or leave a comment below!
Consider rating and sharing this asset pack too! THANK YOU <3
Settings Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template showcases the different Settings + Saves API, including basic accessibility functions (fonts/saves/themes/volume/etc...).
Includes:
- HTML file
- .tw, .js and .css file for Tweego
- Chapel's Notify Macro
- Annotated passages, StyleSheet and JavaScript
Note: the HTML- only download does not come with the example assets (image/music), you will need to download it and incorporate it separately.
Simple Book Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template emulates the look of a notebook, with a cover, side menus, and navigation. Includes basic settings and saves.
Landscape only orientation. See the template in action: Exquisite Cadaver
Includes:
- HTML ready-to-use file
- Imported FontAwesome (6.6.0)
- .tw, .js and .css file for Tweego
- Annotated passages, StyleSheet and JavaScript
- Notify and Dialog API Macros
- Mobile adapted (Landscape-only, min-height: 320px)
One Page Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template emulates the look of the Chapbook format (Twine). Includes basic settings and saves.
Portrait only orientations. See the template in action: La Petite Mort, Goncharov Escapes!, The Rye in the Dark City
Includes:
- HTML ready-to-use file
- .tw, .js and .css file for Tweego
- Annotated passages, StyleSheet and JavaScript
- Dialog API Macros
- Mobile adapted (Portrait, min-width: 320px)
Space/Tech Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template includes two sci-fi formatting: one space-inspired and one CRT computer-inspired. Includes basic settings and saves.
Portrait only orientations. See this template in action: P-Rix - Space Trucker
Includes:
- HTML ready-to-use file
- Imported FontAwesome (6.6.0)
- .tw, .js and .css file for Tweego
- Annotated passages, StyleSheet and JavaScript
- Mobile adapted (Portrait-only, min-width: 320px)
VN-lite RPG Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template emulates the feel of the VN format (like Narrat) and RPG games (like Disco Elysium), with PC/NPC portrait space. Includes Saves settings.
Portrait only orientations.
Includes:
- HTML ready-to-use file
- .tw, .js and .css file for Tweego
- Annotated passages, StyleSheet and JavaScript
- Mobile adapted (Portrait, min-width: 320px)
Character Creator Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template showcases different options to include in a Character Creator section, and the different ways to include it. Base SugarCube only - no custom macros.
Includes:
- HTML ready-to-use file
- .tw, .js and .css file for Tweego
- Annotated passages, StyleSheet and JavaScript
Title Page Template:
Template made on Twine 2/Tweego with SugarCube (v 2.37.3). Archived 2.36 version.
This template showcases seven ways to include a Title/Menu/Landing Page for SugarCube projects. It can be used for both a Base or Custom UI.
There are no custom macros included.
Includes:
- HTML ready-to-use file
- .tw and .css file for Tweego
- Annotated passages and StyleSheet
Note: The Ready-to-Use Tweego Folder has been transferred to a different page, so the Guide is more accessible (a.k.a. online).
Other templates + how to make a custom interface guide coming soon
| BLOG | GAME POST | CONTACT ME | INSTRUCTIONS (TBP) |
Twineยฎ is an โan open-source tool for telling interactive, non-linear storiesโ originally created by Chris Klimas maintained in several different repositories (Twinery.org). Twine is also a registered trademark of the Interactive Fiction Technology Foundation.
SugarCube is a free (gratis and libre) coding format for Twine/Twee created and maintained by TME.
Need help with SugarCube? Check out this guide!
Status | Released |
Category | Assets |
Release date | Jul 21, 2022 |
Rating | Rated 4.9 out of 5 stars (42 total ratings) |
Author | manonamora |
Genre | Interactive Fiction |
Made with | Twine |
Tags | asset, Asset Pack, basic, design, html, sugarcube, Project template, Twine, User Interface (UI) |
Code license | MIT License |
Asset license | Creative Commons Attribution v4.0 International |
Average session | A few seconds |
Languages | English |
Accessibility | Color-blind friendly, High-contrast, Interactive tutorial |
Links | Blog |
Download
Install instructions
Don't forget to change the IFID before use!
========Thanks!
Thank you for downloading any of my templates! I hope you will enjoy it as much as I did creating them!
If you found use with them, please consider:
- Rating the asset page
- Leaving a comment
- Sharing the asset pack with others (from itch directly or through my Tumblr posts)
========Templates made by manonamora on Twine (v 2.7.0)/Tweego with Sugarcube (v 2.36.1).
You will need at least Twine and the Sugarcube format to edit the file.
Any use with other version than the ones mentioned above may break some macros/UI aspects (particularly with older version, you may need to adjust those aspects manually).
Don't forget to change the IFID before use!
========Credits:
All templates found on this Asset Page are under the CC-BY licence, which asks only for a credit somewhere in your project (ex: Credit page).
I am always interested to see what people use my templates for, so please shoot me a link with your project!
Development log
- [FIX] NOW 110% BETTER ! - SugarCube 2.37 update62 days ago
- [NEW] Title Page TemplateDec 17, 2023
- [NEW] Character Creator!Nov 28, 2023
- [FIX] NOW 105% BETTER !Aug 01, 2023
- [HELP] Change the IFID of a templateJul 31, 2023
- [NEW] VN-lite RPG TemplateJul 29, 2023
- [NEW] Space Tech TemplateMar 01, 2023
- [NEW] Setting TemplateJan 29, 2023
Comments
Log in with itch.io to leave a comment.
guys I'm doing a twine project for school and I'm so lost. I have never used twine before and I'm just starting . I cant figure out how to apply the template and get it to work when I test it. can someone help asap plssss
Hi there,
If you are starting with Twine, I don't recommend using a template, but learning the basics of Twine first.
Twine is a program with multiple formats (Harlowe - default, SugarCube, and Chapbook), each having its own way of coding (formatting of the code, name of macros, symbols to use). I would recommend you check ou the Twine references to see how Twine (the program) works (create a new project, import a Twine project, selecting/changing a format, etc...).
Then, you may want to check out basics tutorials for making links between passages and tracking choices. I recommend Dan Cox's YouTube series (see listed on this page). If you are set on using SugarCube, I have a whole basics section in my guide, with code examples in action.
Twine also has a community where you can ask questions (find links to the Discord/Reddit/Forum here) and get an answer quicker.
If you are still set on using one of the templates here, the easiest method is to download the HTML version of the template, import it into Twine, make a duplicate, and start editing that duplicate!
If you still have an issue with a template, please tell me which template you are using (since each are different).
EDIT: please note that these templates are meant to be used in SugarCube in the latest version of Twine. I only have so far one Harlowe equivalent (here).
Hi! I love these templates, but I noticed when using the character creator the eye popup doesn't work. It says that the cycle's expression is undefined. I thought maybe I was doing something wrong so I checked the original code and played through the character creator demo and had the same issue. I'm not super great with code so I can't figure out how to fix it. Any help would be super appreciated.
Ah dang, I forgot to re-set the temporary variable in that popup. That's my bad!
Essentially, instead of listing all options with <<option "the-option">>, I used <<optionfrom "_variable">>, but forgot to set the variable before that.
If you check the CC-Eye passage (which is almost the same passage but not in a popup), there is this line at the start:
<<set _eyecolours = ["white", "grey", "golden", "green", "blue", "maroon", "brown", "black", "red", "pink", "purple", "lime", "seafoam", "cream"]>>
(it's the line that make the cycle work!)
BTW: if you are looking for explanation on how the Cycle macro works, check out this guide!
Ahhh thank you so much!
I've been looking for templetes for my IFs, thank you for being so amazing!!
Glad I could be of help!
Love you! Thank you so much!
Happy to help!
hi! these are great and very useful. makes my cyoa game look all nice and fancy :)
a small note: i tried adding in the notify macro to the one-page template, and can't get the custom css classes to work for it. i don't think that has anything to do with this template, it's probably something about the css that i'm misunderstanding, but i'm just mentioning it since it's included in other templates here and i was confused when it didn't seem to be compatible.
i don't fully understand css though, and i understand javascript even less, so it's not surprising. :p i'm just mentioning it in case it's relevant to someone else, or somebody knows what the problem is.
Hi!
I'm not sure if I'll have a solution, since I currently can't see your code, see which error message you have, nor know which SugarCube version you are using (2.37 is breaking the template - been working on updating all the templates).
The issue could be one of the following:
First, you will want to check which version of SugarCube you are using:
For faster help, you might want to check either: the Twine Discord, the Twine Reddit, or the Twine section of the IntFiction Forum (you will need to share your code there too, but it's easier to it there than on itch.io).
hey, thanks for the reply! i appreciate the assistance, and the links are very helpful :) i'm using 2.63.1, and i don't actually have an error message, the notification just isn't reflecting any css changes. i understand that this probably has something to do with my code though, so i'll be sure to re-add the macro in case i messed it up, and i'll try the updated version if i still can't get it to work. worst case scenario i need to brush up on css, lol. thanks again!
EDIT: Just updating my comment to say that the author personally helped me through a silly problem that ended up being mostly my own fault! They're a great help, and I'm super pleased with how my game looks now. Thank you so much!
Love these! Thank you SO much! My game is looking MUCH better. One question, though - I already did most of my game before getting this template. Is it possible to still use it? I copied the javascript and the css and the template pages to my project, and it looks *almost* perfect. But I'm still getting some errors. Is there a better way to do this? I'm using One Page Template and when I start the game, I get the error:
"Apologies! An error has occurred. You may be able to continue, but some parts may not work properly.
Error [tw-user-script-0]: Save.onSave is undefined."
And also the menu seems to be in the wrong place? I'm assuming this is user error somehow, but I don't know where to begin to fix it.
Hi!
Glad you like them :)
You can include a template in a project whenever you want it to :)
Sometimes I start making a game by doing the interface first, sometimes I do it at the end. Doesn't matter as long as you include all the necessary elements :)
If you get this error, this means that the JavaScript from the template wasn't copied correctly into your project.
As for the first page, the template has a tag for this passage to remove the menu (cover).
I am not sure how you got the menu the way it is in your screenshot, as it should look like below. I would assume there is a space/return to line somewhere that should be there? But I couldn't tell for certain without seeing the game file directly.
(If you have the html file hosted somewhere, or if you dm/email it to me, I could take a closer look at it :) )
I forgot to mention that the popups don't seem to work either. I get this error message when I try to use them:
Apologies! An error has occurred. You may be able to continue, but some parts may not work properly.
Error: macro <<popup>> does not exist.
And then there's a bunch of markup code...it seems to be the same on the template. I'm using Firefox but I tested it on Brave (Chromium based browser) too, and I got the same basic error.
> Error: macro <<popup>> does not exist.
That is because you didn't include the code for Chapel's Dialog API Macro, which is included in the template., in your project (in the JavaScript part of your project)
> And then there's a bunch of markup code...
I am not sure what you mean by markup code?
Hey I think I figured out the cause of the problem. I don't think it's an improper import of the JavaScript code, as I double-checked and made sure I imported everything correctly, and I still got the same problem as ungarmax. In line 89 of the JavaScript I believe the `config` should be capitalized to `Config`. Fixing it gets rid of all `[tw-user-script-0]` error pop-ups I got.
Yeah, it's become an issue since SugarCube 2.37, because `config` has been removed completely (it was still working for 2.36).
I'm currently working on updating the Guide for 2.37, but the templates will be next.
SugarCube updated last July, but I haven't had time to update everything yet.
You have no idea how I've been looking for a person like you, you're like Moses, guiding us through the desert called "I'm clueless about coding and I want to die". On a more serious note, I always wanted to use Sugarcube because for some reason I liked it more than other formats and whatnot. And I started using Harlowe because someone told me it was more beginner friendly and it is but it still needs coding and I haven't found a simplified guide like yours about it. And I can do a lot of stuff in Harlowe, like make my words move, shine, give them colors, put them backwards and even make them blurry. My question is, can I do these stuffs with Sugarcube aswell or not? If yes, how?
You dear one are a savior and I would be sure to give my thanks to you once I publish my book/game and become famous (pfft, what a smug little shit innit?)
Hi there :)
If you're looking to start out with SugarCube, you might find this guide useful.
All that is done in Harlowe can also be done in SugarCube, though the code will be different You might not have special macro for certain effect, instead use CSS or JavaScript to achieve it. The examples you listed would be CSS related (I explain the bases of it in the guide linked above).
Good luck!
God? Is that thou? Lol
Thank you so much๐๐๐
anybody trying to teach an absolute idiot how to use this???
Hhhmmm, I'm sorry?
You only need to import the html file in Twine for it to work (after changing the IFID). Then it's just a matter of adding more passages or editing the current ones. You can also change how the template looks in the Stylesheet. There should be comments on every relevant passages as well.
Okay!
How do I do any of that?
To change the IFID can be found on this page (which I linked my previous comment).
To import a project on Twine is explained here.
And the rest comes with opening the different passages when the project is open on Twine.
Thank youuu youre a life saver! <3
How does it feel to be the backbone of society? Because you are <3
<3
This is amazing. Thanks so much <3
Happy to help :)
You're welcome! Glad I could help!
Sugarcube is a nice tool, and does stuff like save management easier than Harlowe, but it requires more know-how to use its more advanced functionalities.
And Twine's UI having no syntaxic hightlights for Sugarcube makes coding cumbersome.
So thank you for taking the time to help beginners get the hang of both Sugarcube and Twee. :-)
HI there,
More than happy to help!
Thank you for for taking the time comment!
If you have any SugarCube or Twee-related questions/issues, you can always send me a messagessend me a messages as well!
In the tables css, I think there was a typo that puts a green variable when it should be orange.
AH YES! Sorry about that. You can change it as --or-body instead :)
But I'll edit the template!
EDIT: Fixed templates uploaded
Can confirm: 101% good and legit ๐
HIGH PRAISE!
(thanks <3)