Hi! I'm jamming for the 1st time, and actually writing a game for the 1st time since forever - I think I last made one something like 15-20 years ago.

I'm using Twine to make a piece of interactive fiction about a woman who wakes up in an ambiguous facility, which seems to have only one member of staff. As this doctor? therapist? captor? walks her through her recovery, in the process she's exposed to memories. Some may be hers, some those of other women. Depending on her choices, she may go beyond remembering the lives of others and learn things which affect her relationship to the facility in the present

And the place where everything happens is the chamber in the centre of the facility: the Pool.

If people are interested, the first chapter is mostly done, including the first memory, and I should be able to put together a demo shortly.

Looking forward to seeing everyone else's work!

- Leethe

Started the second chapter today! So far the adventure has featured:

• Picking up Twine for the 1st time
• Figuring out the basic CSS needed to display background images and move text elements
• Nicking a code snippet to swap backgrounds based on passage tags
• Babby's first branching path! Even if it is just for one passage. But that's what I'm aiming for. For my first game, I don't want to write everything twice or more.

Chapter 1 in green. Chapter 2 (in progress) in blue. Initialisation, notes and snippets on the left.

When I figure it out, I think I can upload the green part as a demo...

lel i see cyberpunk and i come a-running

looking forward to playing this!

Text jumping in Twine with dissolve transitions is incredibly annoying! This cropped up in my game and I'm currently using two fixes to get around it in Harlowe 2.

1. Put leading spaces outside of the transition macro, not inside.

2. When you add some words within an existing paragraph, and the sentence you add would naturally break onto a new line, they will "jump" as they dissolve; first they all appear together starting on a new line, then that line is properly split across two.

If you're developing for a known window width, you can get around this by separating the words into two hooks, both with an attached transition macro. One hook contains the words which appear on the first line, the second the words appearing on the second line. Here's an example of a passage from The Pool where I've had to use this technique:

The lines inside the blue and green boxes both fade in with the same action - clicking the link "eight chambers" - but I've split them into two separate hooks, because a line break falls between "currently" and "using".

(Note that $fade here is a variable which I've set to a value of "(transition:"dissolve")" - it just saves on retyping the transition hook every time I need it, which is a lot!

This is also an example of (1), because as you can see I've left the " - " text outside of the transition macros, also the single space between the blue and green hooks.

Technically, I suppose, you could fix this for any width window by wrapping every word in its own individual transition macro, but that sounds like a nightmare. I'd rather drop dissolve transition effects entirely or find a way to do them in CSS instead of using Harlowe 2's built in macros.

For anyone else thinking of using changers to apply (transition:) macros to their revealed text, be aware: you can't do this with text in hidden hooks shown using the (show:) command. That is to say, this won't work:

You leap over the low wall and [roll]<link1| as you hit the ground.|attack)[
Drawing your blade as you roll, you come up with a darting slash to the knees]\
(click:?link1)[(show:?attack)+(transition:"dissolve")]

and neither will this:

You leap over the low wall and [roll]<link1| as you hit the ground.(transition:"dissolve")|attack)[
Drawing your blade as you roll, you come up with a darting slash to the knees]\
(click:?link1)[(show:?attack)]

You'll have to do this, which is back to the annoying nested macros:

You leap over the low wall and [roll]<link1| as you hit the ground.|attack)[(transition:"dissolve")[
Drawing your blade as you roll, you come up with a darting slash to the knees]]\
(click:?link1)[(show:?attack)]

So I prefer not using (show:) and sticking with displaying my new text directly within the hook of the (click:) macro wherever possible.

Harlowe 2's debugger can get in the way. And if you have a lot of variables, the rows crunch up until the text on them is unreadable. Here's some CSS hacks to work with the debugger while that's still a problem.

div.variables {
    position: fixed;
    top: 0px;
    bottom: 70%;
    left: 50%;
    right: 0px;
}
.variable-row {
    flex-shrink: 0;
}
tw-debugger {
    position: fixed;
    top: 0px;
    bottom: auto;
    left: 0px;
    right: 50%;
/*  display: none;   */
}
tw-debugger:hover {
    opacity: 0.5; 
}

In order, then:

div.variables {}

The code in this is anchoring the list of variables at the top right of the screen, and is keeping it restricted to the right 50% and the top 30% of the screen. This is because my fresh text is at the bottom of my screen, because my game scrolls from the bottom up. So I want the debugger up and out of the way.

.variable-row {flex-shrink: 0;}

The most important. This keeps the rows at a minimum height and stops them getting so squished they're unreadable. If there are too many to fit in the area of the screen I've allowed them, the scroll bar is already enabled and will let me scroll through.

tw-debugger {}

The variables are anchored at the top right, so the debugger (with the "DEBUG" control on it) is anchored to top left. Likewise it's prevented from reaching into the right 50% of the screen to keep it separate from the variable list.

I also have a commented out line here, if you uncomment "display: none;" the debugger will vanish entirely. Useful for when you want to use the debug feature to preview a page of your story without bothering to reset the starting passage.

tw-debugger:hover {opacity: 0.5;}

Whenever I mouse over any part of the debugger it fades to let me look behind it. This is 50% opacity, you can change as needed.

