HypeTwineStage Demo

Your browser lacks required capabilities. Please upgrade it or switch to another to continue.

Loading…

<<contentLayout top>>!Welcome to Hype TwineStage This extension marries Hype to the story driven non-linear Twine project. My goal was to broaden the experience of the pure text adventure to a picture book adventure. Hope you enjoy using it. <</contentLayout>> <<nobr>> <<hypeEmbed twineExample bottomright>> <<hypeShowSceneNamed twineExample sceneYellow>> <<contentLayout bottomleft>> <<if $catfood=='found'>> You found the cat food and now the cat followed you here... ''THE END'' <br /> <<link "Restart?">> <<script>>Engine.restart();<</script>> <</link>> <<hypeCode twineExample>> var catSpeech = document.querySelector('.catSpeech'); catSpeech.innerHTML = 'Your my best friend now.'; hypeDocument.startTimelineNamed('animation'); <</hypeCode>> <<else>> Hello… let us go [[Somewhere]]! <</if>> <</contentLayout>> <</nobr>>

Now we are there and you can go back to [[Start]] or look at the nice [[Fullscreen]] <<hypeEmbed twineExample 300px 200px>> <<hypeCode twineExample>> /* run code in seperat block */ hypeDocument.showSceneNamed('sceneRed'); <</hypeCode>> <<hypeEmbedAndCode twineExample-1 right>> /* run while embeding */ hypeDocument.showSceneNamed('sceneBlue'); <</hypeEmbedAndCode>> <<hypeEmbedAndCode twineExample-2 bottomleft>> hypeDocument.showSceneNamed('sceneYellow'); <</hypeEmbedAndCode>>

Look there is a cat and a [[Secret]] door. <<hypeEmbed twineExample full>> <<hypeShowSceneNamed twineExample sceneYellow>> <<hypeStartTimelineNamed twineExample animation>>

<<nobr>>You found a secret place! <<hypeEmbed twineExample 600px 200px>> <<hypeShowSceneNamed twineExample sceneGreen>> <<if $catfood == 'found'>> You found the food and now can go to [[Start]] <</if>> <</nobr>> Use a right-click and "inspect" to see the full available Twine context after clicking the button. We execute ''var Twine = hypeDocument.getTwineContext()'' in the Hype-Widget. <div style="font-size:13px;line-height:16px"> But we actually don't have todo it that way. You can just "reach" into the animation and define the action from Twine using {{{<<hypeCode documentName>>...<</hypeCode>>}}} or regular {{{<script>}}}.</div> <<hypeCode twineExample>> /* let's try that and add an additional click handler */ var btn = document.querySelector('.catfoodbutton'); var Twine = hypeDocument.getTwineContext(); btn.onclick = function(){ Twine.Engine.play('Secret'); } <</hypeCode>>