eXperience Polish To Do

If you are interested in participating in eXperience Play (XP) remotely, I’m going to provide a to-do list of items each week. These to-do lists will include a variety of tasks such as playing games, reflecting, blogging, and portions of game development. If you complete all five to-do lists, you will produce an educational text-based game in five weeks. This post corresponds with the fourth session of XP.

Part 1 – Game Development

1. Review the following Twine Syntaxes and guides:

Add Media (Etc.) With These Twine Syntaxes
Content Type Syntax Examples (Change Underlined Content)
Audio* <audio src=”file.mp3” autoplay></audio>
Image* <img src=”file.png” height=”pixel #“>
Line <hr>
Link <a href=”http://url.com” target=”_blank”>Click Here</a>
YouTube Video <html>
<iframe width=”100%” height=”pixel #” src=”https://url.com/embed/code” frameborder=”0″ allowfullscreen></iframe>

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

Please note, these are the 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

Change Your Twine Game's Appearance with CSS

You can customize your Twine game in various ways using the Story Stylesheet in Twine and some CSS (Cascading Style Sheets) 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):

Screen Shot 2016-10-04 at 10.12.58 AM

Example Twine CSS Code

  • Remove the “back arrow” button in your Twine game:
tw-icon.undo { display: none; }
html { background-color: black; }
tw-passage { color: green; }
/* 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. */

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

Free Images, Additional Guides, & Resources

Free (Open) Images

Twine Syntax

CSS Guides

Downloadable Twine Game

Download Election Simulator 2016 and import it into Twine to review how it was built.

2. Using the above syntaxes, guides, and everything you have learned in the past few weeks, continue working on your game until it’s complete.

For reference, here’s an example Twine game from a participant of XP:

Example Twine Game, units, made by an XP participant

3. Find someone to play your completed game and give you feedback. Use this opportunity to make more revisions. Again, I’d recommend getting reviews from individuals in your vicinity since your game is stored locally on your computer for now.

Part 2 – Professional Development

4. Write a blog post about your experience building your game using the following prompt:

Blog Prompt
  • Document how your game has changed from last week. I encourage you to include a screenshot of your final product.
  • Reflect and write about how peer-review and feedback has impacted your game’s design.
  • Research and define “Peer-Peer Learning” in your own words.

Get your Twine game as closed to complete as possible by next session.  Feel free to share screenshots of your progress with me via Twitter or email or reach out with any questions.