THE BASICS
Download the TWINE App
Visit twinery.org and download the Twine app to your computer.
Below is an example of what a basic TWINE game looks like behind the scenes.
Set Up the Story Mode
Make sure you are using the SugarCube story format for this lesson to work.
To change the story format, click on
Twine, then click Story Formats and select SugarCube.
Starting a New Story
Open the TWINE app.
In the top left corner,
– Click the + New button.
– Give your story a name (you can change this later).
– Click the ✓ Create button.
Adding a Passage
A passage is like a page in a book. Or you can see it as a new scene on a screen.
The format to add a new passage is as follows:
[[What the reader sees|name_of_passage]]
For example,
Here is my story. You are walking down the street and see a cute dog.
You now have two choices:
[[Stop and pet the dog|pet]] or [[ignore the dog and keep walking|leave]].
This is what the reader of the story will see:
Here is my story. You are walking down the street and see a cute dog.
You now have two choices:
Stop and pet the dog or ignore the dog and keep walking.
On the TWINE app, two new passages will appear:
pet and leave
Adding Some Styling
To see what your game currently looks like, click on
Build, then click Play.
The game is functional, but is doesn’t look too appealing.
We can add some style elements by using CSS coding.
Everything you need to know about CSS coding: CSS Tutorial
To access the style document of the game, click on
Story, then click # Stylesheet.
The first things we are going to change are:
- The background color
- The font color
- the font size
All three of these are captured under the body category as shown below:
body {
background-color: white;
color: black;
font-size: 150%;
}