Meeting 6

LVL2

 

Progress Presentation, Thurs. 4/3

You will be presenting your game design progress. This is the Thursday after Spring Break.

 

---

Design office identity/identities!
This is for ANY collaborative teams (2 or more members)!
I will make websites for your design offices.

Send me:

1. Name of your design office/team
2. A slogan
3. An image for your page (logo, symbol, mascot, etc.)
4. A background color (hex#)
5. Text color (hex#)
6. A list of members, and your professional roles

 

LVL1

 

Twine

Twinery.org

 

Some Twine story examples:

Ella Stevenson
Adrian Martinez
Felix Romero

 

Recommended!

"Harlowe" is the default story format in Twine. Change it to "Sugarcube" just in case you would like to add advanced features (CSS, sound, Twine code).

In the top menu:
Twine >> Story Formats
Then select "SugarCube 2.37.3" and set it as the new default story format.

 

What to type in passages

Always give a passage a title. Keep it short.

You can type text into a passage, and you can also include HTML!

<h1>   </h1>	This creates the biggest header text
<h2>   </h2>	This creates header text, but a bit smaller
<strong>   </strong>	This will boldface text
<em>   </em>	This will create italics

 

To make a link to a new passage

Use:   [[   ]]

Format:   [[ desired text -> next passage title ]]

(Or:   [[ desired text | next passage title ]] — same thing)

 

Adding images – hotlinking

You can copy the full URL (web address) of an image file on the web, and use it in your Twine passage.

Here is starter code to copy'n'paste:

<img src="">

<img src="paste the full URL here">

For example: if I search for Mario and find a picture in Google Images, I can view it and then right-click and Copy image address

This is the data on my clipboard after copying:
https://pngimg.com/uploads/mario/mario_PNG71.png

The I can write the HTML tag and paste in the url.

<img src="https://pngimg.com/uploads/mario/mario_PNG71.png">

 

Changing colors/backgrounds with CSS code

In the top navigation, select Story and then #Stylesheet. If you have learned some CSS in the past, you'll see that Twine uses its own modified version of the code.

To change the background and text-color of your story:

tw-story {
  background: red;
  color: yellow;
}

You can use a background image instead of a background color:

tw-story {
  background: url(paste image URL here);
  background-size: cover;
}

tw-story {
  background-image: url(https://www.reefdoctor.org/wp-content/uploads/cavern1.jpeg);
  background-size: cover;
}

If you would like a unique background image for a passage, then you will need to tag the passage:

Name the tag (just a single word), and then you can use the unique tag in your CSS code:

tw-story {
  background-image: url(https://www.reefdoctor.org/wp-content/uploads/cavern1.jpeg);
  background-size: cover;
}

tw-story[tags="yourTagName"] {
  background-image: url(some other image URL);
background-size: cover;
}