To work collaboratively in small groups to design and build an original interactive narrative game.
We must begin by mapping out a branching decision tree to visualize user journeys.
It must also be ensured that we construct a complex web of at least ten passages, incorporating diverging paths and embedding multimedia elements (images/video) and custom typography.
My Objective (Self-Initiated Work)
I developed the game with the ideas we discussed as a group in class. It was a fun experience, although I did not get the time to add images and personalised text. Regardless, the game is still playable and mysterious.
The Architecture of Agency in Twine
Twine strips away the visual complexities of traditional game engines, focusing entirely on the relationship between text, space, and choice. The physical mapping of passages quickly reveals the actual boundaries of player agency, forcing a writer to confront whether their game offers genuine freedom or merely guided selection. The challenge lies in creating meaningful complexity without letting the narrative branch into a chaotic web of unmanageable paths.
Key Insight: True narrative depth comes not from maximizing the number of choices, but from maximizing the weight of irreversible consequences. The game is less about what the player chooses, and more about how they feel about the result of that choice.
PLAY THE GAME: A DAY IN THE LIFE OF A STUDENT AT LEEDS
a day in the life of leeds student<style>
/* Import the font */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
tw-story {
/* 1. If image fails, this black color will show instead of grey */
background-color: #050505;
/* 2. New Background Image: Rain on a dark window */
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("https://images.unsplash.com/photo-1515694346937-94d85e41e6f0?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
background-size: cover;
background-position: center;
background-attachment: fixed;
font-family: 'Crimson Text', serif;
color: #c0c0c0;
font-size: 20px;
}
/* The Text Box */
tw-passage {
background-color: rgba(12, 12, 12, 0.9); /* Almost opaque black */
border: 1px solid #444;
box-shadow: 0 0 25px #000; /* Deep shadow */
padding: 40px;
border-radius: 2px;
max-width: 800px;
margin: 5% auto;
line-height: 1.6;
}
/* The Stats Bar */
.rpg-hud {
border-bottom: 1px solid #444;
padding-bottom: 15px;
margin-bottom: 25px;
display: flex;
justify-content: space-between;
font-size: 16px;
font-style: italic;
color: #777;
}
.stat-group { display: flex; align-items: center; gap: 10px; }
.label { letter-spacing: 1px; font-size: 13px; text-transform: uppercase; color: #555; }
.value { color: #ddd; font-weight: 600; }
.sanity-bar { color: #5D8AA8; text-shadow: 0 0 5px rgba(93, 138, 168, 0.5); }
/* Link Styling */
tw-link {
color: #aeb6bf !important;
transition: all 0.3s ease;
text-decoration: none;
border-bottom: 1px dotted #555;
}
tw-link:hover {
color: #fff !important;
border-bottom: 1px solid #fff;
text-shadow: 0 0 4px #fff;
}
</style>
(set: $money to 4.20)
(set: $sanity to 80)
(set: $stress to 15)
<div class="rpg-hud">
<div class="stat-group">
<span class="label">Sanity</span>
<span class="value sanity-bar">(print: (str-repeated: ($sanity / 20), "◆"))</span>
</div>
<div class="stat-group">
<span class="label">Time</span>
<span class="value">07:00 AM</span>
</div>
<div class="stat-group">
<span class="label">Funds</span>
<span class="value">£(print: $money)</span>
</div>
</div>
You are an (text-style: "italic")[ordinary] Master's student at the University of Leeds.
Outside your window, the (text-colour: "#708090")[grey English sky] promises rain. The condensation on the glass blurs the view of the red-brick terraces. The room is small, cluttered, and smells faintly of old books and damp clothes.
One Monday morning, the silence is broken.
(text-style: "shudder")[(text-colour: "#cd5c5c")[The alarm rings.]]
It is a jarring, digital sound that cuts through your dreams. You stare at the ceiling. The day hasn't even started, and you already feel the weight of it.
<br>
**What will you do?**
<br>
[[Wake up and take a shower]]
[[Switch off alarm and go to sleep]]
[[Go for a run]]<style>
/* 1. BACKGROUND & SCROLLING */
html, body {
margin: 0; padding: 0; width: 100%; min-height: 100vh;
background: #000;
}
tw-story {
width: 100%; min-height: 100vh;
overflow-y: auto !important;
/* ACTION: Subtle dark red/brown gradient for kitchen warmth */
background: linear-gradient(135deg, #2c1a1a, #1a1a1a, #000000);
background-size: 180% 180%;
animation: bg-kitchen 15s ease infinite;
font-family: 'Crimson Text', serif;
color: #e0e0e0;
}
@keyframes bg-kitchen {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');
/* 2. TEXT BOX */
tw-passage {
position: relative;
background: rgba(20, 15, 15, 0.92); /* Dark Warm Box */
border: 1px solid #553333;
box-shadow: 0 10px 40px rgba(0,0,0,0.9);
padding: 40px;
border-radius: 4px;
max-width: 700px;
margin: 50px auto 100px auto;
line-height: 1.6;
font-size: 20px;
}
/* 3. HUD */
.rpg-hud {
border-bottom: 1px solid #553333;
padding-bottom: 15px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
font-size: 16px;
font-style: italic;
color: #aaa;
}
.label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #885555; }
.value { color: #eee; font-weight: 700; }
/* GREEN GLOW for Health/Food */
.sanity-bar {
color: #2ecc71;
text-shadow: 0 0 10px rgba(46, 204, 113, 0.8);
letter-spacing: 3px;
animation: pulse-green 3s infinite;
}
@keyframes pulse-green {
0%, 100% { text-shadow: 0 0 5px rgba(46, 204, 113, 0.5); }
50% { text-shadow: 0 0 15px rgba(46, 204, 113, 1); }
}
/* 4. BUTTONS */
tw-link {
display: block;
color: #d7bde2 !important;
padding: 15px 20px;
margin: 10px 0;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, transparent 100%);
border-left: 2px solid #553333;
transition: all 0.3s ease;
text-decoration: none;
font-size: 18px;
}
tw-link:hover {
color: #fff !important;
background: linear-gradient(90deg, rgba(46, 204, 113, 0.2), transparent);
border-left: 5px solid #2ecc71;
padding-left: 35px;
box-shadow: 0 0 15px rgba(46, 204, 113, 0.3);
}
</style>
(if: $sanity is 0 or $sanity is not a number)[(set: $sanity to 80)]
(if: $money is 0)[(set: $money to 4.20)]
(set: $money to $money - 2.50)
(set: $sanity to $sanity + 15)
(set: $time to "08:30 AM")
<div class="rpg-hud">
<div class="stat-group">
<span class="label">Sanity</span>
<span class="value sanity-bar">(print: (str-repeated: (round: $sanity / 20), "◆"))</span>
</div>
<div class="stat-group">
<span class="label">Time</span>
<span class="value">$time</span>
</div>
<div class="stat-group">
<span class="label">Funds</span>
<span class="value">£(print: (max: 0, $money))</span>
</div>
</div>
You whip up a healthy omelette and toss some fresh berries in a bowl.
The food is warm and grounding. You feel full and refreshed. Your mind is sharp.
You check your schedule. You have a meeting regarding your dissertation. You decide to head to campus.
<br>
[[Go meet your professor]]You decide to save time and money and skip breakfast. You head straight to the Laidlaw Library to work.
By 1:00 PM, your stomach is doing accurate impressions of blue whales, so loud that the person at the next desk glares at you. You can't focus. You need food.
You open your banking app. Balance: £4.20. Until Wednesday.
You sigh and [[Go to the Supermarket]]<style>
/* 1. FORCE BACKGROUND & FIX SCROLLING */
html, body {
margin: 0;
padding: 0;
width: 100%;
min-height: 100vh; /* Allow page to grow */
background: #000;
}
tw-story {
width: 100%;
min-height: 100vh; /* Ensures background covers everything */
/* THE FIX: Allow vertical scrolling */
overflow-y: auto !important;
/* The Moving Background Animation */
background: linear-gradient(300deg, #1a1a1a, #2c3e50, #000000);
background-size: 180% 180%;
animation: bg-shift 12s ease infinite;
font-family: 'Crimson Text', serif;
color: #e0e0e0;
}
/* Background Animation */
@keyframes bg-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Import Font */
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,700;1,400&display=swap');
/* 2. THE TEXT BOX */
tw-passage {
position: relative;
background: rgba(15, 15, 20, 0.9); /* Dark box */
border: 1px solid #444;
box-shadow: 0 10px 30px rgba(0,0,0,0.8);
padding: 40px;
border-radius: 4px;
max-width: 700px;
/* Center the box but allow space at bottom for scrolling */
margin: 50px auto 100px auto;
line-height: 1.6;
font-size: 20px;
}
/* 3. THE HUD */
.rpg-hud {
border-bottom: 1px solid #555;
padding-bottom: 15px;
margin-bottom: 30px;
display: flex;
justify-content: space-between;
font-size: 16px;
font-style: italic;
color: #888;
}
.label { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #666; }
.value { color: #eee; font-weight: 700; }
/* Sanity Glow */
.sanity-bar {
color: #00ced1;
text-shadow: 0 0 10px rgba(0, 206, 209, 0.8);
letter-spacing: 3px;
animation: flicker 4s infinite;
}
@keyframes flicker {
0% { opacity: 1; }
96% { opacity: 0.5; }
98% { opacity: 1; }
99% { opacity: 0.2; }
100% { opacity: 1; }
}
/* 4. ACTION BUTTONS (Hover Animation) */
tw-link {
display: block;
color: #b0c4de !important;
padding: 15px 20px;
margin: 10px 0;
background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, transparent 100%);
border-left: 2px solid #555;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
text-decoration: none;
font-size: 18px;
}
tw-link:hover {
color: #fff !important;
background: linear-gradient(90deg, rgba(0, 206, 209, 0.2), transparent);
border-left: 5px solid #00ced1;
padding-left: 35px; /* ACTION: Slides right aggressively */
box-shadow: 0 0 15px rgba(0, 206, 209, 0.3);
}
</style>
(if: $sanity is 0 or $sanity is not a number)[(set: $sanity to 80)]
(if: $money is 0)[(set: $money to 4.20)]
(set: $sanity to $sanity + 5)
<div class="rpg-hud">
<div class="stat-group">
<span class="label">Sanity</span>
<span class="value sanity-bar">(print: (str-repeated: (round: $sanity / 20), "◆"))</span>
</div>
<div class="stat-group">
<span class="label">Time</span>
<span class="value">07:30 AM</span>
</div>
<div class="stat-group">
<span class="label">Funds</span>
<span class="value">£(print: $money)</span>
</div>
</div>
You drag yourself out of bed and step into the shower.
The hot water wakes you up, washing away the grogginess of the weekend. You dry off and get dressed.
Your stomach rumbles. You need fuel for the day.
<br>
**You choose to eat:**
[[Berries and omelette]]
[[Cup of coffee and chicken shawarma]]
[[Skip breakfast]]"Just five more minutes," you mumble.
You wake up with a jolt. The light in the room has changed. It’s 1:30 PM. You’ve missed your "Digital Practices" lecture completely. Your phone has three missed texts from your course mate asking where you are.
You groan and roll over. The heating in your student house hasn't come on, so the room is freezing. You feel groggy and unmotivated. There's no point going to campus now.
You decide to stay in your room. You hear your housemates laughing in the kitchen, but you just want to be alone. You sit on your bed, staring at the wall.
Suddenly, the laughter in the kitchen stops. The house goes dead silent.
[[Open your bedroom door to check]]You lace up your trainers and head out. The morning air is crisp and smells faintly of damp leaves and last night's rain. You jog towards Hyde Park.
It’s quiet, save for a few other runners and the seagulls picking at an overflowing bin from a weekend house party. As you loop around the park, breathing in the cold air, you spot a familiar figure sitting on a bench near the statue, clutching a briefcase tight to his chest.
It's your Professor. He looks terrified. He spots you and waves you over frantically.
[[Approach the Professor]]
[[Keep running and ignore him]]You crave something heavy. You order a large chicken shawarma and brew a strong cup of coffee. It tastes amazing, but as the grease settles in your stomach, you feel a bit lethargic.
The thought of walking all the way to the Roger Stevens building for your assignment seems impossible right now.
[[Stay home and watch TV]]You arrive at the office. Your professor looks pale. He locks the door behind you, his hands shaking. He reveals that your assignment has uncovered something it shouldn't have. Your life is in danger.
"A man from a billion stars away will come to you," he whispers, gripping your shoulder. "You must NOT look him in the eyes."
You stare at him. This sounds insane.
You choose to:
[[Believe him]]
[[Don't believe him]]You decide to go watch some television instead of working on your assignment. The shawarma has made you heavy, and the drone of the TV is hypnotic. Your eyelids grow heavy, and you drift off on the couch.
3 hours later...
You open your eyes groggily. The TV is off. The room is silent.
You see a man standing before you. He is wearing a plain black suit. His eyes are closed, but it feels as though he is looking right at you.
You are shocked and frozen in place. Slowly, he opens his eyes.
You choose to:
[[Look him in the eyes]]
[[Look away]]You see the genuine terror in the Professor's face. You nod slowly. "Okay. I believe you. What do I do?"
He hands you a heavy, iron key. "Go to the basement of the library. Do not go home."
[[Go to library]]You laugh nervously. "Is this a joke, Professor?"
You grab your bag and leave the office, ignoring his pleas for you to stop. You head back to your flat, unaware that the sky outside has turned a strange shade of purple.
[[Go home]]Reflex takes over. You look straight into his eyes.
They aren't human eyes. They are deep voids, swirling with galaxies, dying stars, and events that haven't happened yet. You see the birth of the universe and the death of the sun. The information overloads your human brain instantly.
Your student house in Leeds dissolves. The damp walls, the smell of toast, the grey sky, it all shatters like glass. You are no longer a student. You are no longer human. You are part of the collection now.
ENDING 1: CONSUMED BY THE COSMOS [[Play Again ->Monday Morning]]You remember a strange instinct, or perhaps a whisper in your mind telling you not to look. You squeeze your eyes shut and throw yourself off the couch, scrambling toward the kitchen door.
You hear a sound behind you like cracking thunder.
[[Run out the back door]]You burst into the Brotherton Library. Following the Professor's instructions, you find the iron door. You jam the key into the panel and twist.
The floor drops. You plummet past the basement, past the foundations, deep into the earth.
When the doors open, you are in a vast, circular cathedral made of obsidian. Floating in the center of the room is a single, glowing book. The Man from the Stars is standing right behind you. You can feel his cold radiation.
You run to the book and slam your hand onto the cover.
You suddenly understand everything. You know why the stars burn. You know how the universe was made. You turn to face the man. He steps back.
You are no longer a student. You are the Architect.
"Class is in session," you say.
ENDING 3: THE ARCHITECT [[Play Again ->Monday Morning]]You walk back to your flat. The purple hue in the sky fades, returning to a normal grey. You chuckle to yourself. "Stress," you mutter. "Just exam stress."
You enter your house. Your housemates are there, sitting on the sofa. They turn to look at you in perfect unison. They smile. It is a wide, unblinking smile.
"Welcome home," they say, their voices layering over each other perfectly.
You sit down. The TV is playing static, but you find it incredibly interesting. You forget about your assignment. You forget about the Professor. Everything is fine. You are happy. You will be happy forever.
ENDING 4: IGNORANCE IS BLISS [[Play Again ->Monday Morning]]You scramble over the back fence, tearing your jeans. You don't stop running until you hit Leeds Train Station. You buy a ticket for the first train leaving the platform, the 14:05 to Edinburgh.
You collapse into a seat, your chest heaving. The whistle blows, and the train lurches forward. You watch the station fade away. You are safe. You close your eyes and exhale.
"Tickets, please," a voice says.
You open your eyes. The conductor is standing over you. But... the carriage is empty. And outside the window, the green fields of Yorkshire are gone. There is only a swirling purple nebula. The train isn't moving along tracks, it is gliding through deep space.
The conductor smiles. He is wearing a plain black suit.
"We have a long journey ahead," he says. "Next stop: Xirk 2048."
ENDING 2: THE ONE-WAY TICKET [[Play Again ->Monday Morning]]You slow to a walk and wipe the sweat from your forehead. "Professor? Everything alright?"
He looks around nervously, as if checking if anyone followed him from the campus. "I'm glad I found you," he whispers. "I couldn't risk emailing you on the university server."
He gestures for you to sit. He reveals that your recent dissertation draft has flagged something in the data. Your life is in danger.
[[Listen to his warning]]You really don't want to talk about your dissertation while you're in your running gear. You pretend you didn't see him, turning up your music and sprinting back toward your student house.
You get back to your flat, feeling energized but hungry.
[[Berries and omelette]]
[[Cup of coffee and chicken shawarma]]
"A man from a billion stars away will come to you," the Professor whispers, gripping your sweaty arm. "You must NOT look him in the eyes."
You stare at him, your heart rate still high from the run.
You choose to:
[[Believe him]]
[[Don't believe him]]You step out into the hallway. "Guys?"
No answer. The kitchen door is open. You walk in. Your housemates are gone, but a half-eaten toastie is still steaming on the counter.
Standing in the middle of the kitchen is a man in a plain black suit. He is facing the fridge, but you can feel his attention on you.
[[Look him in the eyes]]
[[Look away]] You walk into the store, bright fluorescent lights humming overhead. You head straight for the essentials.
You stand in the aisle, weighing your options.
You choose:
[[Buy the 25p Instant Noodles (Curry flavour)]]
[[Hunt for "Yellow Sticker" reduced items]]You grab three packets of the cheapest noodles available. It’s mostly salt and regret, but it will keep you alive.
You head to the self-checkout. You scan your items. Beep. Beep. Beep.
Suddenly, the screen flashes red. UNEXPECTED ITEM IN BAGGAGE AREA.
You haven't even put anything in the bag yet. You look up to find a store assistant to help you.
Standing behind the till, wearing a store uniform that doesn't quite fit, is a man in a plain black suit. He is staring at the screen, not you.
[[Tap him on the shoulder for help]]
[[Abandon the noodles and run]]You head to the back of the store where the "Reduced to Clear" shelf is. It's a goldmine today. You find a slightly squashed sandwich and a bag of doughnuts for 50p. Score.
As you reach for the sandwich, another hand reaches for it at the exact same time.
The hand is pale. Unnaturally cold.
You look up to apologize. It is a man in a black suit. He isn't looking at the sandwich. He is looking at the ceiling, yet you feel his gaze drilling into your forehead.
"You have a debt to pay," he says. "Not in money."
You freeze.
[[Look him in the eyes]]
[[Look away and run]] You run out of the store, the sounds ringing around you. You bump into a friend who invites you to a house party. Hoping to bag some free food, you accept the invitation.
[[Go to party]]You scramble backward, knocking over a display of promotional baked beans. You turn and sprint towards the exit... but the exit seems to be moving further away. The aisle stretches out infinitely.
The temperature drops rapidly. It’s freezing. You try to keep running, but your legs feel stiff. Your joints lock up. You can't breathe.
You look down at your hands. They are pressed against something cold and transparent. You are wrapped in tight cling film.
You try to scream, but the plastic is wrapped over your mouth. You look down at your chest. Slapped right over your heart is a bright yellow label:
REDUCED TO CLEAR Master's Student (Slightly Damaged)
Old Price: £9,000
NOW: 99p
A giant hand reaches down to pick you up and you close your eyes, accepting your fate.
You wake up to a loud blaring sound.
ENDING 5: THE STRESSED DREAMER [[Play Again ->Monday Morning]]"Excuse me, the machine is stuck," you say.
He turns his head slowly. Too slowly. The movement makes a sound like dry leaves crinkling. He looks at you.
"Your transaction is declined," he says. "Insufficient soul."
Reflexively, you [[Look him in the eyes]] You follow your friend into a damp terrace house. The bass from the music shakes the floorboards, a low thrumming sound that seems to sync perfectly with your heartbeat.
"Kitchen's through there," your friend yells, pointing down the hallway. "Help yourself to the buffet!"
You push through the crowd. The hallway feels impossibly long. The people you squeeze past feel cold to the touch. You finally burst into the kitchen, starving.
Standing around the kitchen island, eating pizza and drinking warm beer, are four people. They stop chewing and turn to look at you.
They are all wearing your coat.
They all have your face.
One of them, a version of you with deep bags under their eyes, puts down a slice of pepperoni pizza.
"Finally," the Other You says. "The 'Broke One' has arrived."
"What is this?" you stammer.
"This isn't a party," another version of you says from near the fridge. They are holding a textbook. "This is a merging point. The universe can only sustain one Master's student with our student debt level. We have to decide which one of us gets to exist tomorrow."
The version with the pizza slides a knife across the table toward you.
"We start at 12 AM," they say.
ENDING 6: THE COMMITTEE OF SELVES [[Play Again ->Monday Morning]]