money: 0
key: false
inventory: []
config.header.right: "Wallet: £{money}"
config.header.left: "[[Marion Sparkle->Home]]"
config.footer.left: "[[About]]"
config.style.page.link.lineColor: "blue-8"
config.style.page.link.color: "blue-8"
sound.ambient.pop.url: 'https://freesound.org/people/Breviceps/sounds/447910/download/447910__breviceps__plop.wav'
--
[Javascript]
var inventory = engine.state.get('inventory');
inventory.push("a hankerchief");
[continued]
{embed image:'https://www-users.york.ac.uk/~tas509/TwineScreenShot.png'}
{no ambient sound}
# Example Twine Chapbook Project
This site contains some example pages for creating an interactive narrative with [[Twine->http://twinery.org/]] It shows to use images, sound effects and other features. You can [[download this project here->About]].
Of course, you will need to refer to [[The Chapbook Documentation->https://klembot.github.io/chapbook/guide/]], the [[code examples on Github->https://github.com/klembot/chapbook/tree/master/examples]] are really useful too, and the more detailed [[Twine chapbook->https://twinery.org/cookbook/js/storyformats/chapbook.html]], but note it contains Sugarcube and Harlowe code, not just Chapbook.
Whilst you *can* add images and sounds, it's much more fun to create a great story, and maybe make use *variables* to give it a game element.
See the money at the top of this page? For most of the other pages on this site you get £1 for visiting and a plane ticket costs £5. That is what variables are used for.
This page, and other show how to use a variable I called *money*, which increases every time you visit most pages. See the code on other pages to see how that works. The code of this page also shows how to display items in the headers and footers.
## How To Use
These pages show Chapbook's features in action, look at the Twine editor to see what code has been used.
>[[Delayed Text]]
>[[Reveal Links]]
>[[LockAndKey]]
>[[Text Input]]
>[[DropDownMenu]]
>[[Your Inventory]]
## Lots of examples with media
These pages also contain media and story starting points. You can use these if you want, but please feel free to create your own scenes, characters and story.
>[[Scenes]]
>[[Large List of Scene Images]]
>[[Sound Effects]]
>[[YouTube]]
# Advanced
>[[CSS Example]]
>[[Javascript]]
>[[Advanced Inventories]]
>[[Working With Missing Variables]]
>[[Generating Projects]]
## And the beginnings of a story
First, read the [[The Marion Sparkle Plan]] and then experience [[Marion Sparkle and the Mansion of Fire->Splash]].
money: money +1
--
# Scenes
[[The Forest Music And Images]]
[[The Moon]]
[[Large List of Scene Images]]
sound.effect.pop.url: 'https://www-users.york.ac.uk/~tas509/447910__breviceps__plop.wav'
sound.effect.explosion.description: 'a pop'
money: money +1
--
# Sound Effects
This page uses a sound effect from [[Freesound->https://freesound.org]]. You will need to register.
{sound effect: 'pop'}
To get the URL for a sound, you need to right-click or control-click Freesound's DOWNLOAD but and copy the link location.
{embed image:"https://www-users.york.ac.uk/~tas509/FreesoundAltClick.png"}
To use sounds, you first define it in your page's header, adding the URL, then use the **sound effect** tag.
Look at this page in Twine to see how to do it.
Or refer to the [[documentation->https://klembot.github.io/chapbook/guide/multimedia/audio.html]]
money: money +1
inventory: inventory + "moon"
--
# THE MOON
{embed Unsplash image: 'https://unsplash.com/photos/Na0BbqKbfAo', alt: 'the moon'}
The moon seemed huge. So you went [[Home]]
money: money +1
sound.ambient.forest.url: "https://www-users.york.ac.uk/~tas509/427400__imjeax__forest-ambient-loop.mp3"
--
{ambient sound: 'forest'}
This ambient sound playing now is from [[Freesound.org->https://freesound.org]], see the header code in this page that loads the sound and the tag below to play the sound.
**Note: In order for sounds to play, because of browser security a person has to click, so make sure to go to the previous page, and click your way into a sound playing page.**
This forest image is from [[open unsplash.com->https://unsplash.com/]]
When you go there, watch out for the SHARE button.
{embed image:"https://www-users.york.ac.uk/~tas509/UnsplashShare.png"}
{embed Unsplash image: 'https://unsplash.com/photos/1L71sPT5XKc', alt: 'the forest'}
# Embedding images from Flickr
Not all images on Flickr are available to embed, so watch out for those with a SHARE and EMBED option.
{embed image: "https://www-users.york.ac.uk/~tas509/FlickrEmbedButton.png"}
{embed image: "https://www-users.york.ac.uk/~tas509/FlickrEmbedCode.png"}
This forest image is from [[open flickr.com->https://flick.com/]]
<a data-flickr-embed="true" href="https://www.flickr.com/photos/lortopalt/49913366647/in/photolist-2j3F3X2-C8EhSg-rbvvy3-ZdC4h6-2hDbaGY-JHMP9m-AAD3FX-LdCvrJ-T22Kvj-2hEdPjx-jaW1er-2iGLHjH-2iH494B-2j3UH9C-Th9Qqf-rHUY94-GwJCSf-2hEs8Bd-N8vHUk-237M3EY-2hT9Esu-2iTdESG-NznDto-FsCaSu-2hDRLRt-KyrG6y-Qgx7JQ-Ea8pv1-2ixrqtR-2hSSZWn-2iyWmJx-SrzjwP-2ib1VQg-SMuKXz-PAsFhN-2g96wrb-2hV38SB-2hHZuEV-Pp453M-NoNV7M-2j3N1Bx-2hB75AM-2gL4zdr-Q41qdQ-2i3TEVd-2e4Vjzh-2iYnb6W-uedJUk-Rqe51V-2hCCbN1" title="In the dark forest"><img src="https://live.staticflickr.com/65535/49913366647_280a3113d9_b.jpg" width="1024" height="683" alt="In the dark forest"></a><script async src="//embedr.flickr.com/assets/client-code.js" charset="utf-8"></script>
Go to [[Sound Effects]]
See:
https://klembot.github.io/chapbook/guide/multimedia/audio.html
https://klembot.github.io/chapbook/guide/multimedia/images.html
--
# Embedding YouTube
It's very easy to embed YouTube videos. This page has links to the more advanced coding parts of Twine+Chapbook.
Note: If your URL is https://www.youtube.com/watch?v=Isic2Z2e2xs&feature=emb_logo you have to remove the **&feature=emb_logo** part
## Tutorial About Inserts
{embed YouTube video: 'https://www.youtube.com/watch?v=ohmWp8z-9aU'}
# Tutorial About Modifiers
{embed YouTube video: "https://www.youtube.com/watch?v=sH55YvAdtBk"}
# Other Tutorial Videos
* Variable https://www.youtube.com/watch?v=ToIALPHeRYo
* Lookup Variables https://www.youtube.com/watch?v=lrP7I-mr5vw
* Engine state https://www.youtube.com/watch?v=nIpVQaHyttw
config.style.backdrop: "#FFEFBD"
sound.ambient.whatever: ''
--
# {now.weekdayName}, another day in the bustling little town of Hostornmer.
{no ambient sound}
{embed image:"https://www-users.york.ac.uk/~tas509/scenes/Hostornmer_with_path.png"}
Hostornmer was the most stupidly named town in all of Argriogn. Nobody could pronounce it, not even the locals. People didn't like to leave Hostornmer simply because they couldn't ask for directions home. Even the sign-writers struggled with it.
Anyway...
Hostornmer is a little coastal town with a strangely medieval feel. Its little streets and alleyways all seem to lead to the _Trade Town_ and the profusion of shops there.
You live in the area called [[The Grove]], by the estuary. It's a leafy place, with lots of allotments growing all sorts of lovely vegetables.
Your name is **Marion Sparkle**
--
# Large List of Scene Images
This is a page that has a lot of images in my [[personal web space for York members->https://www.york.ac.uk/it-services/services/personal-web-space/]]. You need to register to get your own web publishing folder.
The [[The Forest Music And Images]] page shows how you can use images from *Unsplash* and *Flickr*.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1000872-minecraft-background-images-1920x1080-for-pc._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1000872-minecraft-background-images-1920x1080-for-pc._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1001155-minecraft-background-images-1920x1080-for-iphone._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1001155-minecraft-background-images-1920x1080-for-iphone._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1001321-best-minecraft-background-images-1920x1080-for-phone._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1001321-best-minecraft-background-images-1920x1080-for-phone._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/allie-smith-TH3ax0OeiX0-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/allie-smith-TH3ax0OeiX0-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/ash-seddon-tdb-IXI-uCA-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/ash-seddon-tdb-IXI-uCA-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Béziers_St_Nazaire_Pont_Vieux._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Béziers_St_Nazaire_Pont_Vieux._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/blueprint._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/blueprint._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/buildings_mask._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/buildings_mask._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cellar._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cellar._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cityscape._1024 2.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cityscape._1024 2.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cityscape._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cityscape._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cornfield_20663550865_2ecd2c8a6a_k._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cornfield_20663550865_2ecd2c8a6a_k._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/corridor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/corridor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cullan-smith-BdTtvBRhOng-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cullan-smith-BdTtvBRhOng-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-2-house._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-2-house._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-2._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-2._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Daisygate._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Daisygate._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/david-tomaseti-G7BWyjNM04w-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/david-tomaseti-G7BWyjNM04w-unsplash._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (1)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (1)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (2)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (2)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (3)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (3)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (4)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (4)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (5)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (5)._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_1._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_1._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_2._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_2._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_4._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_4._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_5._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_5._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/inside_book._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/inside_book._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/just_signpost._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/just_signpost._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/lighthouse_blank._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/lighthouse_blank._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/lighthouse_small._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/lighthouse_small._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/mars._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/mars._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Minecraft background 3._1024._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Minecraft background 3._1024._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Minecraft background 3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Minecraft background 3._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/molecule._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/molecule._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/night._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/night._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/plant-field-farm-leaf-flower-food-1264877-pxhere.com._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/plant-field-farm-leaf-flower-food-1264877-pxhere.com._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/room._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/room._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/ScreenShot0063._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/ScreenShot0063._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/signpost._1024 2.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/signpost._1024 2.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/signpost._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/signpost._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/space._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/space._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/stairs._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/stairs._1024.jpg"}
# Large List of Scene Images
Here are a strange collection of images that are 1024 pixels wide.
The code below can be copied and pasted into your passages.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/supermarket._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/supermarket._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/The Mansion of Fire and Spit._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/The Mansion of Fire and Spit._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/tractor-1454432._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/tractor-1454432._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/tractor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/tractor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/turquoise_corridor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/turquoise_corridor._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Village._1024.jpg"}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Village._1024.jpg"}
{embed unsplash image:"https://unsplash.com/photos/wgn7uq5tm7U"}
{embed unsplash image:"https://unsplash.com/photos/wgn7uq5tm7U"}
dogName: "Woofie"
money: money +1
--
{embed image:"https://stanfordflipside.com/images/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"}
# Text Input
What would you like to name your loyal canine companion?
{text input for: 'dogName'}
[[Name Your Dog]]
[Javascript]
var inventory = engine.state.get('inventory');
inventory.push("dog");
[continued]
hasDog: true
sound.effect.yap.url: 'https://www-users.york.ac.uk/~tas509/484297__giddster__small-dog-bark.wav'
--
{embed image:"https://i0.wp.com/cdn-prod.medicalnewstoday.com/content/images/articles/326/326976/an-angry-dog-who-make-give-someone-an-infected-bite.jpg?w=1155&h=1444"}
# ALL HAIL {dogName}!
Nice to meet you, {dogName}, I hope you are friendly dog.
Now take {dogName} [[home->Home]] and **begin the training**
{sound effect:"yap"}
You might also go to [[Your Inventory]] and see that you have a dog.
money: money + 1
inventory: inventory + "Boarding Pass"
--
{embed Unsplash image:"https://unsplash.com/photos/itgrH0cIUmA"}
# Delayed Text
You settle in for the long transatlantic flight, but they announce that take off has been **DELAYED!** Oh no.
[after 1 second]
You remember suddenly that you left the stove on at home. Tickets for this flight are £5. Do you have £5? If you don't they might throw you off anyway.
[after 3 seconds]
The doors are still open. You consider leaving the plane.
[after 5 seconds]
Surely you wouldn't? Would you? You wouldn't [[leave->Home]] would you?
[after 7 seconds]
You [[stay put->You Stay Put]] and put on your seatbelt. What were you even thinking?
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/supermarket._1024.jpg"}
# Reveal Links
I went to buy {reveal link: 'groceries', passage: 'Shopping List'}.
It was a rainy day and I needed cheering up.
As soon as I've got these I can go [[home->Home]].
# Shopping List
* Bread
* Butter
* Horseradish
* [[Bacon]]
...and something healthy.# Full English Dream
{embed Unsplash: "https://unsplash.com/photos/WbA_PCv3_Co"}
OK. That's a dream worth living for, let's go [[home->Home]] and make it.
hasTicket: money > 5
--
{embed Unsplash image:"https://unsplash.com/photos/itgrH0cIUmA"}
# Blimey!
You almost did it. You really nearly left the plane.
At the end of the aisle a stewardess is making her way toward you.
You currently have £{money}
[if hasTicket]
Ah, I see you have enough for a ticket, welcome aboard.
"[[Enjoy the flight]]" she says.
[else]
You could try visiting more pages to earn more money.
You will have to [[go home->Home]], turn off the stove and then you can afford a ticket, get some more money and come back again.
[continue]
[Javascript]
var inventory = engine.state.get('inventory');
inventory.push("boarding pass");
[continued]
p.s If you visit [[Your Inventory]] you have a boarding pass.
#Enjoy The Flight...
Well done, you made it.
Shame it's now time to go [[home->Home]].
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/plant-field-farm-leaf-flower-food-1264877-pxhere.com._1024.jpg"}
This is home, three rows from the back. It's time to get up.
YAWN!
Bleary-eyed you look in the mirror. It's all still slightly blurry.
You rub your eyes and [[look a litte harder->Marion Sparkle]]luckyNumber:0
--
<center>
{embed image:"https://www-users.york.ac.uk/~tas509/Neutral_Eyes1_small.png"}
</center>
There you are. You are one of the many hard-working vegetables of [[Hostornmer]].
Lots of the menial jobs around town are carried out by you and your friends and although many of them are vegetables, you also know plenty of other interesting people.
You work for **Wearmouth Mitchell - Dishonest Butcher** and although you don't like working for him, you always try your best.
It's quite a while until your shift at work starts so you have a little time to kill. Maybe you _could_ squeeze in an errand, grab a coffee, or do something fun along the way.
So which do you do?
>[[Go straight to work->The Butcher's Window]]
>[[Roll A Dice And Do Some Random Stuff->Get The Dice]]
sound.ambient.space.url: "https://www-users.york.ac.uk/~tas509/578628main_hskquindar.mp3"
--
{ambient sound: 'space'}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/space._1024.jpg"}
You sit down. Stan is pointing at the screen and smiling as if you're interested.
You smile politely and continue gargling. This is a bit boring.
WAWARGH ARGHW WHAHHHGRGGLE ARRGLE WAHG!
"Oh I got you something" says Stan, and he gives you a [[Map of our Solar System's Moons]]
sound.ambient.butchers.url: "https://www-users.york.ac.uk/~tas509/butchers.mp3"
--
{ambient sound: 'butchers'}
# Inside Wearmouth's Butcher Est 1812
"There you are!" shouted Wearmouth, "We've had thousands of customers today, where have you been?".
You mumble something and start putting on your apron. Wearmouth continues...
"Don't put that on, I have an important errand for you".
Wearmouth tells you that this morning a wizzened wizard had come into the shop and ordered 43 turkeys. Yes, 43!
"He said he could pay, or instead, I might accept a **AN ANCIENT MAGIC BOOK OF MEAT RELATED SPELLS**."
This sounds far-fetched even for Wearmouth.
"So anyway, here's a map. You need to go to The Mansion of Fire (and Spit) in Daisygate, it's a bit of way, take the bike. You'd better get going".
At the top of the map it said,
[[Take the east road through the cornfields->The Cornfield]]
sound.ambient.butchers.url: "https://www-users.york.ac.uk/~tas509/butchers.mp3"
--
{ambient sound: 'butchers'}
{embed image:"https://www-users.york.ac.uk/~tas509/butchers_window.jpg"}
You arrive outside the Butcher's Shop. It is busy again.
You hear Wearmouth telling a customer that, as a child he had won Crackerjack twice.
He always lies. All of the time. Most of the time it doesn't matter. Last week it was all about his youth as an Artic explorer, and how one time he ate an entire polar bear.
Right. You take a deep breath, and enter [[the shop->The Butchers]] to begin another day.{embed image: "https://www-users.york.ac.uk/~tas509/scenes/supermarket._1024.jpg"}
As you enter, uou reach into your pocket and the list Theresa gave you.
Here it is, at the top of the page, underlined, it says {reveal link: 'groceries', passage: "Marion's Shopping List"}.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cityscape._1024 2.jpg"}
# On The Bus
All sitting on the front seat of the top deck of the bus you catch your breath.
"What's the plan then, Insect Folk?" you ask Barry the cockroach.
"Well, it's this". said Barry and as you trundled towards the big city he explained that his cousin Barry, yes, Barry, lived next door to a restaurant that made the best pizzas you have ever tasted and had found a secret entrance.
Barry winked at you, tapping his, er, nose thing.
The gang has stopped eating since they day before yesterday so they've have enough room to go a bit bonkers, pizza-wise.
As ever, you wonder if this was a good idea after all, and just as you were looking out of the window wondering how you might make your excuses - maybe something about a pizza allergy - the bus made a SHARP LEFT.
What?
OH NO! In your haste to catch the bus you've all got on the **wrong bus**!
The towers of big city disappear over your shoulder as you start heading towards the coast. And not even the fun part of town, the bus is on its way to [[The Lighthouse]].
{ambient sound: ''} <!-- stops the butcher's sound-->
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cornfield_20663550865_2ecd2c8a6a_k._1024.jpg"}
The east road was a bit bumpy. Was Daisygate really this way?
[[You look at the map->Through The Cornfield]] {embed image: "https://www-users.york.ac.uk/~tas509/scenes/mars._1024.jpg"}
# Wrong Choice!
[CSS]
blockquote{
color: gray;
font-style: italic;
font-size: 30px;
}
[continue]
Somehow, you have ended up here. Where are you? How did that happen?
Oh well, you are remember the words of Winston Cabbage,
<blockquote>
'When you are going through hell,
[[keep going->Fire]]'.
</blockquote>
Seems reasonable enough.
wool: typeof wool === "undefined" ? false : wool
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/corridor._1024.jpg"}
You go through the door, it won't close behind you. The wind blows in.
The chandelier tinkles with every move you make.
You don't want anyone to discover you. You need something to stop it tinkling.
[if wool]
You wrap the wool around the crystal droplets and twinkling stops. You tip toe [[further->The Posh Room]]
[else]
If only you had some soft wool or something...
You're gonna have to go [[home->Marion Sparkle]] aren't you?
Oh no!
[continue]
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (1)._1024.jpg"}
Walking down the lane it's hard to see where it actually is. The light snow hides it.
There are no other footsteps to help.
Truding forwards, it seems to be getting [[closer->The Dog]] really slowly, as if the whole building is on wheels and is sneakily trundling away from us.
sausages: typeof sausages === "undefined" ? false : sausages
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download._1024.jpg"}
You can hear a dog baying.
[after 2 second]
As you get closer a large lumbering guard dog lopes towards you, ears flapping.
[after 4 seconds]
It slows as it get nears and snarls. It's slobbering and doesn't look very friendly.
[after 6 seconds]
Is this the beast?
[if sausages]
[after 2 seconds]
[[You give it the pack of sausages->Mansion Close]] and it seems happy enough to let you pass. That wasn't too bad.
[else]
[after 8 seconds]
If only you had some food to distract it, like some sausages or something... damn! There's no way it's going to let you get past.
You will have to head [[home->Marion Sparkle]].
[continue]
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/download (4)._1024.jpg"}
You are past the dog.
The wind blows a
[[piece of paper->Ground Floor Map]] onto your face.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_1._1024.jpg"}
# What Luck!
It seems ridiculously lucky, but this seems to be a plan of the mansion. You look up at the building and down at the plan. It is.
On the back is [[a plan of what seems to be the second floor->Second Floor Map]].
As you walk towards the building you can see two doors.
>[[A posh door->Corridor One]]
>[[A more humble door->The Cellar]]{embed image: "https://www-users.york.ac.uk/~tas509/scenes/floor_2._1024.jpg"}
Maybe there's more useful information in [[here->https://www.yourworldoftext.com/~everythingability/secondfloormap]]?map: typeof map === "undefined" ? false : map
yourName: typeof yourName === "undefined" ? "Marion" : yourName
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/room._1024.jpg"}
In this room, all the exits are named after moons.
On the table, a scribbled note says
~~WHAT YOU WANT {yourName} IS IN SATURN'S BIGGEST~~
[if map]
Luckily Stan had given you the very thing! Good ol' Stan.
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Moons_of_solar_system_v7.jpg/640px-Moons_of_solar_system_v7.jpg"}
[else]
If only you had a moon map! You might want to [[go home->Marion Sparkle]]
[continue]
Mmm! Or maybe you could have a guess?
>[[Europa->Mars]]
>[[Ganymede->Mars]]
>[[Io->Mars]]
>[[Titan->Mars]]
>[[Triton->The Turquoise Corridor]]
>[[Phoebe->Mars]]
sound.ambient.gramaphone.url: "https://www-users.york.ac.uk/~tas509/198855__bone666138__scratchy-record.mp3"
spacedust: typeof spacedust === "undefined" ? false : spacedust
--
{ambient sound: 'gramaphone'}
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/turquoise_corridor._1024.jpg"}
You enter a turquoise corridor. It is very long, but at the other end is a room with an open door.
You can hear a gramaphone endlessly playing the last groove of a record.
You are still worried about meeting anyone in here, it's so creepy. What if the dog wasn't THE BEAST?
If only you had something to cover the sound of your footsteps. Something to help you _blend in_.
[if spacedust]
You remember the space dust in your pocket. Grabbing as much as you can you pop it into your mouth and walk, open mouthed towards the room.
In the corner you can see it. It's [[The Book]].
[else]
You need something that makes a dry scatchy record sound, otherwise you might disturb THE BEAST. You'll have to [[go home->Marion Sparkle]] and see what you can find.
[continue]
puffin: typeof puffin === "undefined" ? false : puffin
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/inside_book._1024.jpg"}
Here it is. The Book.
But the pages are blank.
What?!?!
That's when you realise, games are all very well and good, but it's time that you should probably learn how to use Twine and ...
**WRITE YOUR OWN STORY**
The End.
[if puffin]
It may seem a bit sad but at least you've still your badge. You'd forgotten about that hadn't you?
{embed image:"https://i.etsystatic.com/6920938/r/il/ed4ff3/2372220088/il_1588xN.2372220088_henk.jpg"}
[CSS]
#backdrop{
background-color: black;
}
#page header a{
color: white;
}
#page footer a{
color: white;
}
#page a{
color: white;
}
#page article p{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 500;
color: white;
font-size: 20px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
line-height: 20px;
}
#page{
background-color: black;
}
article{
border:0px;
}
[continued]
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Village._1024.jpg"}
There's nothing here, let's go [[back->Map Of Daisygate]] {embed image: "https://www-users.york.ac.uk/~tas509/scenes/signpost._1024.jpg"}
Ah yes. You are definitely in the middle of nowhere, or close to it.
But this is right, you're almost there.
>[[Head For Daisygate->The Way To Daisygate]]
>[[Go Back Home->Hostornmer]]
>[[The Road To Nowhere->Inside An Atom]]{embed image: "https://www-users.york.ac.uk/~tas509/scenes/ScreenShot0063._1024.jpg"}
You wander your way past the mountain...you're pretty sure it was this way, and go
[[further in->Minecraft Chickens]] to Thorben's weird world.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/night._1024.jpg"}
# The Mansion
That certainly looks like the mansion, but it's night. Where did all that time go?
As you trudge towards it, the [[sun starts rising->The Dog]].# WELCOME TO NOWHERE
Turns our nowhere is a quantum kind of place.
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/molecule._1024.jpg"}
At atomic scale, things move a little more slowly. If _move_ even makes sense any more.
A second can seem long enough to soft boil an egg, or [[not->Marion Sparkle]], or both.
puffin: true
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/lighthouse_blank._1024.jpg"}
# The Lighthouse
There is nothing to do at the lighthouse except look at the lighthouse, look at the sea, avoid the seagulls and make a tour of the tiny gift shop.
Nobody even knows why the bus goes to lighthouse, but it does twice a day and the only passenger is Albert, the lighthouse man.
You should've noticed him at the back of the bus. Actually, maybe that is it, the bus is just for Albert.
In the gift shop you buy a small enamel pin in the shape of a puffin.
When the time is up. You get back on the bus looking back at the lighthouse. And wondered how Albert has arranged he own daily taxi to work.
Some of the cockroaches are almost sobbing at the missed pizza.
It's a long a quiet ride [[back home->Marion Sparkle]]. yourName: "Marion"
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/Daisygate._1024.jpg"}
You arrive in Daisygate. It is noticibly cooler and a little snow has started to fall. It looks quite pretty.
It's not not clear from your map where The Mansion actually is. There is a sign to [[Cowbit Village]], but that doesn't look right. The map definitely says **Mansion of Fire (and Spit), Daisygate, East Argriogn**
You try to catch the attention of a passerby with a friendly "Hello!"
What looks like a farmer, stops and asks...
"Who are you then?"
You don't know whether to give him your real name or not, so you answer...
{text input for: 'yourName'}
... and ask for directions. Hhe tells you that the _big house_ is second on the left and then up the long lane. But to be honest, he doesn't look right.
Where the farmer is pointing you does look like the biggest property in Daisygate, it has to that, right?
You try [[second on the left->Mansion At A Distance]] and begin the going down the lane, as the farmer shouts after you.
"MIND THE BEAST THOUGH! HE'S A ONE, THAT'S FOR SURE!"
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-3._1024.jpg"}
You're on the right track, Wearmouth's map clearly had a small road going through cornfields.
It seems a long way.
In the distance you see a [[sign->Sign To Daisygate]]. {embed image: "https://www-users.york.ac.uk/~tas509/scenes/daisygate-2._1024.jpg"}
The bike is starting to creak a bit. It has never been so far away from home.
Wearmouth's Map is right though. Up a lane on your left there is indeed a small black rectangle.
Until, could that be it? [[Is that Daisygate is up ahead?->Map Of Daisygate]]
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cullan-smith-BdTtvBRhOng-unsplash._1024.jpg"}
# Er...
This is worse! Stupid Winston!
~~ THIS IS HELL! ~~
You stumble forward.
Through tears and smoke, there's [[something up ahead->Mansion At Night]].{embed image: "https://www-users.york.ac.uk/~tas509/scenes/cellar._1024.jpg"}
Oo. This is spooky. This isn't right.
You [[turn back->Ground Floor Map]] # About
This project is downloadable from github [[here->https://github.com/everythingability/ExampleProjectMarionSparkle]].
There is a video tutorial for Twine [[here->http://digitalcreativitytools.everythingability.com/activities/view/create-an-interactive-narrative-game-1]]
# Credits
Thank you to the people who provided [[Large List of Scene Images]] and [[List of Audio Files Used]]
I have relied heavily on:
* Unsplash
* Freesound.org
* Flickr
* https://search.creativecommons.org/
* Pngimg.com
Trying to make as much use of Creative Commons material as possible.
I also made use of the excellent to "get me started":
* Village Generator https://watabou.itch.io/village-generator
* Mansion Generator https://watabou.itch.io/procgen-mansion
* City Generator https://watabou.itch.io/medieval-fantasy-city-generator
* https://evokemusic.ai/ For generated music
* http://computoser.com/ For generated music
* TalkToTransformer to help make the "story" https://talktotransformer.com
* Plot Generator https://www.plot-generator.org.uk/story/
* Character Generator https://www.character-generator.org.uk/quick/
<h2>Downloaded on June 4th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/chestnutjam/sounds/404691/">crunchy cabbage bites, chewing, & retarded extra</a> by <a href="https://freesound.org/people/chestnutjam/">chestnutjam</a> | License: Creative Commons 0</li>
<li>S: <a href="https://freesound.org/people/Robinhood76/sounds/66679/">00877 cabbage slice one shot.wav</a> by <a href="https://freesound.org/people/Robinhood76/">Robinhood76</a> | License: Attribution Noncommercial</li>
<li>S: <a href="https://freesound.org/people/FoolBoyMedia/sounds/347848/">New York Jazz Loop</a> by <a href="https://freesound.org/people/FoolBoyMedia/">FoolBoyMedia</a> | License: Attribution Noncommercial</li>
<li>S: <a href="https://freesound.org/people/lazymonk/sounds/214319/">New York Street Ambience.wav</a> by <a href="https://freesound.org/people/lazymonk/">lazymonk</a> | License: Creative Commons 0</li>
<li>S: <a href="https://freesound.org/people/Meisben/sounds/488007/">Tractor_Drive_05.wav</a> by <a href="https://freesound.org/people/Meisben/">Meisben</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on June 3rd, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/squashy555/sounds/319512/">pigeon.wav</a> by <a href="https://freesound.org/people/squashy555/">squashy555</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on May 26th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/InspectorJ/sounds/456440/">Bird Whistling, Robin, Single, 13.wav</a> by <a href="https://freesound.org/people/InspectorJ/">InspectorJ</a> | License: Attribution</li>
<li>S: <a href="https://freesound.org/people/ckvoiceover/sounds/401335/">Whistling</a> by <a href="https://freesound.org/people/ckvoiceover/">ckvoiceover</a> | License: Attribution</li>
<li>S: <a href="https://freesound.org/people/dersuperanton/sounds/433651/">Whistling</a> by <a href="https://freesound.org/people/dersuperanton/">dersuperanton</a> | License: Attribution</li>
</ul>
<h2>Downloaded on May 19th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/Benboncan/sounds/67261/">Frog Croaking.wav</a> by <a href="https://freesound.org/people/Benboncan/">Benboncan</a> | License: Attribution</li>
<li>S: <a href="https://freesound.org/people/WIM/sounds/9099/">bangkok frog.wav</a> by <a href="https://freesound.org/people/WIM/">WIM</a> | License: Attribution</li>
<li>S: <a href="https://freesound.org/people/magixmusic/sounds/189795/">Frogs Forever</a> by <a href="https://freesound.org/people/magixmusic/">magixmusic</a> | License: Attribution Noncommercial</li>
<li>S: <a href="https://freesound.org/people/reznik_Krkovicka/sounds/333989/">sea_whale_seagull</a> by <a href="https://freesound.org/people/reznik_Krkovicka/">reznik_Krkovicka</a> | License: Creative Commons 0</li>
<li>S: <a href="https://freesound.org/people/straget/sounds/412308/">Big waves hit land.wav</a> by <a href="https://freesound.org/people/straget/">straget</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on May 18th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/inchadney/sounds/437306/">North Sea Island of Amrum.WAV</a> by <a href="https://freesound.org/people/inchadney/">inchadney</a> | License: Attribution Noncommercial</li>
<li>S: <a href="https://freesound.org/people/RabsRich/sounds/14600/">crab duet.wav</a> by <a href="https://freesound.org/people/RabsRich/">RabsRich</a> | License: Sampling+</li>
</ul>
<h2>Downloaded on May 11th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/riversurf/sounds/415867/">Beetles Eating Tree.wav</a> by <a href="https://freesound.org/people/riversurf/">riversurf</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on May 4th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/Ohrwurm/sounds/64830/">Snailhorn.wav</a> by <a href="https://freesound.org/people/Ohrwurm/">Ohrwurm</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on April 12th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/Isaac200000/sounds/188013/">Error.wav</a> by <a href="https://freesound.org/people/Isaac200000/">Isaac200000</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on April 1st, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/Mega-X-stream/sounds/427414/">Dinosaur Dragon Growls</a> by <a href="https://freesound.org/people/Mega-X-stream/">Mega-X-stream</a> | License: Attribution</li>
</ul>
<h2>Downloaded on March 27th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/duckturd/sounds/437248/">Speech - AlienSpeech2.wav</a> by <a href="https://freesound.org/people/duckturd/">duckturd</a> | License: Creative Commons 0</li>
</ul>
<h2>Downloaded on March 25th, 2020</h2>
<ul>
<li>S: <a href="https://freesound.org/people/zachrau/sounds/362283/">Sheep bleating</a> by <a href="https://freesound.org/people/zachrau/">zachrau</a> | License: Creative Commons 0</li>
<li>S: <a href="https://freesound.org/people/170048@virtualwindow.co.za/sounds/408040/">Eating Human.wav</a> by <a href="https://freesound.org/people/170048@virtualwindow.co.za/">170048@virtualwindow.co.za</a> | License: Attribution Noncommercial</li>
</ul>
sound.ambient.theme.url: "https://www-users.york.ac.uk/~tas509/ThemeTune-Marion.mp3"
config.style.page.font: "Iowan Old Style/Constantia/Georgia/serif 18"
config.style.page.color: "gray-9 on white"
config.style.page.link.font: "underline"
config.style.page.link.color: "blue-9"
config.style.page.link.lineColor: "blue-8"
config.style.page.link.active.color: "blue-8 on blue-0"
config.style.page.header.font: "16"
config.style.page.header.link.font: "small caps"
config.style.page.footer.font: "16"
config.style.page.footer.link.font: "small caps"
--
{ambient sound: 'theme'}
{embed image:"https://www-users.york.ac.uk/~tas509/SplashScreen_Cover.png"}
Welcome!
It is time to leave for [[Hostornmer]]
eggs: true
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1001155-minecraft-background-images-1920x1080-for-iphone._1024.jpg"}
After a few blocks more you arrive at what's left of Thorben's chicken audience he spawned. Thorben's last big idea was to train "dumb chickens" to download his latest track in their thousands and make him a star, so he could lie in and get paid for it.
It hadn't worked.
You carry on and arrive at a [[beautiful lake->Beautiful Lake]]
wool: true
--
{embed image: "https://www-users.york.ac.uk/~tas509/scenes/1000872-minecraft-background-images-1920x1080-for-pc._1024.jpg"}
# Hang on a minute?
But this is where Thorben's greenhouse had been and now there isn't a single block remaining, not a pane of glass. All there is a small ball of wool left by a visiting sheep. You pop the wool in your pocket, you never know when it might come in handy and wonder.
What has happened? And where is Thorben? What is he up to now?
You think...it's time to [[go->Marion Sparkle]] back. You've already spent enough time here.chosen:random.d4
luckyNumber:chosen
--
# You roll a... {chosen}
[CSS]
img {
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
[continued]
[if chosen === 1]
{embed image: "https://www-users.york.ac.uk/~tas509/horseradish_PNG6_small.png"}
One. Thorben Smyth has been asking you to help him adding a few more blocks to his latest genius Minecraft project. You haven't seen Thorben in a quite a while, he never bothers to visit you, so you think that seeing him in his [[Minecraft realm-->Thorben Smyth]] is at least something...
...or do you want to [[roll again->Roll A Dice]]
[if chosen === 2]
{embed image: "https://www-users.york.ac.uk/~tas509/Theresa_Sanders.png"}
Two. In the middle of the night, you'd had an EMERGENCY text from Mrs Theresa Saunders was asking if you could call in about a little job she needs doing since she's been banned from the Supermarket again.
You'd better go and see [[how you can help->Mrs Theresa Sanders]].
...or do you want to [[roll again->Roll A Dice]]
[if chosen === 3]
{embed image:"https://www-users.york.ac.uk/~tas509/astronaut_masked.png"}
Three. Stan has been nagging for you go around to his house to watch some space telescope movie or other. Stan likes to watch them in slow motion so it can takes far too long and always makes a playlist to play along with it.
I can be boring at times, but sometimes he lays on a [[ SPACE DUST BUFFET->Stan]] that has to be heard to be seen.
...or do you want to [[roll again->Roll A Dice]]
[if chosen === 4]
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c3/Cockroaches_on_wood.jpg/512px-Cockroaches_on_wood.jpg"}
Four. The Insect Folk, as they liked to be known were a rowdy but fun bunch of cockroaches that lived somewhere beyond the compost heap.
They were always dropping in to see if you wanted come "Up Town" to have a laugh. They always get a bit rowdy a shade too drunk, or get into scrapes, like being thrown out of restuarants.
Often when they called you hid behind a rhubarb leaf, pretending you were out, but for some reason, today as their laughter enters The Grove you think "What the heck!" I'll just go along with them for a little while.
You join them on the path and they cheer. One of them burps loudly. Just as you reach the road, a bus is arriving and so you all run to the bus stop and clamber onto the bus.
[[What's the worst that could happen?->On The Bus]]
...or do you want to [[roll again->Roll A Dice]]
config.body.transition.name:'crossfade'
--
[CSS]
#backdrop{
background-color: black;
}
#page article p{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 500;
color:red;
font-size: 50px;
text-align: center;
text-transform: uppercase;
font-weight: bold;
line-height: 70px;
}
#page{
background-image: url('https://www-users.york.ac.uk/~tas509/scenes/download (1)._1024.jpg') ;
background-repeat: no-repeat,
}
article{
border:0px;
}
[continued]
This text should be in red.
slider:0
--
# Javascript - Draft
Refer to the [[documentation for Javascript->https://klembot.github.io/chapbook/guide/advanced/using-javascript-in-passages.html]]
<!-- Ceci n'est pas une slider -->
# Let's Count With Javascript and jQuery Examples
[Javascript]
// Accessing jQuery, this works fine.
write("There are : " + $("p").length + " p tags on this page. \n\n");
write('2 + 2 is ' + (2 + 2) + '.\n\n');
for (let i = 1; i <= 10; i++) {
write(i + ',');
}
[continued]
# Setting the Twine engine's state with Javascript
[Javascript]
engine.state.set('money', 4000);
[continued]
Wow! You now have £{money}, maybe hacking does pay after all.
# Using jQueryUI
<div id=slider></div>
jQuery (and jQuery UI) has been loaded in the project's Javascript file - see in the menu bottom left in the Twine editor.
<button onclick="showSlider()">Show Slider</button>
{back link}
[CSS]
img {
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
[continued]
{embed image:"https://www-users.york.ac.uk/~tas509/astronaut_masked.png"}
Stan really wishes he'd been an astronaut, but he is a delivery man. He's **SPACE MAD!**.
He often wears a full space suit in his van, but on days when it's a bit too hot for that he wears a NASA tshirt with moon boots.
As you get close you can hear Space Oddity is coming to close.
You press the doorbell and it says...
[[WE HAVE LIFT OFF!->Stan's Playlist]]
# Shopping List
* Coffee
* Orange Juice
* Bread
* Butter
* And [[some other bits->Some Other Bits]]
sausages: true
--
# This Is More Like It!
{embed Unsplash: "https://unsplash.com/photos/WbA_PCv3_Co"}
OK. That's more like it.
You buy...
* Eggs
* Bacon
* Beans
* Sausages
* Tomatoes
* Mushrooms
... and think, a Full English Breakfast is almost a meal in itself. It's a shame you won't be there to help eat this lot.
There's a **4-for-1** offer on the sausages, which means you end up with far too many.
Carrying a heavy bag of shopping you head [[home->Marion Sparkle]] after dropping it at Theresa's. She gives you a pack of sausages for your trouble, which is nice.
[CSS]
img {
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
[continued]
{embed image: "https://www-users.york.ac.uk/~tas509/Theresa_Sanders.png"}
Theresa always wears false teeth, despite having perfectly good teeth.
Years earlier she had been a model for a toothpaste advert in the newspapers, and since then has been stubbornly black and white, and strangely attached to her false teeth.
Unable to speak clearly doesn't help her in keeping out of trouble.
Theresa was planning a big brunch for her neighbours to say sorry for swearing at them repeatedly in the street. Of course she hadn't been, it was just those teeth.
Theresa explains that due to a bizarre *misunderstanding* she is no longer welcome in the supermarket and gives you a shopping list, and tells you to [[hurry up->The Supermarket]].
[CSS]
img {
max-width: 200px;
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
[continued]
{embed image: "https://www-users.york.ac.uk/~tas509/horseradish_PNG6_small.png"}
Thorben Smyth is a lazy horse radish from Manchester who says he suffers from hibernation syndrome. He just find it very hard to get out of bed. Although a brilliant guitarist, he prefers the sound of brass bands and thinks rock music is beneath him.
He strongly dislikes all insects, guitarists and his favourite film is the Terminator.
His plan is grow a cyber version of himself, who can do his guitar teaching over Zoom, whilst he stays in bed. Thorben is making a huge greenhouse in Minecraft to help him grow it.
You [[log on->Minecraft Mountain]] and start looking for him.
# Lock and Key
Q. Do you have a key?
A. {key}
On the Home page we define the _key_ variable, and below the xxit isn't shown until you've been to [[the room that contains the key->Room With A Key]] page that _gives_ you the key.
Note: It seems to me, that you will need to initialise all the variables you need on your Home/Start page and then always start from there, because otherwise, you get _Uncaught ReferenceError: key is not defined_. This seems a bit of a pain, because you can't test sub-sections of your story.
[if key == true]
[[Unlock the door->Exit]]
[else]
*Locked Door*
[continued]# You made it.
Time to go [[home->Home]]
Or go take a look at [[Your Inventory]] [if key == false]
You are in a room and there is table, and on it there are papers,
some money, a lamp and a key.
{reveal link: 'Pick up key', passage: 'Key'}
{reveal link: 'Take the money', passage: 'Some Money'}
[else]
There is nothing here.
[continued]key: true
--
You picked up the key!
Now you can go back to [[where you started->LockAndKey]] and maybe get out of here.
[Javascript]
var inventory = engine.state.get('inventory');
inventory.push("key");
[continued]money: money + 4.71
--
# You have some money!
But you made the wrong choice!
# Your Inventory
_Note: The Inventory gets set to nothing but a hankerchief when you hit the [[Home]] page. Something to watch out for_
The things in your inventory are:
<ul>
[Javascript]
var inventory = engine.state.get('inventory');
inventory.forEach(function(value, index){
console.log( value );
write("<li>" + value + "</li>");
});
[continued]
</ul># Dropdown Menu Example
What meal do you enjoy most?
{dropdown menu for: 'meal', choices: ['Breakfast', 'Lunch', 'Dinner']}
[[The Most Important Meal Of The Day]]# The Most Important Meal Of The Day
As everybody knows the most important meal of the day is {meal}
... you can go [[Home]] now we've all agreed.MyVar: typeof MyVar === "undefined" ? "My New Value" : MyVar
--
# Missing Variables
Often you want to work with a variable, that you perhaps haven't created yet.
This avoids *having* to initialise ALL your variables in the first page of your Twine project.
If you try to do this you will get an error, so you can use what's called a ternary operator, a **?** in the variable header of your passage.
{MyVar}# Generating Projects
If you want to create projects and passages from data you might already have, for example, in a spreadhseet, there is a format called **TweeCode**.
Using the command-line tool, **Tweego**, you can then compile your TweeCode into a project.
[[Tweego->https://www.motoslave.net/tweego/docs/#getting-started-overview]]# Advanced Inventories
An inventory is just a list of things stored in a variable. JavaScript has two list types you can use, an **Array** which might look like this…
`["Bread", "Butter", 53, "happy", 24]`
… and an **Object** which are subtly different because instead of being **items in an order** they are **items that have keys**. An object might look like this...
`
{toBuy: ["Bread", "Butter"], money:53, mood: "Happy", petrol:24}
`
… you might notice that in the example above I have used an Array of things to buy, with a key of **toBuy**. You can, if you chose, mix and match Arrays and Objects together.
Arrays are the simpler of the two, but with Objects, you can almost store any data you want, and sometimes people even use Objects and Arrays of Objects as a database. Which you choose to use depends on how complex you want your data to be, one isn't _better_ than the other they just do different things.
[[Using JavaScript Arrays as Inventories->https://www-users.york.ac.uk/~tas509/Inventory%20Array%20Example.html]]
[[Using JavaScript Objects as Inventories->https://www-users.york.ac.uk/~tas509/Inventory%20Object%20Array.html]]# The Marion Sparkle Plan - UNFINISHED
I'll be honest, I don't know anything about writing or game design, but I'm learning. This project is meant to support a [[How To Create An Interactive Narrative Game->http://digitalcreativitytools.everythingability.com/activities/view/create-an-interactive-narrative-game-1]]
This story was my attempt to put a few screens together, some which show *HOW THE CODE WORKS*, and some screens to **play** with the medium of interactive narratives.
The intention was to provide a half-finished story that reveals:
* How branching can get out of hand really quickly
* In a story with lots of branches, how it feels to create content nobody will see
* In a minimally branching story, why not just write a novel?
* How HARD it is to write in the second person
* How you might use an inventory and game play
* Getting the balance right between *story* and *game*
* How much work it is to *populate* lots of pages
* How hard it is to *keep the game flowing*
The *plan* was to only use [[Creative Commons->https://creativecommons.org/about/videos/creative-commons-kiwi/]] or free media for all the artwork.
I used [[freely available tools to help generate the characters, the places and concepts->http://digitalcreativitytools.everythingability.com/activities/view/tools-to-help-you-get-started-writing]], which is why **Marion Sparkle** (generated name) is a **cabbage** (randomly selected object).
I also used [[free tools to generate the music->http://digitalcreativitytools.everythingability.com/activities/view/using-artificial-intelligence-for-inspiration]]
The *game play* is meant to be that at the beginning of the game after the scene setting, you have to roll a four-sided dice so that you spend time with all of your friends (picking up useful tools along the way) BEFORE you go to work and discover your mission.
At the end of the story, you discover an irony. That's it really.
Now on to [[Marion Sparkle->Splash]]
# Here We Go
{embed image:"https://upload.wikimedia.org/wikipedia/commons/3/36/D4_truncated_tetrahedron.JPG"}
Your dice was given to you by Wearmouth and only has four sides.
"It's a lucky tetrahedron" Wearmouth had told you.
"And it's truncated". He said, nodding at it as if it had magical properties.
Wearmouth insisted you use it whenever you played board games in the back room of the butchers when it was quiet.
It _really was_ lucky because whenever you used it to help make a decision, good things always happened, even if you never ever had won a single game of Ludo, Monopoly or Snakes and Ladders.
Sometimes you wished Wearmouth didn't make you play for money, it was an expensive business losing all the time.
So, here goes, [[let's roll the dice->Roll A Dice]] spacedust: true
--
# Stan's Playlist
Stan waves you in, gesturing for you to sit down.
You listen to the music and grab a bowl of Cherry Space Dust.
{embed YouTube video: "https://www.youtube.com/watch?time_continue=1&v=iYYRH4apXDo"}
{embed YouTube video: "https://www.youtube.com/watch?v=zPwMdZOlPo8"}
{embed YouTube video: "https://www.youtube.com/watch?v=XCbAEkfXSDE"}
{embed YouTube video: "https://www.youtube.com/watch?v=It42TsD7_sI"}
{embed YouTube video: "https://www.youtube.com/watch?v=Isic2Z2e2xs"}
As you gargle, the TV screen shows [[a view of earth from space->Space]]map: true
--
{embed image:"https://upload.wikimedia.org/wikipedia/commons/thumb/4/4f/Moons_of_solar_system_v7.jpg/640px-Moons_of_solar_system_v7.jpg"}
You thank him and read it for a while. He's beaming at you. You carefully put it in your rucksack and do your best to look thankful.
The deep space video rolls on.
After a few more minutes, your phone beeps. You see your opportunity. You read your phone. It is a text from your bank, but thinking quickly you say...
"Oh no, Wearmouth says I'm late for my shift, I'd better go".
You pop some of the space dust you haven't eaten yet into your pockets and [[make for the door->Marion Sparkle]]