With all these on, here's what my debugger looks like while mousing over it. Note the scrollbar, I've scrolled down a bit to hide some spoilers! You can see some of my quicklinks code, which is what inspired me to figure out how to fix the row height problem on the variable list.

Summary

There seems to be a problem in Harlowe 2 where if you apply (text-style:"bold") to some text using (enchant:), you can't later remove it using (text-style:"none").

The second enchantment fails to overwrite the bold formatting, because it doesn't actually add a "font-weight: normal" attribute, so the text continues to inherit bold styling from the first enchantment.

Workaround

You can get around this by using (css:"font-weight: normal") in preference to (text-style:"none").

Reproduction of the problem and demonstration of fix

Paste this into a new Twine passage and run it:

[This is the text I will enchant.]<enchantme|
(link:"Make it bold red!")[(enchant:?enchantme, (text-style:"bold") + (text-colour:"red"))]
(link:"Make it normal again!")[(enchant:?enchantme, (text-style:"none") + (text-colour:"white"))]
(link:"Make it normal again, properly this time with CSS.")[(enchant:?enchantme, (css:"font-weight: normal") + (text-colour:"white"))]

The first link makes it bold and red; the second link makes it white again but leaves it bold.

You can see the issue in the inspector - this screenshot was taken after clicking the second link.

And this screenshot is taken after clicking the third link, correctly putting the text back to normal font weight.

I wanted a way to style my links differently, depending on things that happen in the story. I'd like to do this dynamically; that is, rather than have links in certain passages hard styled in their own way (which would be possible to do via tagged passages, as described in this excellent post by greyelf), I want to be able to look at the value of some variables, and then decide at the time the passage is displayed what colour I want its links to be. Even better if I can do this in a header, so it happens automatically for every passage in the game.

However there aren't easy ways to look from the CSS side of the fence into the structure of the story, especially into variable values. So I've used a trick with the (css:) macro to wrap the passage in a dummy style (which does nothing), but that dummy style is then picked up from CSS and used to override the colour of links.

In the passage you want to dynamically format links, you want to add a (css:) macro like this:

(enchant:?passage, (css:"custom_style_red;"))

This wraps the passage in a tw-enchantment element with the property style set to the value "custom_style_red;" as visible in the inspector:

Then, in CSS, you can catch it like this using a variation on my recommended CSS link formatting selectors:

tw-enchantment[style="custom_style_red;"] tw-link,
tw-enchantment[style="custom_style_red;"] .enchantment-link,
tw-enchantment[style="custom_style_red;"] .visited {
    color: red;
}
tw-enchantment[style="custom_style_red;"] .enchantment-link:hover, 
tw-enchantment[style="custom_style_red;"] tw-link:hover, 
tw-enchantment[style="custom_style_red;"] .visited:hover {
    color: yellow;
}

The first line here basically says "all tw-links contained within a tw-enchantment element whose property style is set to "custom_style_red;", and subsequent lines are similar.

That's it! Your links in that passage are now red.

If you have multiple custom styles and only want one unified hover style (say, white) for simplicity, you can just use a single block of CSS for all of them by changing your selectors to:

tw-enchantment[style^="custom"] .enchantment-link:hover,
tw-enchantment[style^="custom"] tw-link:hover,
tw-enchantment[style^="custom"] .visited:hover {
    color: white;
}

This catches style attributes which begin with the value "custom", so just be consistent and also make sure you're not colliding with any valid CSS.

When you click a link in Harlowe 2 the link goes away. Usually what you want. Sometimes annoying. A couple of times I've wanted to make a word clickable, and when the player clicks it, it changes to a new word, but remains clickable. Keep clicking it and it cycles around to new values.

There's already sort of published ways to do this, but it's complex and tricky involving auxillary passages which you sub in with (display:)

So I figured out a way to do it using Harlowe's built in (link-repeat:). Here it is:

At the start, I make an array of colours and set the index to 1. Then, when you click the link, I advance the index (using modulo arithmetic to loop around from 3 to 1) and replace the word.

The trick which makes it work is inside the link-repeat macro. Normally link-repeat just takes a string, when you then have no way to alter except by running a blanket (replace:) on all similar strings.

That would fail for this example. If the dress was "red" and you tried to (replace:"red")[green], you would also change part of the word "bored". And when you tried to change "green", you'd also change the later sentence to read "silver with envy".

So what I do is I smuggle a named hook inside the link by putting it all in quote marks. Now I can change the text of the link by changing the inside of the hook while still leaving the link intact to be cycled.

Here's the source:

{
<!-- Initialise range of colours -->
(set:$colours to (a:"red", "green", "silver"))
(set:$colour_index to 1)
(set:$colour to $colours's $colour_index)
}The dress is (link-repeat:"[$colour]<colourhook|")[{
<!-- Pick new colour, then replace description inside the link. -->
(set:$colour_index to (it % $colours's length) + 1)
(set:$colour to $colours's $colour_index)
(replace:?colourhook)[$colour]
}], you're bored, and you just know it'll make them green with envy. Wanna steal it?

(Please note: I absolutely do endorse stealing dresses. Be smart.)