Day 2

• 1st Twine Syntax – The most important tool—linking passages:

Link passages using [[this syntax]].

Here’s a variation on the [[syntax|Passage Title]].

• 2nd Twine Syntax – Add Text Within A Twine Passage:

Use the Hook and (click:) Twine syntaxes together:

[Click  this text to reveal]<hook| (Click: ?hook)[And now this text has appeared]

In practice:

• Continue planning games / Start working on games – this will be most of our time moving forward. Here’s what planning your game might look like:

Had fun storyboarding the "typology game" I am designing for #eXperiencePlay at OU. Aiming for something nonlinear. pic.twitter.com/mqeW5LkFll

— Mark Norris (@stipulative) September 20, 2016

• Video Guides – Too long to watch all in session:

Partner up with a colleague and describe your games/prototypes to each other. Feel free to share your current progress whether you’re still outlining on paper or building in Twine or both. Be sure to ask questions and give constructive feedback on the progress. For example, you can share one thing you like about your partners game and one thing you think might improve their  product.

Common Twine Syntaxes

*Requires a file to be available in the root folder of your Twine game or a url of a file.

Please note, these are some syntaxes I use in my Twine games—this list in no where near exhaustive and variations exist (refer to the Harlowe manual and Twine wiki for more details). You are welcome to use these syntaxes to alter and enhance your game. Here’s a tutorial to get you started:

Adding Images to Twine Games Tutorial

Cascading Style Sheets (CSS) are used to alter the appearance of web pages / html documents. There are several good CSS sheets already designed for Twine. You can  change the style from passage to passage to create a sense of movement for the player.

You can customize your Twine game in various ways using the Story Stylesheet in Twine and some CSS code. Using CSS, you can alter the presentation of your game including background and text color. For in-depth CSS view this guide and these resources. Otherwise, check out the basic Twine CSS below (copy any code you want into your game’s Story Stylesheet):

Example Twine CSS Code

• Remove the “back arrow” button in your Twine game:

tw-icon.undo { display: none; }

• Change the background color:

html { background-color: black; }

• Change the text color:

tw-passage { color: green; }

• Example CSS, (click here to see what this does):

/* Text between these symbols contains my comments. */
html { /* This CSS changes the background to a random image. */
 background-image: url("https://source.unsplash.com/random/1280x720"); 
 background-size: cover;
}

tw-story { /* Changes to text and text box, respectively. */
 color: black;
 text-shadow: 1px 1px grey;
 font-size: 24px;
 
 border: 5px black;
 border-radius: 20px;
 background: rgba(255,255,255,0.9);
 padding: 20px;
}

tw-link { /* Changes color of links. */
 color: rgb(51,179,166);
}

tw-icon.undo { /* Removes the undo button. */
 display:none;
}

If you want to dive deeper, here’s a look at Twine syntax and CSS:

Free (Open) Images

• Unsplash
• Pixabay
• Stocksnap

Twine Syntax

• Twine 2.0 Harlowe Manual (Complete Syntax Guide)
• Twine 2.0 Macros

CSS Guides

• Twine 2.0 Harlowe CSS Guide
• Pick colors in CSS
• Tag based CSS Hack

Downloadable Twine Game

Your welcome to download Election Simulator 2016 and import it into Twine to review how it was built.

Faculty’s Twine Board Example

Got started on the typology game I am making for #eXperiencePlay with @KeeganSLW and @jstew511. Liking it so far! pic.twitter.com/Mc5ETGeEw0

— Mark Norris (@stipulative) September 26, 2016

• What are the major take aways from today?
• What can game design and Twine teach our students? (i.e. Digital Literacy, Web Literacy, Media Literacy, etc.)
• What types of Twine games make you most excited?