#coding in twine

[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.

[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.

[ruesartdumping]

since i messed up my wrist and cant draw decided to finally learn twine. if yall have any tips or advice ill take em!

[parallaxgames]

The Workspace in Progress (WIP) <3

[manonamora-if]

1(bis)/also-part-of-4 use Tweego not Twine :P

The web version is really convenient and easy to use, but has a ton of issue when it comes to saving. It's great to start out and to quickly test/check something. But if you can install things on your device of choice, I highly recommend using the app at the very least.

If you cannot install the Twine App on your device, ALWAYS PUBLISH TO FILE/CREATE A BACK UP! (before you start, at different interval while you work on it, AND before you close the program)

How to Keep Your Twine Project Safe

It is a tale as old as time. The app crashes, your cache is cleared, your laptop breaks, and hours or days or weeks of work is lost. It's a terrible experience, and you never think about what to do in that situation until it happens to you- and by that time, it's already too late. So here's your prompt to get ahead of things and keep your project protected before something goes wrong.

So here, I'll be going over some layers of security you can use...

1. NEVER use the web app

I know this one's gonna be controversial. I know, a lot of people use the web app! It exists for a reason! But if you do, you're leaving your work very vulnerable.

When you use a local installation of Twine, your files are being saved to local storage. That means that everything is saved on your hardware, and with the exception of a freak event, it's not going anywhere. Don't get me wrong, those freak events aren't rare enough to dismiss (we'll talk about that later), but it's not quite as bad as the web app.

Instead of saving your files locally, the web app saves your progress to your browser's cache- the same thing that saves your cookies and keeps you logged in on websites. If your cache is cleared for any reason, your games will be gone.

2. Write your documents in a separate program

Chances are, if you're using Twine, there's a lot of stuff you can do outside of Twine before moving it into the program itself. A common practice is to write prose in a separate program, and then move it all into Twine when you're finished and write the code in Twine. This is a great way to back up your work, because if Twine has an error, you'll still have all the source files to reconstruct what you had before.

I'd recommend trying to use a stable program to write in. That means something that saves locally and doesn't frequently crash. In other words, do not use Google Docs. Instead of Docs, try one of these:

Microsoft Word (expensive, subscription, but stable)

LibreOffice (free, stable)

Scrivener (one time purchase, stable)

3. Back EVERYTHING up

I can not stress this enough. Back up your damn work. Back it up in multiple places if possible.

"Oh, but I'm using Google Docs, it's already backed up!" NO. No it is not. To keep your work truly safe, you need multiple copies hosted on multiple pieces of hardware. If one of those is a Google server, great! But if it's just one, that means that one single failure in that hardware (or the software associated) will mean everything is lost.

You can back up your files from the Twine program by going under the Build tab and selecting Publish to File or Export as Twee. Saving that to your device is already better than having it saved by the Twine app, but you'll be even safer if you back that file up to an external hard drive (or just a cheap USB drive) and a cloud hosting service like Dropbox or Google Drive. To make it extra safe and minimize lost progress, make sure you replace these files regularly.

That seems like a lot of work though, right? Yeah. So here's my final piece of advice...

4. Use Git

Git is how I've been backing up my latest project, Signal Hill. It's intimidating at first, but there are simple and easy ways to use platforms like Github to keep your work safe and fix big errors. To teach you how, I've created a whole separate tutorial, which you can find here.

[fluorescent-if]

| DEMO | RO INTROS |

| pinterest | playlists |

Welcome back to Misty Cove!

Your hometown that holds all of your best memories from childhood. Days where you spent all of your time with friends, exploring and playing. The most notable thing about both you and your hometown however, is what started happening in your teenage years. After you and your friends uncovered a mystery about the high school you all went to, you starting finding more odd occurrences across the county, and well, it's not like anybody else was going to solve them.

You and your friends because a team of detectives. Most your teenage years and early twenties were spent solving odd crimes across the country. You were all best friends.

That was until four years ago when...

Well, you're not sure you can remember anymore.

It doesn't matter right now. Welcome back.

'Return to Misty Cove' is a horror/mystery Interactive Fiction game that is inspired by Scooby-Doo, Soul Reaver, and the works of H.P. Lovecraft. This work will be rated 17+ for gore, violence, swearing, death, body horror, and possession that might not be suitable for everyone.

Customize your MC's appearance (gender, height, body type, ect.) develop their personality and become the linchpin of your mystery solving team.

Find out more and possibly solve the mystery that has been haunting your hometown.

Rekindle, or destroy old friendships (and maybe develop romances) with your former team, and meet others along the way.

Have an animal companion! (dog or cat)

Major Characters

Cameron "Cam" Morris (M/F) [RO]- Tech-savvy and mechanically minded, Cam is currently working as a mechanic after you and your group broke up, they are currently going to grad school for mechanical engineering, and still sends postcards and pictures to you. They are likely the sweetest person you have ever met, even if sometimes they are too kind to people who don't deserve it. Out of the four of you, Cam was always the one who needed to do what was right, no matter the cost, and even if what they thought was right at the time hurt in the long run.

Ollie Cohen-Reyes (NB) [RO]- Ollie has always been interested in macabre and strange, spending hours researching in the library any and every topic they were interested in. They get along with very few people, but once they are able to get close with others it becomes easier, and they become sarcastic and witty, and feel less uncomfortable talking about their interests freely. They work as an adjunct professor in forensic anthropology.

Rose/Rory Thompson(M/F) [RO]- They are a loyal person, first and foremost. When the group broke up they somewhat lost their purpose, but they ended up settling and working as a bartender in Misty Cove. Having taken boxing and self-defense classes from a young age due to their paranoid parents, R was always the best when it came to physical confrontation with the cases you investigated, even if outside of this they never seemed like someone who had that much power. They have become far more aggressive and assertive than the person you knew as a child, now having the attitude to match their technical know-how.

Terra Clarke (F) [RO]- You originally knew her by a different name, but she started transitioning early on life, and Terra is the only name you can remember now. Normally when you say it it's followed by a nasty comment. Terra was never someone you got along with when you lived in Misty Cove. She was antagonistic towards you and your friends, but a lot has changed since the last time you saw her. She now owns her Grandpa's diner, and tries to take good care of the people of the town, especially since the mayor won't do much. She is always exhausted now, but is very happy to see a familiar face, even if your history is muddied because of both of your actions.

Randall 'Randy' Clarke - Terra's grandfather and former owner of "Randy's Diner" always very kind to you and your friends, even if you all never got along with Terra. He has been running his diner since the 60's and has faith that his granddaughter will uphold the legacy.

Ana Lloyd - (An-uh) the mayor of the town of Misty Cove. Trying to "restore the former glory of the town" as if she didn't move here less than 2 years ago, and was the only person who ran when the former mayor died while in office. She has been selling some of the old public spaces to business developers as a way to "expand the town and bring in new people".

Mrs. Ms. Emerson Talbot- Your former English teacher from high school, you never got along with her that well. She, now in her 70's has only gotten more bitter. You just hope she doesn't hold grudges.

Dorothy Giles- Your co-worker, likely the only one in your office who has a soul anymore. A woman who would go to the ends of the earth to protect the people she cares about, even if those people are just 20-somethings that she has taken under her wing.

(Things are subject to change throughout the games development)

[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!

[manonamora-if]

I realised today I never posted about it here so yeah...

This was a long time coming, so here we are.

Hello person of the internet,

It's ME again! your totally legit supplier of super duper good assets (100% GOOD!!!! NO BUGS AT ALL!!!}. I am back b-back BACK again with a pretty useful file for you! AND A NEW KIND OF FILE!!

Still scam free, still without a single bug, still easy-to-use and to include in your project! What are YOU waiting FOR?!

Download another funky file to make your HARLOWE project run EVEN BETTER!!! In exchange of.... nothing! {YES, THIS IS STILL 100% FREE!!!} or maybe your love and adoration for this little help...

WHAT A STEAL!

Were you looking to customise your Harlowe project?

I PRESENT TO YOU THE...

The Save and Settings All-In-One!

All-In-One because it is both a Template for Save Systems and Settings AND a Guide! Covering different ways of creating saves and settings, as well as ensuring the settings stick between play-sessions.

And, the code is annotated in the relevant passages, StyleSheet and JavaScript code, on top of the Guide.

ENJOY!!!

GITHUB REPO | RATE THE TEMPLATE | TWINE RESOURCES

[oregano-no]

GUYSS I'M REFRESHING THE PROJECT AND BRINGING BACK THE VATICAN

Va†ican

In this Horror/Romance IF you play as a paranormal investigator. Set in the 1980's, after a series of unfortunate events you unexpectedly get wrapped up in the dubious affairs of a seemingly cursed rock band known as the Va†ican. Will you be able to save the band and all of the west coast from themselves?

†FEATURES†

†Fully customizable MC Including†

• Pronouns (She/Her, He/Him, They/Them with the ability to customize pronouns to include secondary and/or Neo-pronouns)

• Appearance (Height, Body Type, Facial Features, Skin Color, Eye Color, Skin markings and Hair Color/Length/Texture)

• Background/Origin

• Personality

†Fall in love! or don't.†

†Enjoy the eighties... and being hunted by demons.†

CONTENT WARNINGS

The Va†ican is intended for mature audiences as it will include: Strong language, Use of Alcohol/Drugs, Intense Violence, Sexual Themes, Mentions of Religious Trauma, Gore, Potentially Mental Health related topics and eventually completely optional Sexual Content.

THE BAND

†Pontifex†

-

Stevie St. Cloud

He/Him|24|

-

Lead Vocals, Guitarist & Frontman

-

He's famous, and he LOVES that people know his name. He's brash, loud mouthed and full of himself to the point that it's almost annoying; but he is also the quintessential rockstar. He's ambitious, and has a stage presence thats undeniably breathtaking.

Stevie doesn't like to talk about himself outside of his stage persona and the only thing anyone is able to verify about his past is that he attended boarding school and roomed with Ezra who is his best friend to this day.

Stevie is an avid smoker and even though his 12 step program forbids it he also indulges in more than a bit of alcohol from time to time.

Stevie is dedicated to his work, often saying he'd give his life for the band... that he did give his life to the Vatican. He is charming and cunning; However, He also is a bit of a big personality, has a tendency to tell jokes at inappropriate times and is slightly narcissistic.

-

†Appearance†

He's tall, around 6'4 and very lanky; his proportions as far as torso/leg are honestly pretty even. Stevie is just long. He is relatively pale and has fairly clear skin, the only beauty mark being a small one under his right eye. Stevie has very well defined facial features that make him easy to spot in a crowd, some would say impossible to miss. He has a strong jawline and defined cheekbones. His nose is on the larger side and is grecian in shape, he has doll like lips with a prominent cupids bow. His eyes are a deep brownish green and have a slight droop to their corners. His eyes are framed by thick black lashes and slightly thicker than average arched brows.

Stevie wears his hair to his shoulders, it is wild and poorly layered almost like he did it at home (Vinny cuts it); He currently has loose bangs, kept either parted down the middle or not at all that frame his face quite well. It is black in color though he does keep a poorly bleached strip of hair somewhere within it.

†Deacon†

-

Ezra Rogers

-

He/Him|23|

-

Lead Guitarist

-

A bit less enthusiastic about the life that he lives then Stevie; Ezra is more comfortable partying by himself then with others and at times has trouble getting up on stage to perform.

Ezra is Stevie's best friend and others in the band often joke that Ezra would kill for him.

Cold, distant and sarcastic; Ezra Rogers is less stereotypical rocker and more-so tired dad friend. Doesn't indulge in the kind of things that the other boys are interested in quite as often, only drinking on occasion and never smoking or using party drugs.

Ezra is a bit of a control freak, has a tendency to be harsh in his words and from time to time is a bit judgemental.

He wants the best for the band but usually ends up going along with Stevie's hair-brained schemes even though he thinks that they're bad ideas 100% of the time.

-

†Appearance†

He's about 5'9, a little broader than Stevie though he's still on the thin side.

He has warm tanned olive toned skin that is clear of blemishes, deep-set eyes that are nearly black in color. Ezra has a broad nose with a slightly shallow nasal bridge, he has plump lips which don't really have a strong cupids bow.

He has dark, near permanently furrowed brows which almost make him look intimidating.

Ezra wears his hair a little differently than the other guys, as he's the only one who keeps his hair somewhat short.

His hair is both naturally black and naturally straight and he wears it in what would be considered a wolfcut, the longest strands reaching the nape of his neck.

He has a couple tattoos the biggest of which is on his left shoulder, an Ouroboros; The bands most frequently used logo with an intricate amount of detail and a delicate looking sunburst design around it.

†Bishop†

-

Vincent "Vinny" Fratelli

-

He/Him|21|

-

Bassist & Background Vocals

-

One word. Scrapper. This man has a temper and it often gets him and the rest of the Vatican in trouble. Vinny is not above swinging on someone in the crowd for heckling— whether thats with his fist or his bass? depends on the day.

Outside of his temper he's also got the capacity to be a sweetheart, he's charming and one hundred percent knows how to get a crowd worked up when he's not crowd surfing to get at some ass in the back.

Vincent, like Stevie has a bit of a drinking problem and has been known to indulge in coke every once in awhile. Its a sad habit that he's been trying to kick for a long time but he's struggling.

He grew up in a rough neighborhood and had been through a lot already before he joined the band at 19, and thought that the Vatican was his escape from all of that; So all of the shit thats been going on recently has been a bit much for him.

-

†Appearance†

He's 6'1, with a swimmers build (though he actually never learned how to swim). He is fairly light skinned and speckled with light acne scarring and beauty marks, a few litter his face but his body is absolutely covered in them; as well as tattoos. A few of his tats have meaning, like the Ouroboros (its a super simple version of the logo compared to Ezra's) but most of his tattoos are just meaningless little pieces he thought were cool or that the artist picked out for him.

Vincent has a strong jaw and plush lips that are perpetually slightly down-turned, Vinny's nose has quite obviously been broken more than a few times and has a slight but obvious crook to the right. His eyes are sharp and dark blue, paired with his constantly drawn down brows the man always looks pissed. That is until he smiles and then his face lights up and everything about him seemingly changes... he looks almost angelic.

His hair is a wild mess of bleach blonde strands hanging down to his shoulder blades, with dark roots peaking out of his scalp and in typical rocker fashion is almost constantly stiff with hairspray.

†Cardinal†

-

Arthur "Ace" Bennington

-

He/Him|19|

-

Drummer

-

Literal ball of sunshine, Ace is constantly in motion and constantly smiling; the other boys often scold him for not having a 'rocker' persona. He literally can't help it though, he's just so damn happy to be here.

He's excitable, compassionate and honestly very funny but he also has the tendency to be a bit naive, childish and sort of overly intense.

Ace also has a habit to overuse curse words when he's excited, which is almost all of the time.

As the youngest in the group he often feels like the other guys are trying to parent him and seeing as he grew up in and out of foster homes it sort of bothers him at times...

He ultimately sees the boys as older brothers though and has never said anything about it for the fear of hurting their feelings.

-

†Appearance†

The shortest of the group, Ace is 5'6 and has a relatively small frame as well. He is slightly tanned and covered head to toe in little freckles. Arthur's nose has a slight hook to it and his eyes are heavy-lidded and light brown. He has a thinner upper lip than his top, which is relatively plump.

He also has the most heavenly smile to ever be seen. He has a large scar from below his right eye, down through his lips and to his chin from an accident when he was a kid he hasn't even told the other guys about. Ace has his left nostril pierced (Vinny did it) and usually wears a simple stud.

His hair is an voluminous mess of curls that fall down to his shoulders and is currently a odd shade of muddled brown/blonde that he's gotten quite a bit of flack from the media for. (Vinny did it.)

†Vicar†

-

Julian 'Jules' Lennox

-

He/Him|21|

-

Rhythm Guitar & Background Vocals

-

The most promiscuous of the group, this man is the one the camera pans to during a live performance and he looks like he's about to make love to the crowd.

Jules is often late to rehearsals because he's 'busy' with a 'friend' but he's good at what he does and so Stevie keeps him around anyways.

Julian has a habit of being a bit self involved, he is passive aggressive at times and is a tad melodramatic.

However he has good intentions in everything he does, is very intelligent/talented and underneath it all very hard-working.

Jules suffers quite a bit with his mental health from time to time and is prone to depressive episodes that he forces himself to work through due to his fear of disappointing the others and being replaced.

-

†Appearance†

Julian is 5'10 and a bit more muscular than the other guys, though not by much. His skin is glowy and has a healthy tan to it and he has a light spattering of freckles. He is frequently referred to as the bands 'pretty boy' and often gets made of for looking 'feminine'.

This just means he has a more regal face then what most people think of when they hear the word 'rockstar'. Jules's nose is on the larger side and perfectly straight and statuesque, he has pale blue 'doe eyes' and plump doll-like lips.

His hair is rarely actually styled and is slightly wavey, hanging down to his mid back and is currently dyed a deep crimson red (he did it himself) and it looks very nice.

[idrellegames]

As an IF author that does this with a "this is my job" mindset I find it hard to do other things in my day to day because whenever I pick up my phone I feel like I am at work and I feel like I constantly think about my story.

Do you have any tips or advice on how to separate myself from my work and stop thinking about it 24/7?

Thank you!

Having a clear division between work and regular life is really important. I think it can be a little harder to do if developing an IF isn't your full-time gig. If you're working a job or are in school and you're packing IF development on top of it, then it can get really tricky to balance.

I also think that if you're working on a large, long-term project, it's a good and normal part of the writing process to think a lot about your story. Not all writing is done when you are actively writing. Daydreaming about your characters and your story lets you work out different kinks and make new discoveries.

So, you have a couple of choices here. You can reframe IF as your hobby, the thing you do in your free time for fun. Take away the pressure of thinking about it like work. You can pick away at it when the mood strikes, write on your own terms, and if you stop having fun with it, it's okay to slam on the breaks and put it aside until you're ready to come back to it.

But if you want to continue treating it as work or if it is already is your job, then you need to set some boundaries for yourself. This is going to be different for everyone; what works for me might not necessarily work for you. But here are a few things you can try:

Set a schedule. Try to contain the times when you are actively working on your project to within certain regular hours. Set different times for different parts of your job. For example, I only do social media management (tumblr inbox and notifications, Patreon, email, itch etc) during the first couple hours of my morning and then the rest of my work day is for writing and/or coding. I don't get through everything, but it's okay. It's really important for online creators not to fall into the trap of feeling like they have to answer everyone immediately, otherwise you will not get anything done.

If you manage social media for your IF, have separate accounts for your personal stuff and work stuff. I have two tumblr accounts, one that manages this sideblog and the other for personal fandom things. Logging out of my work account and into my personal one means that I'm not seeing notifications from this blog and I'm not tracking Wayfarer stuff. It really helps me keep work as work and downtime as downtime.

Separate your work and downtime spaces. Sometimes it's just as simple as working in one room and relaxing in another. This can be a bit tricky if you only have one device that you work from. I have a PC so I can't move it around, so if I'm using it to game later I try to change up my space (by getting a different chair or changing something else about my set up) so I have some kind of physical difference to trick my brain into going from "work mode" to "relax mode". Sometimes I have to get out of my office entirely in order to get that sense of separation, otherwise I feel like I am constantly at work.

If you're on your phone a lot and you don't really use it to make your IF or have alternatives for writing, get rid of the apps that put you in a work headspace. I got rid of the tumblr mobile app a couple years ago and it was probably the best decision in terms of actually keeping me out of work mode.

Take time off. Give yourself a weekend. Pursue other hobbies, play other games, write things other than your IF. IFs take a very long time to make, you can't go at it 24/7 or you will burn out.

[larkingame]

hi :) my video about how toxic the coding community can be online is up and ready to go! i worked really hard on it so I hope you give it a watch!

also, i've attached it i the description, but if you're looking to learn to code, or develop a text-based game, I've compiled this list of resources here!

[loveandleases]

Little look at the ui

Honestly I kept going back and forth on what template to use, I easily changed it 5 or more times. Finally settling on one. The template is created by Vahnya. I highly suggest checking it out, it's easily customizable.

I want the character menu's to represent your choice of gender for the Ro's. So here is a little look below at M's profile. (I'm debating allowing players to choose a nickname for Ro's and letting that show on the page. ) Sneaky Peek below~

[esper-game]

Monthly Update (7th April 2024)

Helllllo everyone!!! I didn't do as much work as I would have like last month, but I've been chipping away at it and recently had some more time to actually sit down and write.

WHAT I DID:

Chapter Two's word count is now at 10.6k!

The characters page is actually finished,,,, I just need to beautify it :)

GOALS FOR THIS MONTH:

Hopefully finish off the first half of chapter two

And get editing started on it

NOTES:

Here's a little screenshot of some particularly horrendous coding :')

