haunting-twine

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<img src="https://clogosphere.neocities.org/if/hh/ghost1.gif" width="200" height="200"> <h1> Haunting your Twine </h1>Below you'll find examples of tricks with CSS, HTML, and a variety of Sugarcube interactive options (known as macros) that support expressive choice, visual and time-based narrative design! After checking out examples, download this Twine to access the code directly and remix for purposes of your own storytelling. To Save this Twine --right-click, or ctrl-click to Save As. You can then import the downloaded HTML file into twinery.org with the Import option in your Library tab <ul> <li>[[Text Box]]</li> <li>[[Cycle]]</li> <li>[[Cycle for Suspense]]</li> <li>[[Cycle with Images]]</li> <li>[[Either]]</li> <li>[[Type]]</li> <li>[[Link Append]]</li> <li>[[Link Replace]]</li> <li>[[Timed]]</li> <li>[[Timed Replace]]</li> <li>[[GoTo Nested with Timed|GoTo]]</li> <li>[[Time Constraint]]</li> <li>[[Invisible]]</li> <li>[[Change Color of Select Words]]</li> <li>[[Images in Twine]]</li> </ul>

TEXT Box invites subjective / expressive input from the reader. As Clara Fernandez-Vara suggests "This kind of choice doesn't really have consequences in the system, but it makes the players feel like they're in control and they can be themselves." In the example below it is paired with link to advance to a new passage where the text can be displayed using the variable within the coding: Example: In your opinion, what is the most scary monster? <<textbox "$scary" "" "text-demo">> When you have entered your description hit enter or return, and you will arrive at a new passage (specified behind-the-scenes) that uses the word you typed in!

Use EITHER to randomize outcomes for the reader. In the example below the contents of the hearty bowl vary randomly each time you visit this passage. Before going ghost hunting, you make sure to eat a hearty bowl of <<print either("ice cream", "oatmeal", "beef stew", "soup", "cereal","kale salad")>> [[index]]

TYPE -- Simulates a typewriter, offering one way of pacing arrival of text on the screen. Change the number next to "type" in milliseconds (ms). You can also add a delayed start <<type 50ms>> You walk slowly down the hallway <</type>> <<type 20ms start 2s>> You walk fast down the hallway <</type>> [[index]]

Link Append -- single use link adds text after keyword. Use this to invite/provoke further participation from reader to advance the story Example You look into the <<linkappend "crystal ball" t8n>>. It shows you your [[future|index]]<</linkappend>>

The goto macro goes to a passage you indicate in the code, as soon as Twine encounters it! Nesting a goto within a timed macro allows you to introduce a delay -- and create sudden changes, like a jump scare in a horror movie! In [[this linked example|goto2]] there will be a 4 second delay and then Twine will automatically go back to the index

Strategic use of CSS on colors of text, background, link states in Stylesheet (and corresponding tags) allows some fun opportunities too: You sense that [[something invisible|index]] is watching you!

Link Replace -- single-use link deactivates itself and replaces its link text with the hidden contents when clicked. Example: You <<linkreplace "try to find your way out">> notice [[an exit sign|index]]<</linkreplace>>

Delay display of text and/or images in 2 second intervals three times (at: 2s, 4s, 6s, 8s) <<timed 2s>>Oh No... <<next>>It's... <<next>>IT'S... <<next>> ALIVE!! <</timed>> [[index]]

TIMED REPLACE -- Replace text after specified duration of time has passed. In this example, 7 seconds elapse before the adjective is replaced You prefer evil ghosts\ <<timed 7s>><<replace "#evil">>friendly<</replace>><</timed>> [[index]]

This HTML Span tag allows you to change the color of a specific part of a sentence: Example: The room at the end of the hall is giving off creepy vibes [[index]]

Use CYCLE to introduce visual modes of storytelling. Follow the formatting for images and options in a cycle to introduce images that can be cycled through. Conclude with a linked image if you want to advance to a new passage. NOTE: Once you have clicked through this example once, you won't be able to try again within this demo unless you relaunch the twine. Below is an HTML trick that relaunches your Twine, resetting any changes that might have occurred. Look behind the scenes to see how it works! <a href="https://clogosphere.neocities.org/if/hh/haunting-twine.html" target="_blank">[[click here to relaunch|index]]</a> <<cycle "$answer" autoselect>> <<option "[img[https://clogosphere.neocities.org/if/hh/gasp1.png ]]">> <<option "[img[https://clogosphere.neocities.org/if/hh/gasp2.png]]">> <<option "[img[https://clogosphere.neocities.org/if/hh/gasp3.png]]">> <<option "[img[https://clogosphere.neocities.org/if/hh/gasp4.png]]">> <<option "[img[https://clogosphere.neocities.org/if/hh/gasp5.png][index]]">> <</cycle>>

<<timed 4s>><<goto "index">><</timed>> In four seconds this will automatically go back to index

Wow, that's intense! So, you are really freaked out when you see a $scary? [[index]]

TIME CONSTRAINT - Behind the scenes on this interactive trick -- a link will go one of two destinations based on how much time has passed in milliseconds from the time you load the page! Example: Oh no! The demon has spotted you! Be quick! \ <<link "Try to get out the door before it catches you">> <<if time() lt 5000>> <<goto "escape">> <<else>> <<goto "caught">> <</if>> <</link>>

Dang! You were too slow. The demon caught you. [[try again?|Time Constraint]] or go back to [[index]]

Close one! You made it out of the haunted house just in time! [[index]]

Use CYCLE to allow the reader to participate in the storytelling by choosing an option. Which ever option is displayed when the link below is clicked will be stored in a 'variable' and can be displayed in future passages. (study the code behind-the-scenes for more context) You see something move past the window. You realize it is likely <<cycle "$thing" autoselect>> <<option "a ghost">> <<option "a vampire">> <<option "a neighbor">> <<option "a cat">> <<option "just a shadow">> <</cycle>> [[You peek out the window to find out what it is!|cycle-demo1]]

Use CYCLE to break up your sentences into single words, requiring the reader to advance the narrative by clicking through sentence. Add suspense to the process. Make the last word a link to a new passage. <h1><<cycle "$suspense" autoselect>> <<option "You">> <<option "reach">> <<option "for">> <<option "the">> <<option "door">> <<option "but">> <<option "before">> <<option "your">> <<option "hand">> <<option "reaches">> <<option "the">> <<option "door">> <<option "something">> <<option "reaches">> <<option "[[you|index]]">> <</cycle>></h1> NOTE: Once you have clicked through this example once, you won't be able to try again within this demo unless you relaunch the twine. Below is an HTML trick that relaunches your Twine, resetting any changes that might have occurred. Look behind the scenes to see how it works! <a href="https://clogosphere.neocities.org/if/hh/haunting-twine.html" target="_blank">[[click here to relaunch|index]]</a>

You can't believe your eyes. It is $thing that moved past the window. Phew. [[index]]

GIF image processing completed with <a href="https://moshpro.app/lite/" target="_blank">Mosh-Lite</a> and <a href="https://ezgif.com/" target="_blank">EZGIF</a>, then uploaded to my neocities account This first copy is formatted using HTML syntax, which allows to constrain size of image with HTML directly <img src="https://clogosphere.neocities.org/if/hh/ghost1.gif" width="50" height="50"> This second version is formatted using Twine syntax: [img[https://clogosphere.neocities.org/if/hh/ghost1.gif]] This third copy is formatted in Twine syntax as a link (back to the index) [img[https://clogosphere.neocities.org/if/hh/ghost1.gif][index]]