Twine_Demo

#(text-colour:purple)[(text-style:"bold")[Twine Demo]] ######(text-colour:purple)[//by tako//] (text-style:"subscript")[        //click to reveal contents//] (click:?page)[= ####Note: this demo will only cover Harlowe (since it's the default for the editor) and how to implement it ####(text-colour:cyan)[If you wanna see how this demo was made, just Ctrl+S to save the HTML file, then import it into the (css:"color: pink;text-decoration: underline;")[(link-repeat:"Twine app")[(open-url:"https://twinery.org/")]]!] --- ###Before we begin!! ###If you don't already know what Passages, Macros, and Hooks are, please first read [[Course Zero]]! --- ##[[Basics]] in Twine - //demonstrating the stuff in the Twine Cheat Sheet provided to y'all// ##Learn about the [[Editor]] - //it's pretty easy once you get the hang of it// ##Create a Simple [[Inventory]] - //very simple mock-up// ##[[Start]] a Sample Story - //reused a quickly-made (incomplete) sample story// --- ##Try a Finished Game! - (css:"color: pink;text-decoration: underline;")[(link-repeat:"Coloratura")[(open-url:"https://www.maderealstories.com/games/Coloratura-twine.html")]] is a cosmic horror, of some type. "Stolen away by apathetic Blind Ones, your only desire is to return to your Cellarium and the Song of the Universe. They should understand. You shall make them to understand." `[i haven't finished this one but it's good]` - (css:"color: pink;text-decoration: underline;")[(link-repeat:"Depression Quest")[(open-url:"http://www.depressionquest.com/dqfinal.html")]] is something I vaguely remember playing back when I was really hunting for interactive fiction stories. `[it speaks for itself i think]` - (css:"color: pink;text-decoration: underline;")[(link-repeat:"Seedship")[(open-url:"https://johnayliff.itch.io/seedship")]] is a simulation game where you control a ship trying to find a planet suitable for the last 1000 of the human race. `[this one's pretty complex mechanics-wise, at least for a twine game]` ---