(VERY minor spoilers maybe)

And there's more underneath!

Sometimes I ask myself why I do these things, but I seriously think it's worth it to ensure an immersive experience :)

And this isn't exactly complicated, more just time consuming lol

[tales-of-wocdes]

playing the demo and I looked beside me to see my cat loafing and immediately went "MC coded." How? I do not know. I just kno.

Already imagining MC loafing around in some garden, demanding headpats from people passing by (this could easily be a dog-energy as well)... Now hissing at people who try to take them away from the sun, or maybe just coming too close... That could be dog energy too, except with growling... I suppose the real "cat-energy" move would be switching to hissing in the middle of a headpat...

People (Lexia and the twins) trying to lure them closer with snacks...

The twins eating the snacks.... Or Lexia eating the snacks....

Damn it, I may have to add a scene to my notes...

Thanks for sharing! The people who are confused about what I am on about, see previous post :D

[blood-teeth]

everyone say thank u @lapinlunaire-games for creating such a cuntie and delicious theme <3 <3 <3

[manonamora-if]

Other way to remove the UI sidebar:

UIBar.destroy()

Note: adding anything in the StoryInterface Passage will remove everything from the page. You will need to build the page from scratch in the HTML**. You can find the Built-In HTML for SugarCube here.

**this doesn't apply to the UI-Dialog box class. But anything starting from ui-bar is deleted.

