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.
Tutorial: Coding Pronouns and Verbs in Twine SugarCube
I have seen in different places that people who start using Twine to write interactive fiction and are still unfamiliar with coding in it are struggling with how to code pronouns and verb forms.
This is an attempt at explaining different ways to code pronouns and singular vs. plural verb forms in Twine SugarCube specifically.
If you are using a different Twine story format like Harlowe, you can take inspiration from it but need to see how to transfer the code to your chosen story format. Each story format is coded differently. An explanation about that can be found in the tutorial if you are unfamiliar with the differences.
The tutorial itself is hosted on itch.io and is free to play in browser or you can choose to download the zip file. It's a Twine project itself so you can both see the code used, get an explanation on it, and then see what it does in action for yourself without having to create your own project to try it out.
The project features a dark and light mode as well as the option to increase font size.
The tutorial features different coding commands native to SugarCube, its Template API feature, and a custom macro bundle created by Chapel.
(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!
I have finally turned my fade to black transitions into a somewhat easy to use macro!! :) I am not sure if this has been done before!
Customizable fade times
Built to be compatible with backward and forward buttons (mostly!)
Works across all screen sizes
Note: This is only for SugarCube.
Setup
Copy and paste this Pastebin to your Story JavaScript.
Copy and paste this Pastebin to your Story Stylesheet.
Make a new passage titled exactly as "black_fade". Add the passage tag, "black-fade". Inside, write <div id="black"></div>. Super important! Copy below identically.
After this, your installment of the macro should be complete!
Usage
In the passages where you will be fading from and where you will be fading to, tag it as "passage-fade". For example, I want to transition from "p1" to "p2" with a black fade. Thus, both p1 and p2 should have the tag.
In the passage where you will be fading from, write <<fadestart>>.
Use the <<link>> macro to link to your destination. Inside the link macro, use <<passagefade "[passage name]" [fade time]>> where [passage name] is the passage you want to go to, and fade time is how long the black fade will be in miliseconds. (1000ms = 1s). However, do NOT put the passage you will be going to in the <> macro itself. See below:
Here, I want to go to the passage "p2". Do NOT write <<link "Next passage" "p2">><</link>>. Do not provide the destination passage in the link macro itself. The macro <<passagefade>> will handle it for you if you specify the passage name in the first argument.
Once you do all this, you should be able to sit back and happily use it as you please!
Problems?
Make sure you have the passage "black_fade" titled exactly like that.
Also make sure it has <div id="black"></div> and nothing more!
Make sure "black_fade" is tagged with "black-fade".
Make sure you used <<fadestart>> in the passage you are transitioning from.
Make sure you are correctly using the macro <<passagefade>>. You specify time in miliseconds; it should not have "ms" or "s" included in the argument. It should just be the number (e.g. 4000 for 4 seconds).
Make sure the passages you are fading from and to are tagged with "passage-fade".
There may be CSS/HTML that is interfering with the look of the fade!
There may be other JavaScript code interering with the current code.
If you are having problems, please let me take a look at your Stylesheet or let me know what template you are using! However, I highly recommend looking at the playable and downloadable demo.
(This macro is free to use, free to copy for all commercial and non-commercial projects with no additional fees. Credit is appreciated!)
hello, if its okay with you, could you explain how you achieved the following in twine: when you select an eye color, having the text change according to your choice. It seems simple but I can't seem to figure out. Any help would be appreciated!
You probably mean you want to do it in the same passage. I would be ecstatic to help!! I'll be putting it into a read-more because of pictures!
Also note, this tutorial assumes you're using SugarCube. I have very little knowledge of other Twine languages.
First of all, credit to HiEv because I got the base code from them! I just can't find what thread I found it in.
Code?
First—I've uploaded the EXACT passage for eye colors from the IF (even the writing is included...) to itch.io. I've made it restricted to avoid it clogging up my list of projects + notifying all my followers. However, you can play + download it there!
Link / Password: edelle008
Feel free to copy the code exactly, but in this post, I'll be explaining every single thing if you're still confused looking at the code.
Your Passage
Make a passage for where you want the radio buttons to appear. On that passage, have this code:
Red - Make sure to have a ((silently)) macro to not create unnecessary white space. I recommend to end ((silently)) immediately before your writing.
Orange - copy the code exactly (again, I highly recommend downloading the code off itch.io if you just want to copy and paste it!)
Yellow (no yellow on mobile editor...) - This is jQuery. It detects for any "changes" in a ((radiobutton)) macro in that passage. Make sure you don't have multiple radiobutton macros in the same passage.
Green - Replace #summary with the ID you're going to enclose your radio buttons in. If you don't know what I mean, this'll make more sense later.
Blue - When jQuery detects a change in the radio buttons in the passage, it's going to execute this widget called ((eye_color)), which I made solely to check and display different text for eye_color depending on what radio button is selected. Again, if this doesn't make sense, it will later.
So this where the actual radio buttons come. Please disregard the black strikethroughs, that's the code I used to organize the radio buttons into side by side columns.
I'm not covering how you do that here because the way I do it is incredibly scuffed, and only supports three radio buttons side by side. It also only looks good if the number of choices are the same on both sides. I don't want to teach you whatever won't work flexibly.
Above the red line, make a div and assign it an ID. I called my ID #summary, which is why in the previous screenshot, I made it so that the code updates whatever is inside a (span) or (div) with an ID of #summary. Hence, please change #summary into whatever you'd like!
Now you can also style any text within the (div) to anything you want in your Stylesheet.
Inside the div, I put the widget ((eye_color)). You can change this into any text you want to display initially, and it will be updated/written over once someone selects a radio button. The reason I let this stay as ((eye_color)) is so that it first shows the text for the first option, brown eye color (I do this by initializing $eye_color to "brown" in StoryInit, or else it might not show anything when you first look at it.)
Red - Below the red line, please add your radio buttons as normal. Again, disregard the black strikethroughs.
Widget
The reason I made a widget is so that it automatically checks and updates the text depending on the $eye_color variable, or any variable your radiobutton is changing. A widget is essentially a custom macro you make.
Make a separate passage (I called mine "eye_color" for consistency), tag it with "widget". You may copy the code below exactly as base (available for download on itch.io):
Here I made a widget called eye_color. You will enclose all the code inside this passage within the ((widget)) macro.
Yellow - I would use ((nobr)) macro from the beginning of the widget to the end to avoid unnecessary whitespace. This will put everything in one line unless you use (br) to force a line break.
Orange - I made a div for the entire text. The style="(code for transition)" is how there's going to be that transition between texts so it doesn't change it immediately, but gives it that slight fade in effect as it changes. Feel free to change the transition if you know how to. I assign it an ID of #text1 because I'm uncreative, but remember what ID you assign it.
Also, maybe you could test using (span) instead of (div). I don't know why I didn't, and haven't tried it.
Pink - In between the pink dashes, you will write your if statements. This is straightforward -- write an if statement for all the eye colors you want. The (div) for Orange ends when you use your closing ((if)).
Brown - The Orange makes the text have 0 opacity. What this does is make it have 1 opacity. In English, this means the text is originally invisible and this turns it visible.
Purple - Enclose Brown in a ((timed 0s))((/timed)). Usually, Orange and Brown are executed almost simultaneously; that leaves your text invisible. What Purple does is make Orange execute before Brown, so that Brown is able to make the text visible.
Test it
I hope it works for you! Let me know if you still have any questions.
