Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines
(3 edits)
The most common thing I want to do in Twine (I'm using Harlowe 2) is show a short block of text, then allow the user to click a word or phrase. When they do, I then want to use a (transition:"dissolve") effect to gracefully fade in a second block of text, which may itself include a clickable phrase, etc. If you try to do that just using all inline code, it works fine, but can be a little clunky. I thought I'd share the evolution of my approach in case others are trying to achieve the same thing.

In The Beginning, I used to use (click:) macros to specify my clickable hook, and then reveal the next bit of text, which was itself nested into a (transition:) macro, like this:



After a while, I realised you don't have to nest (transition:) inside (click:) like this. Using a Twine 2 feature called complex changers, you can just add them together, something like this:



It's better, but there's still a lot of words there which break up the flow when you're writing. The next thing I tried was to save the (transition:) macro into a variable rather than write it out in full. My passages now looked like this:



NB: The backslash at the end of the (set:) macro is to stop the line break at the end of that line from appearing in my passage as a blank line. This is one of two ways to stop errant whitespace from creeping in, I'll show the other one shortly.

Anyway, this is nice, but I eventually realised since I'm saving the transition effect into a variable, why not use complex changers again and save the whole thing into a variable? That now lets you do this:



Cool huh! The final step for me, and my current approach, is to take all those (set:) macros and move them into a passage of their own, which I tagged with startup. A passage with this special tag will be run automatically at the start of your game, meaning that those variables are always available without having to write out the (set:) statements every time you want to use them.



I've written out 5 of each here, I use 9 in The Pool and don't anticipate needing any more, since once you reveal 9 blocks of text, you have probably filled the screen and should move on to a new passage (at least, that's what I do in my story).

NB: Here you see the other way of hiding whitespace: I enclose my entire startup passage between {curly braces}, this causes all whitespace inside it to be hidden when it is displayed in Twine. I also use the (hook:) macro to create a changer, saved into the $ql... variables, which when applied to a hook gives that hook a name. I found this was cleaner in my story than using [hook nametags]<ql1|, your mileage may vary.

Code snippets for those who want to try my final approach:

startup tagged passage:
{
<!-- Set up quick links to use throughout story passages; put a ql before a hook you want to click and a qt before a passage you want it to reveal. -->
(set:$ql1 to (hook:"quicklink1"))
(set:$ql2 to (hook:"quicklink2"))
(set:$ql3 to (hook:"quicklink3"))
(set:$ql4 to (hook:"quicklink4"))
(set:$ql5 to (hook:"quicklink5"))
(set:$qt1 to (click:?quicklink1)+(transition:"dissolve"))
(set:$qt2 to (click:?quicklink2)+(transition:"dissolve"))
(set:$qt3 to (click:?quicklink3)+(transition:"dissolve"))
(set:$qt4 to (click:?quicklink4)+(transition:"dissolve"))
(set:$qt5 to (click:?quicklink5)+(transition:"dissolve"))
}
story passage:
You stand at the base of a tree. The trunk is broad, supporting many $ql1[low branches].$qt1[
The branches look look like they should be able to take your weight if you were to $ql2[climb] up them.]$qt2[
Up you go! You scuff a knee, but are still pretty proud of yourself by the time you reach the canopy.]