Hype TwineStage (Twine/Hype Extension)

(Loves Hype) #1

This extension was inspired by a forum request and my long standing passion for good old role playing games (pen and paper). Also I was an avid reader of these great interactive book from the eighties (my youth). I think there is nothing more inspiring then getting the imagination inflated with imaginary worlds of fiction and possibilities. Then with the dawn of computing text adventures became the first games widely available and since got much underrated with better and better graphics. Twine is a facinating software that enables educators and non-coders to start writing an interactive text adventure. And the focus is on the imagination of the reader … that said HypeTwineStage is a visual extension to underpin the story and bring your text-adventure into the world of picture books. In my opinion using this extension is very intentional from the beginning with a focus on a visual audience (young children etc.) or a tool to spice up an project with design and great illustration that initially had it’s focus on the story. Always remember story telling is what Twine is really about!

This first release is somewhat of an Beta as using it will show if command, interface or other things need to be tweaked for better usage. Your welcome to try it and give me some feedback. For documentation read the examples and code, for now! The extension is based on the Sugarcube-Storyformat.



Example Files:
Hype-File and Twine-Story

1.0 initial release with example

Hype and Twine, possible match?
Hype and Ink: project structure for a visual novel?
Using Hype with Meteor.js
(kerguelen) #2

This sounds absolutely amazing !
But so far, I must admit I don’t really get how to make it work :wink:

(Loves Hype) #3

↑ look at project
No Problem. As it’s the first release I didn’t post much data on installation and usage so I hope the following quick guide helps. I’ll try to make do better documentation soon but this should get yu started:

Quick online installation:

  1. Dowload the Twine-Story (see above)

  2. Goto http://twinery.org/ and choose the online version

  3. Click “Import From File”

  4. Your done. Have fun exploring …

Local installation (recommended):

  1. Install the latest Twine (http://twinery.org/)

  2. Download the Twine-Story and import it (see above)

  3. Download the Hype-File to see the example but eventually you will make your own (doesn’t have to be only one file) (see above)

  4. In the story there is a Javascript-Tab … scroll all the way down and edit

    /* Setwork path for Hype ressources */
    HypeTwineStage.setServerPath ('https://playground.maxziebell.de/Hype/TwineStage/');

    Replace the URL with your own … I use a local server but you can also enter a file path here (like /Users/YOURNAME/Desktop/). This is necessary because Twine 2 doesn’t allow to embed ressources like Twine 1. This path is actually the place you will keep all your exported Hype-files and once you publish you can change it to your real server

  5. Export the Hypefile into your folder/server

  6. Now it should render the Hype-Widgets in your Twine-Story

  7. Look at the passages in the example story to see the basic commands

  8. Your done. Have fun exploring …

(Loves Hype) #4

↑ look at project
Here are some ressources for Twine (assorted):


Sugarcube 2:



An most important… the official community:

(Loves Hype) #5

↑ look at project
Now also works with the online version.
See Quick Online Installation

(Loves Hype) #6

↑ look at project
Now with minified version.
Some minor fixes for closure compiler.