Squiffy Notes

I've got my eye on eventually making a major text game, which necessitates that I create a few minor and middling text games first. I'm not yet sure if I'll be using Squiffy (more like a story) or Inform 7 (more like an adventure), but it would be good to get familiar with both. This file is for me to take notes, whereby to later turn them into useful tutorials (maybe, if I get around to it, and/or get to procrastinating on other projects as I am right now).


Squiffy uses HTML and Javascript. That means that you can format the text just like regular HTML (including CSS), and host it like a regular webpage, accessible to anyone who has Javascript enabled. So that's handy.

Sections and Passages

You set up the Sections, and the Passages within them, using [Square Brackets]. Passages take [single brackets], while Sections take [[double brackets]] and deactivate all previous links. Section names must be unique.

You could look at the [strawberries](opt1) or [dragonfruit](opt2), or just move on to the [[living room]]. [opt1]: The strawberries look delicious. [opt2]: The dragonfruit looks weird. [[living room]]: Now you're in the living room.

If you'd like to clear the screen, use @clear:

[[Chapter 2]]: @clear I woke up in the alleyway, drenched, and with a splitting headache, and (it turned out) no wallet.

Turn Counting

By using [@n], where n is a number, you can show the passage of time. By combining that with a little Javascript, you can force the story to move forward, eliminating options that the player previously had available.

(some options and stuff to click on / explore) [@1]: One turn has passed; this message shows up. [@2]: Two turns have passed; this message shows up. [@3]: squiffy.story.go("crash"); [[crash]]: You have just crashed the car by paying attention to a text game.

You can also use [@last] to do something after you've clicked all the links:

Look at all these dishes left to wash! There's [plates] and [cups] and [silverware]. [plates]: You scrub those plates. [cups]: You wash out every cup. [silverware]: You get through all the silverware. [@last]: The chef walks in just as you're finishing up.


If you want to keep track of variables, you can do that! Just use @set (numbers will be numbers; other things will be strings), or use @inc and @dec to increase or decrease by 1 (or by other amounts, if you specify).

@set gender = male @dec health 2 @inc score 8

Booleans (true/false) get set like this:

@set has_coat @unset has_money @set met_guarddog @set bruised @set not clean_clothes

You can set attributes via links, to record choices (or their consequences); you can also set values via Javascript, or in an if clause:

Do you join the [[Horde]](start, team=horde) or the [[Great Rebellion]](start, team=rebel)? [[start]]: {if team=Horde:Hordak welcomes you to his ranks.}{else:Bo takes you deep into the Whispering Woods.} Once you arrive, you say you're proud to be a member of the {team}!

You can compare values thusly:

Attribute A and Attribute B are {if a=@b:equals}{else:different}.