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.

Demo:
https://playground.maxziebell.de/Hype/TwineStage/

Source:
https://playground.maxziebell.de/Hype/TwineStage/HypeTwineStage.js
https://playground.maxziebell.de/Hype/TwineStage/HypeTwineStage.min.js

Example Files:
Hype-File and Twine-Story

Versions:
1.0 initial release with example


Hype and Ink: project structure for a visual novel?
Using Hype with Meteor.js
Hype and Twine, possible match?
(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):
Tutorial:


Doc’s:
https://twinery.org/wiki/twine2:guide
http://twinery.org/cookbook/markup/sugarcube/sugarcube_markup.html

Sugarcube 2:
http://www.motoslave.net/sugarcube/2/
https://bitbucket.org/tmedwards/sugarcube/src

Articles:

Discussion:
https://www.reddit.com/r/twinegames/

An most important… the official community:
http://twinery.org/questions/


(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.


(Loves Hype) #7

So I just watched the Bandersnatch episode of Black Mirror. As confirmed by the developer on Twitter this episode was sketched up in Twine and I am happy that interactive storytelling makes a comeback to modern media in a big and conscious way. The story branchens draw the user in and the story line even breaks the fourth wall. Nice! Only critic I got … the decision tree mainly support two decisions per branch what in itself already creates a complex tree of endings but the not so obvious third choice of letting the timer decided for you and thereby confirming inactivity to the engine on behalf of the observer is ignored as a “choice”.

The Twine developer describes his hyped mood with this tune:


(Jonathan Deutsch) #8

Very cool they used Twine!

I was curious what would happen if no choice was selected; I was too nervous to go that route for fear of needing to replay large swaths. While I think some friends that played weren’t too into the actual story, I think the construction was top-notch. Even on death paths, the rewind and alternate path clearly would change to make reference to things that happened. Extremely meta yet very rewarding.