#sugarcube coding

[uroboros-if]

Fade to Black Macro V2

My previous code was completely incomprehensible; here is a MUCH simpler and elegant solution with jQuery. Thanks to TheMadExile for their post on splash screens! This is simply a modification of their original code. In this case, please do not credit me.

Features

Compatible with backgrounds.

Adjustable fade in, fade out, and delay.

Default is a black screen, but can use a web image instead.

Overall much more flexible, smooth, and clean.

Just get the JavaScript here and the CSS here. Instructions and demo on Itch.io, but instructions also below readme.

Usage

To use it, you must use the link macro WITHOUT an additional argument for the passage name you want to go to. Instead, include that in the passagefade macro that comes with the Javascript code.

The new macro above uses the following arguments: how long it takes to fade in the black screen, how long it stays, and how long it fades out in miliseconds.

You can additionally have a fifth argument with the web image URL in quotes to use an image instead. If you don't have a fifth argument, it will default to a black background.

[manonamora-if]

The 100% Good Twine SugarCube Guide!

The 100% Good Twine SugarCube Guide is a coding guide for the SugarCube format of Twine. It is meant as an alternative to the SugarCube documentation, with further explanations, interactive examples, and organised by difficulty. The goal of this guide is to make the learning curve for new SugarCube user less steep, and provide a comprehensive and wide look over the format.

VIEW / DOWNLOAD THE GUIDE!!!!

The Guide is compartmentalised in (currently) four categories:

THE BASICS or the absolute basics to start with SugarCube. No need for extra knowledge. Just the base needed to make something.

THE BASICS + adding interactivity, and creating a fully rounded IF game May require a bit of CSS knowledge (formatting rules)

INTERMEDIATE MODE adding more customisation and complex code Will probably require some CSS knowledge, and maybe some JavaScript

ADVANCE USE the most complex macros and APIs Will surely require some JavaScript/jQuery knowledge

Note: The Advanced Use includes all the APIs, macros, and methods not covered by the previous categories. This includes code requiring very advance knowledge of JavaScript/jQuery to be used properly.

Each category explains many aspects of the format, tailored to a specific level of the user. More simpler explanations and examples are available in earlier chapters, compared to the later ones.

If something is unclear, you found a mistake, you would like more examples in the guide, or would like a feature covered, let me know!

The Guide currently covers all macros (as of SugarCube v.2.37.3), all functions and methods, and APIs. It touches upon the use of HTML, CSS, JavaScript and jQuery, when relevant. It also discusses aspects of accessibility.

The Guides also provides a list of further resources, for the different coding languages.

The Guide is available in a downloadable form for offline view:

HTML file that can be opened in Twine

.tw file that can be opened in Twine

source code, separating the chapters, .js and .css files

GITHUB REPO | RAISE AN ISSUE | TWINE RESOURCES TWEEGO | TEMPLATES | CSCRIPT 2 SG GUIDE

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.

VIEW / DOWNLOAD THE GUIDE!!!!

As of this release (v2.0.0), it is up to date with the version 2.37.3. If you are looking for the guide covering SugarCube 2.36.1, you can find it on my GitHub.

Note: the Guide is now complete. There won't be further substantial updates.

[redo-rewind-if]

Hi, I wonder how are you creating your wip? Do you write it in google docs and then code it in Twine? I'm starting making my own and I'm looking for some technical tips

Hi! Thanks so much for the ask! It's always good to see new authors starting their own IFs. This might be a bit long so I'll put everything under a read more for those of you who aren't interested.

For me personally, I write in LibreOffice, which is a free alternative to Microsoft Office/Word. But, you can definitely use Google Docs or whatever other writing program you prefer!

As for coding, you can just code in Twine, but I like to code some as I write so I don't forget when to set certain variables. If you don't want to code anything in your draft, then I'd recommend at least leaving yourself reminders at places you'd like to add variables or when you want to have skill checks or anything else of the sort.

I should mention that a lot of people dislike coding in Twine, the code isn't set apart from the text visually and can be confusing for some, so if that's the case for you, I'd recommend checking out something like Notepad++ for coding and then copy and pasting everything into Twine once you're done.

