The Clock Ticks and Ticks Again

Previously, visually on The Clock Ticks for You:

The old game aesthetics, which was the default picture, default font, and default white background

Spoiler, what it looks like now:

The new game aesthetics, which is white text on a black background

Designing for Mood

After play-testing the game by myself, I realized that visually, the visual aesthetic did not fit with the game-play aesthetics. So, I went on a two-week HTML and CSS adventure to hack what the output of Inform7 projects look.

Creating a Mood

I knew immediately that my story takes place and sundown, the space between light and dark. Ideally, when the sun goes down, I would also fade the background of the site from gold to black. However, because there were no API or way to read the variables in the game-state, the best I could do was to use text cues.

Text cues enable a couple things in my game: the clock ticking sounds, and the fade to black when the game ends. Both mechanics are triggered by text that would appear on screen, such as “*** The End ***”, or “The clock ticks.” However, because sundown is something not explicitly stated (it just happens at 7:30pm), there were no text cues that could be used.

code that triggers visual and aural effects when the text cue is found

The sound that I added was an Audacity edit of a normal ticking clock to be 60% of its original speed and with a much lower pitch than before. This, hopefully, would allow the player to feel the pace that I want them to feel. Ideally there would be more sounds, but this was all I could do for now.

I found out that with this ability to use text cues, I could do so much more. For example, I removed the “What will you do this moment?” question once the player answers. I removed the “RESTART/UNDO/QUIT” text that would appear whenever the game ended, because I want to design the story such that it doesn’t feel like there could be any other ending.

Additionally, I the fade away at the end: it was an accident that the greyed out choices didn’t disappear with the rest of the text. However, it was a happy one. I realized that leaving the player with only the choices they’ve made without the context they’ve made them in could be interesting for the player to see.

An example of the choices the player might have chose, and how they would look at the end. I would like to force the player to type something poetic into the prompt, and give it back to them as their own little piece in this way.

Choosing a Font

“Google Fonts is a bad idea,” my classmate Madison said. And she was right. I scrolled through countless fonts, spent hours reading on typography theories, made a list, and checked it twice.

The list of fonts

I ended up choosing Scope One, as it was readable enough and gave the spacing my game needed. It was still a serif font for readability, and had a warmer, more rounded aesthetics than the original Georgia.

In addition, I decided on using a normal font size based on pixels and percentages so the player only sees very little of the past: I wanted them to live in the moment.

Fixing for Flow

IF stories are known to be full of branches that needs to be filled out and cleaned up, and The Clock Ticks for You is no exception. I went through to clean up spacing, add synonyms, add conditional content, and overall improve the flow of the game by testing branches that I don’t usually go down. There were plenty of fixes to be done. Even if the average player will never notice it, I believe it creates a more immersive experience for them.

The description of the Living Room, full of inline if-else statements to change depending on where in the story the player is.

Designing for Accessibility

Making it Mobile

Something that I resonated with was the requirement of having the game playable from any platform. An IF story shouldn’t limit its audience to simply the piece of technology used to access it.

I found that the default worked well with mobile devices. With my new visual changes, however, I needed to change certain interactions. After playtesting with at least 6 different people purely for usability, I made it such that:

• the input field can be focused by clicking anywhere on the screen.
• smaller screens would get a different input CSS code so that they would actually be able to see what they were typing.

Enabling Experience

After letting Kesler, the TA, play-test, I received even more visual design feedback that I cleaned up:

• changing the “More” color scheme at the bottom to match everything else.
• Limiting the width of the text so bigger screens won’t see long lines of text.
• Greying out the prompt, so it’s clear that it isn’t part of the story

In addition, by play-testing on my own, I added the animations of the text sliding in so that the player can notice the new text appearing (especially when they’re doing the same command and the output is the same.) This way, the big mountain of text would float in and invite the player to read it.

Easy Mode

Finally, after getting feedback from the game showcase playtesters, I wanted to make the game easy for the player. I added “easy mode,” where the relevant nouns and verbs are highlighted if they get stuck enough times. Does this actually help? I don’t know. Inform games are interesting creatures that I’ve seen too long. I’ll need more play-testing to know if the average player can even play the game at the moment.

Extra: Adding Story

I wanted this game to be so much more. I wanted to explain more and give more. However, I was not able to reach a comfortable checkpoint for me to call the piece a completed piece. Here is the link to the extra parts of the story I added, which is triggered after you examine the clock; you’ll see that the hallway and beyond has not been touched. The photo album only has 1/3 of its story fleshed out. The picture below is some of the things I want to add:

Some of my notes on what I wanted to do with the photobook

Some notes on what I wanted to do after the photobook

Final words/reflection

It’s true that the IF designer cannot truly understand how frustrating it is for their players to traverse through their games. The game showcase proved that for me: that despite my best effort to give the player hints without giving them the answers, they would still get stuck and feel the frustration of IF.

Still, making this game has been a great learning experience for me. I have always wanted to design experiences to make users/players feel. I believe it’s the most important part of being human: to feel compassion and empathy, especially for strangers like the character in my story. I will continue to work on thinking and developing this game, and I hope it’ll continue to polish both my passion and skill so I can make even better experiences.