#twine coding

[loressa]

Succor devlog, decent amount of Twine coding examples in there

Succor 2025 update postmortem - Succor by Loressa, TostieTijger, Duck :V

WARNING! SPOILERS FOR THE GAME INCLUDED IN THIS POST! I'm quite excited to share this postmortem! I've finally returned to Succor, a game in

[celticshewolf]

Stat bars.

I will die an old woman still trying to code these to how I want them to look.

And my son will take up the mantle in my absence. Generations of my family will continue this legacy, all for a stat bar aesthetic that probably cannot even be done.

[cosmic-writes-novels]

HOW THE HECK DO YOU DO STATS !!! i have been on twime for a year and still dont know how lolol

I GOTCHU, ANON! it should be known that this is for SugarCube and in the story javascript section. i'll dissect it bit by bit.

$(document).on(':passagestart', function () { this says: every time a passage starts, do the stuff inside the curly braces {}

if (!$('#hud').length) { // build the HUD here }

$('#hud') means: look for something on the page with the ID hud

.length means: did we find one?

! means: if NOT

as a whole: if we don't see a HUD, we build one. now, as for building the HUD...

$('#menu-core').after(` means: take all this HTML stuff and stick it right below the menu

<div id="hud"> is finally our ID for the HUD. it's gonna be a box

<h3>Skills</h3> is our heading

<progress> makes a progress bar

id is the nickname we're giving to the variable, just like our HUD. max is the highest number, and value is the current number (and what it starts at)

and now, if we want to consistantly update the bars every time a variable's value bumps up or down:

$('#hud-strength').val(State.variables.strength || 0); $('#hud-dexterity').val(State.variables.dexterity || 0); $('#hud-intelligence').val(State.variables.intelligence || 0); $('#hud-charisma').val(State.variables.charisma || 0); $('#hud-wisdom').val(State.variables.wisdom || 0);

$('#hud-trust').val(State.variables.trust || 0); $('#hud-obedience').val(State.variables.obedience || 0);

let's take the strength one as an example:

$('#hud-strength') is the ID we previously mentioned

.val means: set its value to something

State.variables.strength is the part that gets touched whenever you set a variable to something. like, <<set $strength = 50>>

|| 0 means: if there's nothing yet, just use 0

as a whole, we have:

and if you wanna go into customization and making it look pretty in the stylesheet, you just need #hud! i hope this makes sense? feel free to DM me if you want the template

[celticshewolf]

Sometimes I like to pretend I'm Mr Robot

[celticshewolf]

I spent so much time coding earlier today, mostly aesthetics that I just couldn't get right for hours. My brain was so overstimulated looking at all the lines of code, so I took a few hours break, had a wee cuppa tea, and then filled a notebook with some more world building.

I went a bit too far down the rabbit hole and fleshed out a couple of characters who weren't supposed to be that deep - to the point that even one of their granny's got a backstory that will probably never come up 😂

I keep being tempted to make a post announcing my story, but I have been adamant from the initial idea that I won't do that until I have at least a chapter or 2 done, something solid to show for it.

But I'm so excited about the ideas I'm having and learning to code, that every time I'm happy with a passage, a choice, or even getting a line of code I've been struggling with to work that I just want to talk about it with someone.

So I come to you Tumblr, because my kid isn't interested in anything that isn't Titanic or Lego related, and I don't have anyone else to let my little bubbles of excitement out to.

Go raibh maith agat Tumblr, even if I still don't really understand how to use you after 14 years 😂

[celticshewolf]

I'm making more progress on my story.

It is set in Regency era England, which I thought my love of all things Austen would help with, but in actuality I'm struggling with towns and places and forms of address because I'm Irish and apparently geographically challenged.

But, I've implemented some stats, put together a simple character creation screen (the MC is genderlocked female, sorry I know a lot of people hate this but it fits with the story better and is less overwhelming for a noob like me), and plotted out the three main routes.

Hopefully I haven't bitten off more than I can chew.

I should have played to my strengths and had the MC marry a potato, I know my way around a spud.

[celticshewolf]

So I'm making my first project with Sugarcube on Twine. I have zero coding experience or knowledge, and have managed to add a prologue, complete with a few customisations and various text colours, fonts, styles, etc. So I'm learning a lot, but also cycling through stages of being really proud of myself and utterly confused.

One thing I haven't tackled yet is pronouns, as I haven't a clue how to do it yet. I read there's a template you can download but my autistic arse is not understanding the many webpages explaining how to do this, not for the first time 😂

Has anyone any useful tips for a Twine beginner? The more specific and step by stepy, the better 😁

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