If you do use Notepad++, and you're also using SugarCube, I'd highly recommend downloading and using this to add SugarCube as a custom language to the program so your code is easier to read. (You'll be able to select it as the coding language in Notepad++ after downloading and following the directions, though you may need to exit and restart the program before it shows up in the language list).

Some other great resources I use: The Twine Cookbook (of course), SugarCube Documentation or Harlowe (if you prefer), some templates (including the one I use!) [1] [2] [3], and w3schools tutorials for basics in CSS and JavaScript (assuming you don't know how to code in them already, if you do, that's great!)

If you have any more questions, feel free to ask! I'm no coding expert but I have taken a few classes on Web Dev stuff in college so I know a thing or two.

Best of luck to you on your project anon!😊

[aurelim]

Heyy aurie!! Im a writer with a head packed full of ideas and I wanna try making an if!! Previously, I have written poems and snippets but never a whole story. I've alr downloaded twine and everything but ITS SO CONFUSING?? if you have any tips i would be so grateful omd 😭

hii! I am honored you asked me to help, but really before trying to do anything you should look into trying out the different formats on Twine! You basically do that by creating a new game and go to Story, then Details, and check it out (type something into the empty passage to at least see something and what the font looks like). By looking into them and seeing the designs of each one, you can figure out what works best for you. I personally love Sugarcube because it uses CSS, HTML and JavaScript to work, and there are currently a lot of resources for it!

I feel like I would do a better job if you had any specific questions to ask about how to start designing a game, so feel free to DM me. I can also help with coding as well ^^ though my JavaScript knowledge is nonexistent.

I can throw out some resources to look into as well:

Sugarcube v2 Documentation

100% Good Twine Sugarcube Guide

Megathread of Resources

Also, I’d be interested to know just what exactly you want to write, since you have so many stories. I know I have a lot, but I began working on each one at different times, so it would probably be best to settle on your favorite one for now. Maybe read it in the future too lol.

[glucosify]

Glucosify's Quick Start Guide to Twine's Sugarcube for Interactive Fiction

Or GQSGTSIF for short.

Very simplified guide to making interactive fiction on Twine, using Sugarcube. This won't cover how to change the UI or anything like that, it's really the bare bones on how to make passages, variables, choices etc. There are multiple ways and syntaxes to do these things, I'm covering the ones I use but it's really not the only way to write code and to do these things ^^ This is not a replacement to the documentation, I'll link relevant parts of the documentations throughout the guide but it's really going to be your best source of information Let me know if there's anything else you think I should add in there ~ 1. Passages & StoryInit 2. Variables 3. If statements 4. StoryMenu (bonus)

First of all, assuming you've already downloaded Twine and opened a new project, make sure that your default story format is Sugarcube (in the top left of the window, go to Twine -> Story Formats and click on Sugarcube then at the top left 'use as default format')

Now, go back to your project. In the top left, click on Passage -> New : this is how you'll create new passages.

Passages are what makes the game essentially, it's where you write your story. Whenever you play an if and you click on a choice and it progresses to a new passage of text, that's how it's done. Make sure to name your passages in a way that makes sense to you, two passages can't have the same name. It's probably best the names aren't super long either considering the names are what you'll type in your code to make the player go to this or that passage.

Special passages :

there are some passages that have special functions. Create a passage and name it StoryInit : this passage is used to store variables. Whenever a new game is started, it will load up the variables states as they are in the StoryInit passage. This is essentially a default state where no progress has been made in the story so for example : all stats would be at 0, all relationships points would be at 0, the MC wouldn't have a name yet etc. We'll store our variables there. Variables are attached to values, these values change as the player goes through the story. A variable's value can be many things, it could be a string which is anything that you'd write inside double quotes "" and would be printed as is in the string. For example :

<<set $mcName to "">>

$mcName is a variable. Its value changes to whatever the player chooses for the MC name. As you write your code, you just have to type $mcName and it will be changed to whatever name the player has set it to. A variable's value can also be a number, in this case, you wouldn't write it in double quotes.

<<set $confidence to 50, $maxConfidence to 100>>

It can also be a true or false statement.

<<set $IrisRomance to false>>

Figure out what needs to be a variable in your story and add them accordingly in your StoryInit passage, you'll add more variables as you go. Remember to give them a value, even if the value is 0 or "". Common variables would be for the MC's name and different physical traits, personality stats, pronouns, character's relationships stats etc. For this tutorial, write in your StoryInit :

<<set $mcName to "">>

Now, let's test our variable. Create another passage, call it start. In the top left bar, select Start Story Here : you should now see a little green rocket attached to your start passage. This is the passage the players will first see when they launch your game.

Inside the "start" passage, let's make a way to enter your own name with a simple text box.

<<textbox "$mcName" "Enter your name">>

Under it but still inside the "start" passage, let's write a simple link that will let us go to the next passage when we click on it.

<<link 'click here to confirm your name' 'next'>><</link>>

((the first string in the single quote is what will be displayed on the screen as the link, the second word in quotes, in this case 'next' is the name of the passage this link should direct you to))

Now make a second passage and call it next. Inside that passage, write this :

My name is $mcName.

Let's see if it works : in the top left, go to build -> play.

It will open an html file in your default browser. Considering we haven't touched the UI, it will have the default Sugarcube UI. You should have a textbox on the screen and a link under it in blue. If your link is red or if you have an error, go back to your code and check for misspellings or make sure you have the right amount of quotes etc.

Type whatever name you want inside that text box then click on the 'click here to confirm your name' link. It should now have changed the $mcName we wrote in the next passage into the name you input in the box. Congrats, you've learned how to set, change and display a variable :^) Now, let's say you want personality (or relationship) stats that change when you select a choice. Back in your StoryInit :

<<set $confidence to 50, $maxConfidence to 100>>

If you want to have a visual elements like actual bars and meters, I would suggest making it easy on you and just getting Chapel's meter macro. You just copy the minified code inside your Javascript file (top left -> story -> Javascript) and then write in your StoryInit and in your relationships / stats / profile page as explained on his demo. Go back to your "next" passage. Under the first sentence, let's write two choices link, one that will lead to an increase in confidence and one that lowers it.

<<link 'You are not confident. Life is hard.' 'sadface'>><<set $confidence to Math.clamp($confidence - 10, 0, $maxConfidence)>><</link>> <<link 'You are very confident. Life is great.' 'happyface'>><<set $confidence to Math.clamp($confidence + 10, 0, $maxConfidence)>><</link>>

((Math.clamp might look intimidating but don't worry too much, it's just to make sure your variable's value doesn't go over the min and max allowed so you can't go below 0 or above 100 in this case. You write the variable you want to change then a + or a - followed by how many points you want to remove / add - in this case, 10. Then the 0 is the minimum and the $maxConfidence is the maximum value.))

Now create two new passages, one called sadface and one called happyface. To make sure your variable changed, type $confidence in both of the new passages and play your game.

On one of the statement, it should now say 40 instead of 50 and 60 in the other one. Congrats you've learned how to change a stat. :^)

But what if you want two choices to lead to the same passage but to display different informations depending on how high / low a stat is? Welcome to the world of if statements. Back in StoryInit, you know the drill :

<<set $idiotLove to 0, $idiotMaxLove to 100>> <<set $idiotRomance to false>>

New passage, call it LoveCheck. Go back to your "next" passage :

<<link 'Click here to get 25 love points with the idiot.' 'LoveCheck'>><<set $idiotLove to Math.clamp($idiotLove + 25, 0, $idiotMaxLove)>><</link>> <<link 'Click here to get 50 love points with the idiot.' 'LoveCheck'>><<set $idiotLove to Math.clamp($idiotLove + 50, 0, $idiotMaxLove)>><</link>> <<link 'Click here to get 100 love points with the idiot.' 'LoveCheck'>><<set $idiotLove to Math.clamp($idiotLove + 100, 0, $idiotMaxLove)>><</link>> <<link 'I\'m allergic to idiots.' 'LoveCheck'>><</link>>

((you need to add a \ before your apostrophe when it's supposed to be part of the string, otherwise, the program will just think that's a closing single quote and not an apostrophe))

Alright, so now go to your newly created LoveCheck passage and let's write your first if statement. An if statement is basically a condition that you set, if the statement is 'valid' so like if it's a match then the program will ignore every other 'if' possibility. This is important because it means the order of your if statements matters. An if statement can be as simple as :

You are a person. <<if $idiotRomance is false>>You are not in love with an idiot.<</if>>

((this means that if the variable is false, then the second sentence will be displayed but if the variable is true, then the second sentence wouldn't be displayed to the player.)) An if statement can have an else :

You are a person. <<if $idiotRomance is false>>You are not in love with an idiot. <<else>> You love an idiot, I'm sorry. <</if>>

Note that this is the same as this, using elseif :

You are a person. <<if $idiotRomance is false>>You are not in love with an idiot. <<elseif $idiotRomance is true>> You love an idiot, I'm sorry. <</if>>

What this does is, if the variable is true, it will show the third sentence and not the second one and vice versa if the variable is false - because an if statement will only display the first statement that matches, if the variable is true then it will ignore any statement that require the variable to be false. As I said earlier, the order of your statement matter especially with variables tied to numerical values. You'll understand better once you try it - let's do it in the wrong order first (still in your LoveCheck passage), we'll print the $idiotLove variable to see its value :

$idiotLove <<if $idiotLove gte 25>> You like the idiot a little. <<elseif $idiotLove gte 50>>You like the idiot quite a bit. <<elseif $idiotLove gte 100>>You've fallen for the idiot, it's too late to save you. <<else>> You don't even know who the idiot is, good for you.<</if>>

Click play and let's look at the problem. If you click on all the links, the number will be different but the sentence will still say that you like the idiot a little, even if you have 100 points. That's because gte stands for greater than or equal to, 100 is greater than 25 so the first statement is always valid so long as you have at least 25 points. The program sees the first statement matches and is valid so it has no need to read the rest of the if statements. To remedy this, we just change the order :

$idiotLove <<if $idiotLove gte 100>>You've fallen for the idiot, it's too late to save you. <<elseif $idiotLove gte 50>>You like the idiot quite a bit. <<elseif $idiotLove gte 25>>You like the idiot a little. <<else>> You don't even know who the idiot is, good for you.<</if>>

Now it works. If statements will be your most used tool I imagine, especially if there's a lot of variations in your story. You can use if statements for pronouns, for stat checks, romance checks etc.

I can always make another guide for the UI but for now, I'll just show you how to add another link in the sidebar of the default UI, using StoryMenu.

Make a new passage, call it StoryMenu :

<<link 'relationships' 'relationships'>><</link>> <<link 'stats' 'stats'>><</link>>

Make two new passages called relationships and stats. Write whatever you want in them, if you're using Chapel's meters, you could use the <<showmeter>> macro here to display your stat bars.

[valiant-if]

Hey, everyone!

I'm currently working on a very basic implementation for short stories to be read in the actual game, but I encountered something that I wasn't aware was an issue.

For some reason, dialog popups that exceed a certain length are overflowing off the page, and this happens even when I go into the style sheet and change the dialog overflow property accordingly. (And, yes, this happens on both PC and mobile.)

Thankfully, I don't think any of the dialog boxes so far exceed the length of the box, which is doubtless why no one has ever reported this issue to me before. But it does mean that, until I can figure out why that's happening, there is a possibility that future dialog boxes will have this problem.

As for short stories, I wanted to implement them with dialog boxes because I think it looks nicer that way (on mobile specifically), but instead I'll be doing the more simple (and probably expected) implementation of making passages with the <<return>> macro.

The demo update this week is going to be pretty sparse on account of the holidays, but it will have the first four "Snowed In" snippets of the bunch. The last four will be released with the January 4th update, which will be the last day of the free month of ko-fi benefits.

[ramonag-if]

heyy, i am the anon of the last ask, and i was referring to adding a background image to the sidebar. sorry for the confusion😅

Ah okay! I use Twine Sugarcube to code, so this won't work for any other story format. You can easily add a background image to the UI bar by adding something like this in the stylesheet:

Here, the background-image is where I'll add the source for the background image I want to include in my UI bar. You'll need to figure out media queries because different screens will display the image differently depending on the size of the image you're using.

I cheated because I didn't want to go through learning about media queries and just used a huge background image (think desktop wallpaper size) and because it was an image that I didn't really care how it appeared on different screens, it worked out fine for me.

In this example, I'm using a local folder/location for my images because I didn't want to rely on an image hosting site to do that, you'll just have a folder within your game folder named images (or whatever you want it called) and that's where you will add your background image for your UI bar.

So if your images folder is called pics and your background image is called bg_image.png, you will add something like this within your stylesheet:

#ui-bar: { background-image: [img[pics/bg_image.png]] }

In my example, I've added a background colour as well, in case the image fails for whatever reason and I've also added other properties to style the way I wanted the image to look. You'll need to fiddle around with it a bit to see what works best for you, but there is a high chance if you're looking for a specific format for your picture, you're going to need to use media queries especially if the game is going to be played on different devices such as phones and desktops.

I hope this helps you and if you're still confused, please feel free to send in another ask/message!

[wanted-game-if]

sometimes sugar cube makes me want to cry

[the-six-that-thrive-if]

hiii, i love ur story, can i ask, what is it u do to make it so the player can make coices within the text, like when in chapter 1 you can change between smiling/sighing/grinning, also what is that called in the coding

Cycling! They're cycling variables! Now to add little marks like the rotation marks I have next to it, you can add it by yourself or code it in to automatically appear.

This is what it looks like.

<<cycle "$insertanyvariable"autoselect>>

<<option "option 1">>

<<option "option 2">>

<<option "option 3">>

<</cycle>>

They look like that

[monster-match-if]

It's annoying that MC is always boring human and ROs some cool creatures. Ugh. I've seen a lot of IFs like that

that's why I like playing interactive games… to forget about being human for a moment -_- but no....

What can I say, I'm sorry for your plight, anon. I'm the exact opposite 💀Like you can't imagine how hard it was for me to make a HALF drow in BG3... ended up looking kinda human except the ears... I think I've started all my stories to scratch an ich for something specific I'm looking for in IFs, so happy writing maybe.

[uroboros-if]

Content Warning Macro

DEMO | CODE

(Dedicated to my friends from the sister Ouroboros server ♥️ A cute mini project I worked on for a few hours!)

A macro that allows readers to toggle for topics they find triggering/sensitive to hide them unless clicked/pressed. This simplifies the process by a lot, and comes with additional features!

For instructions, follow the link to the code above. Below, I will be explaining more in-depth about how it simplifies the process, and includes additional features. :)

Simplified how?

When you want to section off portions of the text as it has sensitive content, you may use an if condition to check if the reader is sensitive to it, followed by a linkreplace.

However, doing this multiple times can be exhaustive. It also likely requires you to copy the text twice, for both in the case the reader is sensitive, and the case they are not. This can be unwieldy if you have a lot of paragraphs or a big one. See example below.

Using the macro, however, you can shorten it to this:

Not only is this much more readable, it does not artificially inflate the word count of your game and take up space, and it is also much quicker to write!

And some other neat features...

Can section off only parts of a paragraph!

Content warning text is generated automatically, but can optionally be rewritten!

Content warnings only list sensitive topics relevant to the reader, even if that section has multiple other content warnings!

[night-market-if]

Hi there! I was wondering what language you code in / how you began your coding journey?

I do Twine Sugarcube 2. As for coding, I still have such problems with it. I want to tell a story and get wrapped up in that and then coding day hits and I'm banging my head against the desk. LOL! But I started my coding journey because I had to. When I randomly decided to start writing an IF I soon realized that if I wanted to self publish, I'd have to learn to code. So, I took the very basic html knowledge I learned in the 6th grade eons ago, and used that as my jumping point. Even almost two years in, I'm still actively learning. Youtube is instrumental for that.

[idrellegames]

Hi’ I have a question!!

So yk how you can add passages to the side bar with story caption? Well I did that but im not sure how to add those boxes that the SAVES and RESTART has

You're looking for StoryMenu, not StoryCaption. StoryCaption adds text to the sidebar, but StoryMenu will create an actual menu for things like links to character profiles, inventories, etc. This will give you the same boxes that the Saves and Restart buttons have. Text put in StoryMenu will only display if it is a link.

I'm not doing Twine tutorials anymore and I'm not really available to help with basic Twine coding. I highly encourage familiarizing yourself with the SugarCube documentation (linked above).

Otherwise, I do have free tutorials and links to Twine and SugarCube resources in my coding in Twine tag. I also have an in-depth SugarCube basics guide which covers questions like this on my Patreon.

[firstborn-if]

me when i remember that harlowe has coloured code and sugarcube doesn't.

[bejeweledlily]

need help in coding pronouns in sugarcube

when i am writing '$heshe' it keep writing 'she' even if i select male or NB pronoun. where am i going wrong?

[ramonag-if]

Hey! I'm new to Twine and I was wondering how you updated your game. Do you just upload a new html every time or do you use butler? If so, how do you use it?

Hi! Sorry for my late response. Yes, you will just upload the new HTML file each time 😊 That's the way I do it and the saves still carry through. If you're uploading a zipped folder (because of other game assets you're including), you'll still just update the HTML with the new HTML file within the zipped folder.