Hey, so I had a question about Twine, sugarcube specifically, the ui of Foundations is pretty cool imo and was curious about how you were able to get it the way you did and wanted to know if you'd be okay giving an explanation as to how if it isn't any trouble and you're comfortable sharing it.

I personally have been using W3schools to learn about editing the margins and border radius which I've got a bit of a good grasp on, but have been having issues with getting rid of the toggle collapse and moving the position of the sidebar itself, which is my main concern rn.

Hey, no problem, I'll absolutely explain for you!

First of all, there are a couple ways to do the things you're mentioning. If you want to remove the sidebar or the toggle button (or any element, really) you can do that with a bit of Javascript. For example, you can use this bit of code to remove the toggle to open and close the sidebar:

$('#ui-bar-toggle').remove();

Or this bit of code to remove the sidebar entirely:

$('#ui-bar').remove(); $(document.head).find('#style-ui-bar').remove();

Of course, if you want to not only remove them but replace them with something else, you'll need to do a bit of extra work. There have been people who have tried to move all the contents into a header bar, but it's probably easiest to just scrap everything and start over. That's how I created my UI.

To do this, create a passage entitled "StoryInterface." As soon as you create that passage, Twine will throw all of its default stuff out the window and whatever HTML you put in there will replace it. The only necessary component is having a div with the ID "passages," otherwise the passages themselves won't be able to render and there will be an error.

