Procrastination Station(shorthand PS) was created to capture the thought process of someone who wants to be productive but struggles to listen to their subconscious without prompt. It is a storytelling game to represent the endless loop that is trying to be productive as a procrastinator. This was especially inspired by my own daily experience in the midst of quarantine and trying to express my own (lack of) perception of time day-to-day.
Here, we, the user, act as the subconscious for our main character, playing as themself. The user is tasked with trying to get themselves through the day and are given a series of tasks to complete. Problem is, they are tired and easily distracted so they often ignore your better judgment and don’t always listen. Time seems to operate differently and occasionally even when you try to do a certain task like waking up or listening to your mom, the character simply does not obey and gets distracted anyways. Whether by outright ignoring the user command or by getting distracted along the way, the MC puts off their tasks as much as you try to get her to do them. Can you finish the day checking everything off your to-do list or are we all subject to being our own worst enemy once in a while?
Reframe the Problem
Storywise, my main problem was trying to show the repetitiveness and endless loop that sets in during quarantine. As we have all had a difficult time this year it's safe to say we can all understand how endless the days can feel. Even the days we want to get work done can feel like we get stuck in a “Groundhog Day”-style loop. During my process, I would often look at my storyboard and while trying to connect all the dots for how my character would be able to complete certain tasks before others, etc., etc… I came to realize that this truly was how it felt when I would try to complete my real-life to-do lists.
From a coding perspective, the greatest issue I faced was deciding what program would be best to tell the story I wanted. Originally, I wanted to allow for more direct user interactions with our MC and the scenes as they progressed. However, given the many different paths and loops the character took, I found it best to use a combination of still images and animated gifs of the story as we went through. That way, I could focus more on the story overall.
The coding itself was pretty straightforward. I mainly used Twine which makes for a helpful and intuitive tool for basic story building. I decided using small animated gifs would be the best option with Twine so that I could focus on having an interesting game with multiple variables while still having the imagery follow along throughout as easily as possible.
Approach and Process
Throughout this project, I went through many different phases and faced different decisions and difficulties along the way. From storyline to lines of code, there was much to be learned as Procrastination Station was worked and reworked. I began with the design elements of the game, the storyline, and finally piecing it all together in Twine and working on the code. There were many choices I made originally that were not able to be made final, however, the resources I had referenced throughout will still be linked below.
Design Elements and Assets
In the early stages of this project, I designed the art style. I began with some character sketches and some rough designs for the main background I would be working in.
My initial sketches for the main character were pretty straightforward. Early on I knew I wanted a more monochromatic palette, and I knew I wanted the character themself to have that disheveled, underslept look that I feel many people both in college and out can relate to some days. From the get-go I wanted to try to understand the character, how they would look of course but also how they might react. The look of annoyance when something doesn’t go their way, or shock when they realize something they’ve done wrong.
For my background, initially, I had planned to show more than just the one room, however, given the way my story progressed as well as the time constraint, it made more sense to stick to one consistent scene. In a more conceptual standpoint, this also made sense since during quarantine it can feel more and more as if you spend all your time stagnant in one spot.
My final design for the background was designed primarily in Procreate. Through multiple layers, I made many different assets all on their own layer in case items need to be moved or swapped. This includes the wall color, window blinds, the daytime scenery, all the way down to the character’s phone that sits on their nightstand. For me, this method helped me to understand what assets would be used most as well as be able to quickly and easily switch to new scenes when it came to incorporating the character in and adding in the micro animations.
Storyline & Wireframe
After getting a better understanding of what I wanted the game to look like, I could focus more on the story. During my sketching process, I had also worked on mapping out different areas I wanted it to go through. I had some set tasks that the character was meant to fulfill. As seen in the mind map, I kept both the narration in mind (acting as the user’s subconscious and what they want to do) along with how their character actually reacts. While I had to simplify some ideas, afterward I was able to begin connecting the imagery I wanted to show along with the initial narration.
Connecting the mind map text with the visuals I had created thus far was a big help in understanding where I wanted the user to go along with what smaller interactions could occur.
Coding with Twine
From a coding perspective, the greatest issue I faced was deciding what program would be best to tell the story I wanted. Originally, I wanted to allow for more direct user interactions with our MC and the scenes as they progressed and was considering using p5.js to tell my story. However, given the many different paths and loops the character took, I eventually found it best to use Twine since its interface was much more suited to the “choose your own adventure” type of games. Additionally, I ended up deciding that rather than trying to figure out more direct interactions between the character and user, I would opt for a combination of still images and animated gifs of the story as we went through. That way, I could focus more on the story overall.
The coding itself was pretty straightforward. I mainly used Twine which makes for a helpful and intuitive tool for basic story building. I decided using small animated gifs would be the best option with Twine so that I could focus on having an interesting game with multiple variables while still having the imagery follow along throughout as easily as possible. One issue I repeatedly ran into was trying to integrate music and sound into my game. I referenced multiple sources including these linked below which I highly recommend for understanding Twine 101. The discussions they have on Twine’s own forums are also a helpful tool, though they are not as up-to-date.
Despite these not working, I did for a time have a Spotify play button available in some areas of my story. However, in the end, it did not feel like it added to my overall story so it was removed from the final cut.
Otherwise, the only other coding difficulties I faced were in my Twine file’s style sheet. I spent some time playing around with different font choices and backgrounds, though I had run into some initial trouble with uploading my images. A feel for CSS and understanding how to resize the image ended up being pretty useful. When looking at my style sheet, I often referenced style sheets for other projects and learned from previous experience.
The finished product for Procrastination Station was uploading the game online for others to see. After some minor difficulties with running it on itch.io I was able to upload the playable game on their site for use to the public. I also recorded a brief walkthrough of a few of the different play throughs possible onto Vimeo.
Play the game on Itch.io: Procrastination Station
Watch the Walkthrough: https://vimeo.com/540559057
Final Visuals & Animated Gif Samples
Overall, the experience gained from working with Twine was very much a learning process for me but I feel I learned a lot along the way. For a choose your own adventure games my first recommendation would definitely be Twinery, especially if the game you are working on is more story-based. This is a project I hope to return to soon and possibly add more too as I try to improve my own procrastination habits.