{ (set:$molasses to false) (set:$sticks to false) (set:$feathers to false) (set:$wings to false) Your little rat nose picks up the scent of fresh dewfall. You wake up in the middle of a field.} (click:?page)[= Your whiskers feel the gentle breeze of the open area. The grass beneath your stubby feet and tail feels nostalgic. (click:?page)[= (link-reveal:"You look around you")[ To the North, you see a steep mountain slope. (click:?page)[= To the East, you see a dark forest. (click:?page)[= To the West, you see more of the open field. (click:?page)[= To the South, you see a small cottage. (click:?page)[= You see some smoke coming from its direction, and decide to head over [[there->a small cottage]]] (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

The quaint cottage is much smaller up close. { (if:(history: where its name contains "cottage cutscene")'s length is 0)[[[Knock on the door?->cottage cutscene]]]  }(else:)[(font:"Comic Sans MS")[//Come in !!//] Go [[inside the cottage]].] To the South, you see [[the middle of a field]]. (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

{  (enchant:?mt, (font:"Comic Sans MS")) (enchant:?rat, (font:"Georgia")) |mt>[//Oh !//]} A small rat in a straw hat and overalls appears to greet you. |mt>[=//I've not seen a rodent around here for a while ! Hello, it's nice to meet you ! Call me ''(text-colour:#ffd8a8)[(text-style:"smear")[M.T.]] !!''// (link-reveal:"And you are?")[= //''(text-colour:#ffa8a8)[(text-style:"smear")[Ratticus]]'', is it?// |rat>[=(link-reveal:"`*shrug*`")[= |mt>[//You (text-style:"superscript")[think]? Hehe, you're a little strange aren't you? Come in !! Make yourself feel comfortable !!//] Go [[inside the cottage]]. To the South, you see [[the middle of a field]]. (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

The interior of M.T.'s cottage is warm and cozy. The fireplace gives the room an orange tint. By the table is a jar of [[molasses]]. (if:(history: where its name contains "molasses")'s length is 1)[(font:"Comic Sans MS")[//Are you ready, Ratticus?//]] [[The door is left open->a small cottage]]. (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

Your whiskers feel the gentle breeze of the open area. The grass beneath your stubby feet and tail feels nostalgic. To the North, you see [[a steep mountain slope]]. {(if:(history: where its name contains "placeholder")'s length is 1)[To the East, you see [[Boodie Joe's forest->a dark forest]].] (else:)[To the East, you see a [[a dark forest]].]} To the West, you see more of [[the open field]]. {(if:(history: where its name contains "cottage cutscene")'s length is 1)[To the South, you see [[M.T.'s cottage->a small cottage]].] (else:)[To the South, you see a [[a small cottage]].]} (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

{ (enchant:?mt, (font:"Comic Sans MS")) (enchant:?rat, (font:"Georgia")) (set: $cards to (a:"Club", "Diamond", "Spade")) }(if:visits > 1)[ \ |mt>[= If you want to get my molasses for free, you'll have to solve my riddle one !! Pick a card!! (link_reveal: "Ace of Hearts")[ (display: "Riddle")]]{ }(else:)[= |mt>[=//Got your eye on something, I see?// |rat>[=(link-reveal:"`*nods*`")[ |mt>[= //Well... let's make this a bit interesting for me~ If you want to get my molasses for free, you'll have to solve my riddles three !! Pick a card!!// |rat>[M.T. takes a pouch from under the table and rummages through it, laying out a set of three cards face-down. She flips each one up one-by-one... only to discover that they all share the same suit and rank. She stares at the cards in disbelief.] |mt>[//Those are all my cards... ... Please give me a moment... // ] ] [[The door is left open->a small cottage]]. (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

test riddle

Before you is an imposing mountain. The rocky behemoth appears stable enough to [[climb]]. (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

(text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

(text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

Before you is an imposing mountain. The rocky behemoth appears stable enough to climb. (if:$wings)[<h1>You have wings!! You can reach [[the top of the mountain]]!!</h1>] (else:)[You try with all your might, but your little mousey paws can't secure proper footing on the steep slope.] (text-size:0.5) +(text-style:"italic","blur")[return to the [[index]]]

(text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ #(text-colour:purple)[(align:"=><=")+(box:"X")[(text-style:"outline")[''Basics in Twine'']]] ==> (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]] <== A rehash of the cheat sheet pdf It's also worth noting that most of these are selectable from the toolbar in the editor itself, though that will be discussed on the [[Editor]] tutorial ##(text-colour:purple)[//Headings//] --- =|= What you see =|= What you type |==| --- =|= #H1 =|= |code>[`#H1`] |==| --- =|= ##H2 =|= |code>[`##H2`] |==| --- =|= ######H6 =|= |code>[`######H6`] |==| --- ##(text-colour:purple)[//Emphasis//] --- =|= What you see =|= What you type |==| --- =|= ''bold'' (two single quotes) =|= |code>[`''bold''` (two single quotes)] |==| --- =|= //italics// =|= |code>[`//italics//`] |==| --- =|= ^^superscript^^ =|= |code>[`^^superscript^^`] |==| --- =|= ~~deleted text~~ =|= |code>[`~~deleted text~~`] |==| --- ##(text-colour:purple)[//Horizontal Rule//] Simply type |code>[`---`] to insert a horizontal rule, like so --- ##(text-colour:purple)[//Alignment Rule//] These must be placed ''above'' the desired text Personally, I recommend just using the option in the [[Editor]] because it's clearer --- =|= What you see =|= What you type |==| --- =|= ==> right-aligned =|= |code>[`==> right-aligned`] |==| --- =|= =><= centered =|= |code>[`=><= centered`] |==| --- =|= <==> justified =|= |code>[`<==> justified`] |==| --- =|= <== left-aligned =|= |code>[`<== left-aligned`] |==| --- ##(text-colour:purple)[//Verbatim//] This is how I've been able to display the code as-is Enclose the desired text in double backticks (`` ` ``) Alternatively, you can use the `(verbatim:)` changer --- =|= What you see =|= What you type |==| --- =|= `This text is [[verbatim]] and not a passage` =|= |code>[(verbatim:)[`This text is [[verbatim]] and not a passage`]] |==| --- ##(text-colour:purple)[//Linking Passages//] If you read [[Course Zero]] you should be familiar with the first implementation, but you can actually link to a passage even if it's of a different name --- =|= What you see =|= What you type |==| --- =|= This is an [[example]] passage =|= |code>[`This is an [[example]] passage`] |==| --- =|= I want to go the that passage shown [[earlier->example]] =|= |code>[`I want to go the that passage shown [[earlier->example]]`] |==| --- ##(text-colour:purple)[//Hooks//] A more exhaustive list can be accessed in the [[Editor]], but here are a few examples using [[hooks->Course Zero]] . --- =|= What you see =|= What you type |==| --- =|= (font: "Comic Sans")[This is Comic Sans MS.] =|= |code>[`(font: "Comic Sans")[This is Comic Sans MS.]`] |==| --- =|= (text-style: "emboss") [This text is embossed.] =|= |code>[`(text-style: "emboss") [This text is embossed.] `] |==| --- ##(text-colour:purple)[//HTML//] Harlowe accepts raw (css:"color: pink;text-decoration: underline;")[(link-repeat:"HTML")[(open-url:"https://www.w3schools.com/html/default.asp")]] as input, and formats the passage accordingly. Here are a few examples of changing text without hooks. --- =|= What you see =|= What you type |==| --- =|= These words are in a monospace font =|= |code>[`These words are in a monospace font`] |==| --- =|= These are red =|= |code>[`These are red`] |==| --- =|= [[This green text links to the example passage!->example]] =|= |code>[`This green text links to the example passage!->example]]`] |==| --- ##(text-colour:purple)[//Images//] These are inserted with (css:"color: pink;text-decoration: underline;")[(link-repeat:"HTML")[(open-url:"https://www.w3schools.com/html/default.asp")]]. For simplicity and convenience, I'll be showing how to insert images from the internet as long you have its address. --- =|= What you see =|= What you type |==| --- =|= <img src="https://walpurgistako.neocities.org/images/darling/life_with_you.png" width=100%> Specifying the width makes sure the image fits wherever we put it! =|= |code>[`<img src="https://walpurgistako.neocities.org /images/darling/life_with_you.png" width=100%> Specifying the width makes sure the image fits wherever we put it!`] |==| --- =|= <a href="https://vndb.org/v34/cv"> <img src="https://walpurgistako.neocities.org/Twine_Demo/Basics/planetarian.jpg" width=100%> </a> Since we're using HTML anyway, here's how to insert images with links. Try cliking the pic above! =|= |code>[`<a href="https://vndb.org/v34/cv"> <img src="https://walpurgistako.neocities.org /Twine_Demo/Basics/planetarian.jpg" width=100%> </a> Since we're using HTML anyway, here's how to insert images with links. Try cliking the pic above!`] |==| --- =|= =><= [[<img src="https://walpurgistako.neocities.org/88x31/jars_seph_88x31.gif">->example]] <== Click the button to go to the [[example]] passage! =|= |code>[`=><= [[<img src="https://walpurgistako.neocities.org /88x31/jars_seph_88x31.gif">->example]] <== Click the button to go to the [[example]] passage!`] |==| --- ##(text-colour:purple)[//CSS//] WIP too lazy to write it rn here's a (css:"color: pink;text-decoration: underline;")[(link-repeat:"CSS Reference")[(open-url:"https://www.w3schools.com/Css/")]] though For a more exhaustive list, here's the (css:"color: pink;text-decoration: underline;")[(link-repeat:"documentation")[(open-url:"https://twine2.neocities.org/")]]. (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

Welcome to the Editor! <img src="https://walpurgistako.neocities.org/Twine_Demo/Editor/Overview.png" width=100%> this is a WIP bc i have a bit of stuff to do but the most important thing to discuss in the text editor part

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ #(text-colour:purple)[(align:"=><=")+(box:"X")[(text-style:"outline")[''Course Zero'']]] ==> (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]] <== This passage aims to get you familiarized with terms we will probably be throwing around a lot throughout this doc. I've already used "passage" in this sentence, for instance. Harlowe is the default style for the Twine app. With Harlowe, we'll be looking at two distinct types of text within our passages: Macros and Hooks. Before that, let's define what a passage is. ##(text-colour:purple)[//Passages//] Essentially, these are the pages of a Twine story. They're the little blocks in the [[Editor]] that connect to each other. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Passages_1.png" width=100%> Each passage must have a name. This name is case-sensitive, so "[[start]]" is different from "[[Start]]." In the editor, creating a passage is as simple as enclosing `[[a word]]` in double brackets <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Passages_2.png" width=100%> Look, we've made one already! We can write whatever onto a passage. Try making a new project and make like, 5 passages with links to each other. Here's an example of how Twine stories are typically formatted, with regards to the links. The game below is (css:"color: pink;text-decoration: underline;")[(link-repeat:"Coloratura")[(open-url:"https://www.maderealstories.com/games/Coloratura-twine.html")]]. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Passages_3.png" width=100%> The basic idea is that every page takes place at a certain location or event within the story. While it's not a hard rule, it can be a good guideline to consider if you're having trouble deciding which parts of your story should be links to passages. ##(text-colour:purple)[//Macros//] These are the invisible parts of a passage that change things in the background. A common use for them is to change text formatting, such as color and style for aesthetic effect. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Macros_1.png" width=100%> You can identify a macro by the parenthesis and colored lettering within a passage. The macro above does exactly what it looks like it does! It changes the font size to half of the usual, and makes the text italic and blurry. This specific type of macro is called a //changer//, which must be attached to a hook (more on that later). Multiple changers can also be added to the same hook, simply by adding a plus sign between them. Macros can do a lot of things, and you can see a list when you click the `(Macro:)` button in the toolbar. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Macros_2.png" width=100%> For further information on how macros work, whether specific or general, it's best to consult the (css:"color: pink;text-decoration: underline;")[(link-repeat:"documentation")[(open-url:"https://twine2.neocities.org/")]]. ##(text-colour:purple)[//Hooks//] A hook is simply a special portion of text. "Special" in that it is distinct from the rest of the text within a passage, usually because changers are applied to it. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Macros_1.png" width=100%> You can define a hook by enclosing a portion of text within single brackets. This way you can (font:"Comic Sans MS")[really control] (text-colour:magenta)[what portions of your text] (text-style:"shadow")[you want to affect.] <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Hooks_1.png" width=100%> Note: if you find changers aren't working like you expect with the plus signs, try wrapping the changer as part of a hook. <img src="https://walpurgistako.neocities.org/Twine_Demo/Course0/Hooks_2.png" width=100%> (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

this isn't the start of the story !!

Welcome to the ''example'' passage! (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ #(text-colour:purple)[(align:"=><=")+(box:"X")[(text-style:"outline")[''Simple Inventory System'']]] ==> (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]] <== The simplest way to create an inventory system is to give every item a variable that says you have it or not. That's a bit tedious, though, and doesn't really help visualize an //inventory// for us. ##(text-colour:purple)[//Making a Bag//] In Harlowe you can create *arrays* which are essentially groups of things. Rather than a bag, it's more accurate it to visualize it as medicine containers. =><= <img src=https://walpurgistako.neocities.org/Twine_Demo/Inventory/Pill_Organizer_With_Vitamins_And_Medicines.jpg width=60%> <== Each of the little boxes can have an item in it. You can place items and remove items as long as you specify which of the individual containers you're referring to. So let's make an array to represent our MC's bag. (set: $inventory to (a:)) \ --- =|= What you type =|= What happens? |==| --- =|= |code>[`(set: $inventory to (a:))`] =|= We create a variable named (text-colour:blue)[''`$inventory`''] to represent the, uh, inventory. This (text-colour:blue)[''`$inventory`''] variable contains an array, created with the (text-colour:magenta)['' `(a:)`''] macro |==| --- ##(text-colour:purple)[//What Now?//] Well, whatever we want! Basically, we can add anything to our (text-colour:blue)[''`$inventory`''] variable. (set: $inventory to $inventory + (a: "a slice of cheese")) \ --- =|= What you type =|= What happens? |==| --- =|= |code>[`(set: $inventory to $inventory + (a: "a slice of cheese"))`] =|= We add to our (text-colour:blue)[''`$inventory`''] an item, (text-colour:cyan)[a slice of cheese] to be exact! |==| --- We can check what items are in our inventory by simply typing (text-colour:blue)[''`$inventory`''] where we want our inventory to be. Take this [[view inventory]] passage, for instance. Currently, we only have a slice of cheese, though. How about you try clicking the following link to (link-repeat:"add a pouch of feathers")[(set: $inventory to $inventory + (a: "a pouch of feathers"))] to your inventory! (Clicking it multiple times adds more than one!) Try to [[view your inventory->view inventory]] again! You'll notice there's no spaces after the commas and it looks a little messy, but uh, it technically gets the job done... Let's clean up a little in preparation for the next section. Click the following link to (link-repeat:"remove a pouch of feathers")[(set: $inventory to $inventory - (a: "a pouch of feathers"))] from your inventory! We'll have (text-colour:cyan)[a slice of cheese] left, so let's use the alternative method to remove it (which also completely clears your inventory!). I'll also now be showing how to create those little buttons that do things! --- =|= What you see =|= What you type |==| --- =|= (link-repeat:"Click me to clear your inventory!")[(set: $inventory to (a:" "))] =|= |code>[`(link-repeat:"Click me to clear your inventory!")[(set: $inventory to (a:" "))]`] |==| --- The link replaces your whole inventory with a `" "` (space), so it looks like it's empty! This does mean you technically have a " " in your inventory, though. Check it out [[here->view inventory]]. ##(text-colour:purple)[//Doing Things With Items//] This sorta doubles as an overview on what you can do with variables. The most basic thing we can do is check if a certain item is in the inventory. We have a [[door]] over here, but without a key, we can't open it! Here! I'll give you a (link-repeat:"key")[(set: $inventory to $inventory + (a:"key"))]! Try opening the [[door]] again! ##(text-colour:purple)[//Visualizing the Bag//] It's a bit tedious for the player to have to click a button every time they want to check their inventory. Let's try making a sidebar to list all the items in our inventory! To do that, let's go over [[here->sidebar space]]! (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ In my inventory is: $inventory --- Code for this page --- |code>[`In my inventory is: $inventory`]

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ (if:$inventory does not contain "key")[This door is locked!]\ (else:)[=You unlocked the door with the key! Behind it is the passage's code!! --- |code>[=\ `(if:$inventory does not contain "key")[This door is locked!]\ (else:)[=You unlocked the door with the key! Behind it is the passage's code!!`

(enchant:?code, (text-colour:grey)+(font:"monospace")) \ \ (append:?sidebar)[$inventory]\ We can use Harlowe's built-in (text-colour:cyan)[''?sidebar''] hook to show the player what items they have! If you have a lot of items in your inventory, you can see it's a bit poorly formatted but it's, technically functional. Well, we can fix that up with some (css:"color: pink;text-decoration: underline;")[(link-repeat:"CSS")[(open-url:"https://www.w3schools.com/Css/")]] ! You can even update the inventory within a passage! Try picking up this (link:"diary")[(append:?sidebar)[<img src="https://walpurgistako.neocities.org/ Twine_Demo/Inventory/yumenikki_88x31.gif" width=100%>](show:?diary)diary] up. |diary)[I think icons work with this system a lot better, personally. (The maximum width for the sidebar without modification is 72px)] Here's the full source code for the passage. It gets a bit messy with all these links and stuff, though. --- |code>[\(verbatim:)[ (append:?sidebar)[$inventory]\ We can use Harlowe's built-in (text-colour:cyan)[''?sidebar''] hook to show the player what items they have! If you have a lot of items in your inventory, you can see it's a bit poorly formatted but it's, technically functional. Well, we can fix that up with some (css:"color: pink;text-decoration: underline;")[(link-repeat:"CSS")[(open-url:"https://www.w3schools.com/Css/")]] ! You can even update the inventory within a passage! Try picking up this (link:"diary")[(append:?sidebar)[<img src="https://walpurgistako.neocities.org/ Twine_Demo/Inventory/yumenikki_88x31.gif" width=100%>](show:?diary)diary] up. |diary)[I think icons work with this system a lot better, personally. (The maximum width for the sidebar without modification is 72px)]] ] (text-size:0.5)+ (text-style:"italic","blur")[return to the [[index]]]