From there, you can build it up as needed. It's important to note that StoryInterface can ONLY include HTML. No Twine code or anything, just pure HTML.

I'll go a bit more in depth with the Foundations UI and how it's created below the cut, cause it might get a bit lengthy:

That's the StoryInterface passage for Foundations. It includes an overall container and three flexboxes inside of it- the passages, the sidebar on the left, and the icon tray on the right. The CSS determines how large each flexbox is, where it is in the order, and what it looks like.

Notice how the tray element also includes "data-passage='IconTray'"? That essentially creates the same sort of special passage as StoryMenu, allowing you to add things like Twine code inside of it that will be rendered as part of the UI.

That's the StoryMenu passage, which renders all of the things on the left sidebar. Normally you would use this to add extra code into the default Twine sidebar, but here I've used it to add all of the normal sidebar components back in. The links trigger Sugarcube's UI API, which means when you press the "saves" button, the normal saves dialogue pops up (same with restart and settings). The arrows at the end use the Engine API to bring the player forward and backward.

It seems a bit intimidating, but when you break it down like that, it's actually pretty simple! To do something like a little header menu, you'd probably only need a few elements. The hard part is the styling- most of the time making that consisted of adjusting something by a few values, loading the game, and then adjusting it again until it looked just right.

I'd highly recommend, if you're a very visual person like I am, making a screen on paper or on an art program and drawing on elements where you think they should go. Sketching out my UI ahead of time changed the process from creating a UI to solving a puzzle- I wasn't trying to come up with things on the fly, I was trying to figure out what needed to be changed to create my vision.

(Also, just a note if you plan on doing this- always use percentages or vh/vw rther than pixel measurements when you can! Will seriously save you a headache when trying to make everything mobile-friendly.)