-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy paththrillertheater.html
More file actions
158 lines (150 loc) · 7.87 KB
/
thrillertheater.html
File metadata and controls
158 lines (150 loc) · 7.87 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--CSS Styles -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Favicons -->
<!--<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/icons/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/icons/favicon-32x32.png"
/>->>
<!-- Animate CSS CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<title>Thriller Theater</title>
</head>
<body class="gamepage">
<nav>
<ul class="navigation">
<li><a href="index.html">Home</a></li>
<div class="dropdown">
<button class="dropbtn nav-link"><a href="index.html#projects">Stuff I've Made</a>
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="hookfoot.html" class="nav-link">Captain Hookfoot</a>
<a href="visvi.html" class="nav-link">Visvi</a>
<a href="wormgame.html" class="nav-link">Funny Worm Game</a>
<a href="bearswithguns.html" class="nav-link">Bears with Guns</a>
<a href="eden.html" class="nav-link">EDEN</a>
<a href="thrillertheater.html" class="nav-link">Thriller Theater</a>
<a href="shadow.html" class="nav-link">Shadow Mesh Generator</a>
<a href="graphics.html" class="nav-link">Graphics Programming</a>
<a href="wilderness.html" class="nav-link">Wilderness Supervision</a>
<a href="bestbefore.html" class="nav-link">Best Before 90 Seconds</a>
<a href="lucifur.html" class="nav-link">Lucifur</a>
</div>
</div>
<!--<li><a href="index#contact">Contact</a></li>-->
<li><a href="Demetrius Nekos Resume.pdf">Resume</a></li>
</ul>
<button class="burger-menu" id="burger-menu">
<ion-icon class="bars" name="menu-outline"></ion-icon>
</button>
</nav>
<main>
<div class="wrapper">
<div class="left">
<div class="info">
<h1>Thriller Theater</h1>
<p>Thriller Theater is a technical demo of a modular narrative game utilizing the Unity engine and Inkle's Ink framework. It was made over the course of just over a month during my Summer Studio class in the summer of 2021. It was made with a team of three, myself and two writers, and was in development at the same time as <i>EDEN</i> and <i>Bears with Guns</i>.</p>
</div>
<div class="info">
<h2>Features/Things I built:</h2>
<ul class="work-done">
<li>Ink Integration</li>
<li>Visual Novel framework</li>
<li>Detailed designer and writer friendly tools and documentation </li>
<li>Designer friendly implementation tools</li>
<li>Mystery investigation and clue systems</li>
<li>UI implementation</li>
</ul>
</div>
</div>
<div class="right">
<p class="itch">
<iframe width="560" height="315" src="https://www.youtube.com/embed/hYd0AIq2j3o" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</p>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Ink advancements and documentation</h1>
<p>To start production, I imported my work on the canceled Visual Novel project <i>Prince of Cooking</i>. That work included a revised version of my textbox and node systems from <i>Captain Hookfoot</i>, as well as some basic Ink functionality. I cleaned up that work and improved upon it, with most changes being to the Node system. I made it easier for designers to know what each node plays, by relying less on enums, and more on strings or object references. While that comes at the slight cost of memory allocation, the priority in this project was accessibility and ease of use for writers to implement thier work. I also greatly expanded opun how customizable the nodes are, allowing them to change as they are read, similar to the Interactable Node in <i>Hookfoot</i>.</p>
</div>
</div>
<div class="right">
<img src="img/node_thriller.png">
<center>The revised Node system, showing new options on how it reacts when clicked</center>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Clue system</h1>
<p>AS the player listens to dialouge and examines the environment, they can at points collect clues. Clues show up in their own menu, which can be opened and give descriptions of each clue. The clues themselves are activated by variables in Ink; at the start of the game each vaiable in the Ink file is binded to an external function, which is activted when the vriable is set to 'true'. The function then builds out the button in the clue menu and sets up different interactions, including clicking and dragging. Each clue can be dragged around, and clues marked as combinable can be dragged into each other to form a new clue. To handle the combinable tag, as well as the clue description, I made a seperate knot in the story, with stitches for each clue, that I have an alternate Ink stream read through when clicked. Using an alternate stream lets me look up clue information in the middle of a piece of dialog in the same file without interuppting the game's flow.</p>
</div>
</div>
<div class="right">
<img src="img/clue_thriller.gif">
<center>First test of collecting and examining a clue</center>
</div>
</div>
<div class="wrapper">
<div class="left">
<div class="info">
<h2>Accusation Phase</h1>
<p>Once the player collects all of the clues, the game transitions into its accusation phase, or 'Act III' (Act I being the leadup to the murder and II being the clue collecting portion). In this phase, each possible suspect is shown and the player is instructed to select the killer, then choose any evidence that incriminates them. From a design perspective, this is handled entirely within the Ink script, with no work being done in Unity. I wrote code that builds the Scene from the choices presented in the script, with a knot dedicated to the accusation, and creatin gthe lineup out of each written choice. The correct suspect is signified by the choice that leads in to the Verdict stitch, which displays the epilogue. The stitch also contains tags that are used to determine the incriminating evidence. The reason I built it this way is to make it as easy as possible for writers to customize the phase, while doing as little as possible in Unity. It can handle varying amounts of suspects, evidence, or even have multiple killers.</p>
</div>
</div>
<div class="right">
<img src="img/act3_thriller.png">
<center>The Ink code format for the Accusation, with comments describing it.</center>
</div>
</div>
</main>
<!-- Scroll to top -->
<i class="scroll-up" id="scroll-up">
<img
src="https://img.icons8.com/color/480/000000/circled-up--v3.png"
class="socicon up-arrow"
alt="scroll-up"
/></i>
<!-- Footer section -->
<footer>
<p class="copy">© Copyright 2021</p>
<p>You can find me at:</p>
<ul class="social-links">
<li><a href="https://github.com/Dnekos">Github</a></li>
<li><a href="https://dnekos.itch.io/">Itch.io</a></li>
<li><a href="https://www.linkedin.com/in/demetrius-nekos/">LinkedIn</a></li>
</ul>
<p>Or, you can <a href="mailto:demetrius.nekos@mymail.champlain.edu">send me an email</a>.</p>
</p>
</footer>
<!-- Website scripts -->
<script src="js/app.js"></script>
<!-- Ion icons scripts -->
<script
type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"
></script>
<script
nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"
></script>
</body>
</html>