Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
!Example Twine Project
This is an Example Twine Project that works the way I like, you may prefer how Twine looks out of the box. These are the simple things you can do with Twine.
You can [[Download this project here|https://www-users.york.ac.uk/~tas509/TwineExampleProject.zip]]
[[A Page With The Basics Of Formatting]]
[[A Page With An Image]]
[[A Page With Timed Reveal]]
[[A Page With Text Entry]]
[[Pages With Scores]]
[[A Page With A Background]]
[[A Page With A Sound]]
[[A Page With Video]]
[[A List Of Tagged Pages]]
Once you have mastered these you might want to learn how to control ''Arrays'' (or keep inventories, or lists of objects) or add ''Actions'' which are link choices, where the ones you don't choose disappear.
https://www.motoslave.net/sugarcube/2/docs/#introduction
<<script>>
if (window.hasOwnProperty("storyFormat")) {
//On windows it will be more like this... C:/Games/Twine_Sample_Code/
setup.Path = "file:///Users/tomsmith/Desktop/TwineExampleProject/media/";
} else {
setup.Path = "https://www-users.york.ac.uk/~tas509/TwineExampleProject/media/"; // Running in a browser
//setup.Path = "https://tomsmith.webfactional.com/static/TwineExampleProject/media/"; // Running in a browser
// Set permissions to 755
}
UIBar.stow(); //Hide the sidebar, like what is it for?
Config.debug = false; //turn off debug mode, like what is it for?
Config.ui.stowBarInitially = true;//do this, like what is it for?
<</script>>
<<set $path to setup.Path>>
[[Home]] | [[About]]
<hr>
© Tom Smith ! What's your name?
<<textbox "$player_name" "" "Welcome">>! A Page With Scores
<<set $score to 0>>
''How many times can you fold a piece of paper in half?''
Is it [[Once]] or is it [[Four Times|OneWrong]] or maybe [[Seven Times|OneWrong]] ?!A Page With A Background
<div id="myarea">
This is page that has some Twine code in to set the background.
[[A Page That Doesn't Reset The Background]]
[[A Page That Resets The Background]]
</div>
<<set $fullpath to "url(" + $path + "cow_bg.jpg" + ")" >>
<<run document.body.style.backgroundImage = $fullpath>>
<style>
div#myarea{
font-size:30px;
color:#d3d3d3;
}
div#myarea a{
font-size:30px;
color:#d3d3d3;
text-decoration: underline;
}
</style>
! A Page With Sound
<<set _audioPath to $path + "cow.wav">>
<<cacheaudio "cow" _audioPath>>
<<audio cow play>>
[[A Page That Stops The Sound]]
!! Note
The sound is downloaded from https://freesound.org/people/felix.blume/sounds/391026/ and then saved as cow.wav and placed in the media folder.!About This Project
I have created this project as a "rough starting point" for working in Twine.
In the Twine App if you click the ''Import From File'' button, an entire project will be created exactly like this one, and you can learn how something works by hacking and copy-n-pasting.
It has the basics of what I consider to be the important stuff to start Twining, for example.
# It has a ''StoryInit'' passage that sets up a variable called ''"""$path"""'' and expects that you create a folder called ''media'' in your project folder. It also ''hides'' the UIBar, or the interface at the left of the screen, which is usually shown so that there is always a back button. You may want turn this back on.
# It has CSS that sets the background to white and the basic CSS classes that you can edit.
# It has a ''PassageHeader'' showing how that might work on your site
# It has examples of working with Images, Background Images, Sounds and Videos.
# It shows how to use ''variables'' to keep scores and accept text input.
# There is an example of how you can display pages with certain tags (if you've added tags as you create pages).
<<run document.body.style.backgroundImage = null >>!A Page That Doesn't Reset The Background
On this page. !A Page With Video
Using simple HTML embed code
<iframe width="560" height="315" src="https://www.youtube.com/embed/FavUpD_IjVY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
! Hello $player_name, how are you?
This is page that is linked to [[A Page With Text Entry]] .
! A Page That Stops The Sound
<<audio cow stop>>!Correct!
<<set $score to $score + 1>>
Your score is <<print $score>>! Wrong!
A piece of paper can only be folder once in half.
Your score is <<print $score>>.
!This text displays sequentially
<<timed 4s t8n>>\
You glance around your shoulders and see nothing.
<</timed>>\
<<timed 8s t8n>>\
Until your eyes become accustomed, and then...
<</timed>>\
<<timed 10s t8n>>\
! TOO MUCH!
See: https://www.motoslave.net/sugarcube/2/docs/#macros-macro-timed
<</timed>>\
!A List Of Tagged Pages
This page shows how, using TwineScript, pages with tags can be automatically listed. The code below shows pages tagged with ''media''.
<<set $list to Story.lookup("tags", "media")>>\
<<for $i to 0; $i lt $list.length; ++$i>>
<<print "[" + "[" + $list[$i].title + "]" + "]">>
<</for>>\
<<unset $list, $i>>!A Page With An Image
This is displayed using Twine Markup
[img[$path + "isolated_cow.png"]]
! A Header is an exclamation mark, or two for a smaller one.
!!Documenttation
https://www.motoslave.net/sugarcube/2/docs/#markup
[[A Link To Another Page|Here It Is]]
Below shows how you can use Twine markup, or HTML to format text.
Emphasis is //Two Forward Slashes//
<em>Emphasis</em>
Strong is ''Two Single Quotes''
<strong>Strong</strong>
An Unordered List is
* Any number of lines
* With a *
* At the beginning
An Ordered List is
# Any number of lines
# With a #
# At the beginning
Double-click this passage to edit it.