Great stuff as always, thank you. Is there any way to make the font size change in the Simple Book Template apply to the dialog pop ups as well as the passages? I get how css works (mostly) but that js stuff not so much.
There are two ways: linking that font setting to a css class (i.e. like the font type but in the css you change font-size instead of font-family) or add something like:
var sizepopup = document.getElementById("ui-dialog"); sizepopup.style.fontSize = settings.fontSize;
Just below size.style.fontSize = settings.fontSize;
Fair warning: it changes right away and the popup may/will probably look weird until closed/reopned.
Thank you - that's great (script version works fine for this one as I've made the Settings popup super simple and ofc that's the only one that can be open while you change it).
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
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!
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.
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:
Something wrong happened as you added the Notify macro (e.g. not pasted in the right section, edits made broke the macro)
Something was wrong with the template to begin with (e.g. not compatible with your version of SugarCube)
if SugarCube 2.36.1: remove the Notify code you currently have and re-add it (Chapel's repo, choose either the minified or pretty, and add the JS in the JavaScript and the CSS in the StyleSheet). I made sure the One Page Template didn't use any of the ID/Class name that macro uses.
if SugarCube 2.37.3,
Remove the Settings from the JavaScript (this is probably where the issue is) or move the custom macros (Notify and Dialog) above the settings
The 2.37 update changed a lot of stuff, that made some older code incompatible. When it runs into a JS error, SugarCube stops loading code.
Wait for the template to be updated (should be on this page later this week) and edit what's been changed (JavaScript/CSS and some passages).
The code is already available here on Github right now, while I finish editing the last template.
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.
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?)
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!
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.
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. :-)
β Return to asset pack
Comments
Log in with itch.io to leave a comment.
Great stuff as always, thank you. Is there any way to make the font size change in the Simple Book Template apply to the dialog pop ups as well as the passages? I get how css works (mostly) but that js stuff not so much.
There are two ways: linking that font setting to a css class (i.e. like the font type but in the css you change font-size instead of font-family) or add something like:
var sizepopup = document.getElementById("ui-dialog");
Just below size.style.fontSize = settings.fontSize;sizepopup.style.fontSize = settings.fontSize;
Fair warning: it changes right away and the popup may/will probably look weird until closed/reopned.
Thank you - that's great (script version works fine for this one as I've made the Settings popup super simple and ofc that's the only one that can be open while you change it).
Awesome! Happy to be of help :)
This is amazing! I just can't figure out how to change the "Name of your game" text on the Next page on the simple book template at the moment;,)
Hiya!
You should check the passage called StoryDisplayTitle, that's where that text is located!
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.
.or .passage table, .or .passage th, .or .passage td { border: 1px solid var(--gn-body); }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)