(Twine) Advanced Juice

Estimated Time Investment : 90 minutes

Customize window background

• Identify a nice color palette (set of colors) using a tool such as Coolors.

Play your twine game (and twine game) in your web browser.

In order to customize the way things look in our game, we should look “under the hood” of the web page by using our web browser’s debugging tools.

• Here’s an example in Firefox
• Here’s an example in Chrome

Note the various elements that make up your web page (one is called body, one is called head, one is called “ui-bar”, etc).

For now, we care about the “body” element. We can change its color CSS property to make the background look different.

Place the following CSS code into your “Edit Story Stylesheet” window. * Note that the “#3b6015” is the hex color code for a dark green hue.

And there we go! By editing the CSS styling of our web page, we can control how various elements look (there are many more properties one may experiment with, far beyond the “background-color” we used above).

CSS styling is a large and impactful subject beyond the scope of this course, but if you’d like to know more, please read a beginner tutorial on the subject, attend office hours, or register for EECS 493 : Intro to UI.

Download this PNG image file of a notebook.

Clickable Images

If you have some images in your game, we can use them to transition from passage to passage (rather than text links) for a little extra juice.

• If you don’t have any images, locate some on OpenGameArt.org
  • Alternatively, you may use these images of Sandy and Chuck.
• In order to change our passage after an image, is clicked, we need to change the “scope” of the Sugarcube “Engine” class (if you don’t know what these things mean, no worries).
  • Visit the “Edit Story Javascript” window in twine.
  • Add window.Engine = Engine; like so.
• Add at least two images to your game, representing two different “passages” you want to go to (or in our case, two different characters to select).

• In order to make something happen when an image is clicked, we need to add some additional code to each image. Study the image below–

Can you tell what changed?

• There is a new “onclick” section that includes the code “Engine.play(‘Sandy’);”
  • This is telling Twine that, when the player clicks this image, we should go to the passage named ‘Sandy’.
  • Note how in the second image, the passage we go to is named ‘Chuck’ instead.
• Congratulations! You may now click an image to visit a passage (rather than clicking a text link).

Disabling restarts / saves / navigation

• Add the following line to your story javascript.

• Add the following to your story stylesheet.

^ Your sidebar is now empty! You may put things into it using the special “StoryCaption” passage.

Basic Javascript : Timer

If you have web development / javascript experience, you may add additional, flexible logic to your game in the form of javascript code. In this section, we’ll build a basic timer.

• Create a new passage in your Twine story called “Time Over”.
• Add the following javascript code (which you can get in a text file here) to your Story javascript–

• Congratulations– your game will now end after 10 real-time seconds! Better play quickly!

• If the above code does not make sense to you, explaining it is a bit beyond the scope of this course. Please consider attending Austin’s office hours, taking EECS 183, or studying a beginner javascript tutorial.

Process Exercise Requirements

[ ] Create a short new game on itch.io

[ ] This game must have at least one change (color texture, etc) to the window’s background (see the first section above).

[ ] This game must have at least one clickable image.

[ ] This game must have disabled restarts / history / saving in the sidebar (but it should also have another means to restart the game, such as a link at the ending / game over screen to return to the beginning).