eXperience Play 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 first session of XP.

Part 1 – Professional Development

1. Play the games listed here.

2. Reflect and write a blog post following this prompt:

Blog Prompt
  • Give a brief review of each game you played. (What aspects of each game were notable? How could these games be valuable to your course? Etc.)
  • Research & define “Meaningful Play” in your own words.

Part 2 – Game Development

3. Brainstorm ideas for a text-based game you want to produce over the next 5 weeks:

  • Think about what experience you want to communicate to students.
  • Consider what aspects of the games you played would be positive additions to your game.
  • Keep the scale and scope of your idea limited so you are able to complete your project in five weeks.

Please have your idea ready by next session.  Feel free to share your idea with me via Twitter or email or reach out with any questions.

eXperience Plan 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 second session of XP.

Part 1 – Game Development

1. Watch this video:

Think about the scope of the game you want to build and know that you do not have to make a perfect game on your first try. You are learning and experimenting!

2. Outline the story/choices of your game (from the idea you were brainstorming last week).

3. Create a storyboard to visually organize the outline of your game. Hold onto this storyboard for next week. Here’s an examples of how the connections in your storyboard may look:

Digital flow chart illustrating liner and circular organizations of stories in text-based games.

Please note that I’m not concerned with an “official” way to storyboard or plan your game. XP participants have developed flow charts on whiteboards, used notecards to represent each “scene” of their text-based game, setup spreadsheets to map out choices, and created digital flow charts using software like CmapTools. Use whatever tools you need/want while planning your game. If you have questions about this or want to engage with us, feel free to reach out to us.

Here’s another example of the planning taking place in XP:

Part 2 – Professional Development

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

Blog Prompt
  • Write an overview of the process you followed while planning your game. Document what tools you used (whiteboard, notecards, software, other, etc.) and include screenshots of your planning artifacts (complete or in-progress).
  • Reflect and write about how this outlining and storyboarding exercise helped you while planning your game. Alternatively, applying this activity to the classroom, how can outlining and storyboarding a concept or project aid a student?
  • Research & define “Digital Storytelling” in your own words. Describe your outlining and storyboarding exercise in the context of your definition of “Digital Storytelling.”

Please have your plan/storyboard for your text-based game ready by next session.  Feel free to share your storyboard with me via Twitter or email or reach out with any questions.

eXperience Produce 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 third session of XP.

Part 1 – Game Development

1. Install Twine 2.0 on your Windows, Mac, or Linux computer.

2. View this video introduction of Twine 2.0:

3. Review these two Twine Syntaxes we’ll use to build games this week (from the Harlowe story format):

Basic Twine Syntax

Link 2 Twine Passages (THE ONLY TOOL YOU NEED)

Link passages using [[this syntax]].

Twine Storyboard showing how [[]] syntax links passages

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

Twine Storyboard showing how [[|]] syntax links passages

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]

Twine Passage showing how hook and (click:) syntax works

4. Start building your game using your outline and storyboard from last week and the two Twine Syntaxes presented above.

Experiment with Twine as you are building, and realize your game will morph as you learn more. Plan on adding as much content as possible using the two outlined Twine Syntaxes. Next week, we will continue developing our games using more syntax tools, media, etc.

Here’s an example of an in-progress Twine game from XP:

5. Find someone to play your in-progress game and give you feedback. I’d recommend an individual in your vicinity since your game is stored locally on your computer for now.

Part 2 – Professional Development

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

Blog Prompt
  • Document how your game looks and functions as you are building it in Twine.
  • Write about what students are creating in your courses. (Ex: projects, papers, data analysis, etc.) How are these opportunities intended to engage students creatively?
  • Reflect and write about where game design might fit into your courses? What would you want students to learn from a game design project?

Please start building your text-based game using the (above) outlined Twine Syntaxes from last session’s storyboard/outline.  Feel free to share screenshots of your progress with me via Twitter or email or reach out with any questions.

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>
</html>

*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. */
 display:none;
}

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.

eXperience Publish 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 final session of XP.

Part 1 – Game Development

1. Finish your game.

As you finish, we recommend adding a credits and citation passage to your game. Credit any collaborators and cite all resources you used to build your game (pictures, etc.).

Additionally, consider the copyright you want associated with your Twine game. This Creative Commons page can help you determine what license might be right for you. At the bottom of that Creative Commons page is an HTML code you copy directly into a Twine passage after you decide what license you want associated with your content. This decision is important because copyright information tells others how they can use your materials without asking for your permission.

2. Publish your game!

Once your game is finished, you need to access your Twine game and “Publish to File:”

Showing where to "Publish to File" in Twine software

The exported HTML file from Twine can be uploaded just about anywhere (see available publishing platforms below).

(Note: If you used any media files, you will have to put them in a folder with your .html file and compress the whole folder to a .zip file before you upload it anywhere. You can download this game to see an example of a .zip file. If you have questions about this, please ask us.)

Publishing Platforms:

3. Celebrate completing your Twine project!

I’d do two things to celebrate: (1) send your game to your family, friends, colleagues, and/or students, etc. (2) play the games made by other XP faculty:

anne-boleyn-cover
biochem-adventures-cover
contain-gen-cover
election-simulator-2016-cover
las-medias-rojas-cover
lingu-cover
Sanctuary Cover
units-cover

Part 2 – Professional Development

4. Write a blog post about your participation in eXperience Play using the following prompt:

Blog Prompt
  • Give an overview of your game. I encourage you to include a screenshot of your final product.
  • Research and define “Digital Literacy” in your own words.
  • Reflect and write about what skills you practiced during your participation in eXperience Play. Which of these would you classify as Digital Literacy skills?

5. Consider running your own eXperience Play session or integrate text-based game development into your curriculum. If you had fun participating in XP, I expect your students would too!

Since XP is licensed as CC-BY-NC-SA, you don’t have to ask for permission to modify, use, or share our materials for any purpose as long as you are within the bounds of the license.

To get you stated, this page outlines each part of XP.


We had a lot of fun making games with you! 🙂 Let us know if you have any questions about running XP, using parts of XP, or participating in XP. You can reached out via Twitter or email.