4D Project 4: Poetics of Time – REWIND

For my final 4D project, I decided to run with a new concept and create a web game about manipulating time. Welcome to REWIND.

Play REWIND at https://chinkeeyong.github.io/rewind-game/

Concept

REWIND is a game about navigating obstacle courses in both space and time. To move your mouse cursor to the end of each track, you have to master the ability to pause, rewind, and play back time. In this way, the audience chooses how and when to edit the time that they are presented with, ultimately achieving mastery over the time of the game itself.

When Lei let us choose any format for this project, I immediately decided to make a video game. After all, game design is the entire reason I decided to join ADM. The question then became: how was I going to tie the theme of time into a game?

The answer comes from the nature of interactivity. As interactive media, games inherently revolve around the ways in which the audience is allowed to interact with them, or in industry parlance, the verbs:

  • In platformers like the Mario series, the player jumps.
  • In shooters like the Call of Duty series, the player shoots.
  • In puzzle games like the Candy Crush series, the player solves.

To drive the theme home, I decided that time manipulation would be an intrinsic verb of my game. The verbs of my game would be pause, play, and rewind.

VCRs and video players are a well-known form of time manipulation in our everyday lives, so I decided to borrow their terminology.

With the basic verbs of my game down, my next task was to come up with the challenge that the player would use those verbs to overcome. What task did the game ask players to perform? What obstacles would stand in the way of players winning the game?

I had never made HTML5 games before, and I was unsure about my coding abilities and time commitment. Thus, I decided to go with a game concept that was relatively simple to implement: a 2D obstacle course navigated using the mouse cursor. This is a time-tested style of game that has been done many times, especially in Flash and web formats. One well-known example is The Frustration Game:

“The Frustration Game” hosted on Not Doppler

Although this style of game is very simple, it is highly extendable and I was confident in coding it perfectly within the time given. I trusted in the time manipulation mechanic and my level design skills to make it a challenging, engaging, and entertaining experience.

Inspirations

Of course, REWIND is not the first game to explore the concept of time. I had many games in mind while brainstorming the time-manipulation mechanics of REWIND, including:

  • Chrono Trigger, a dramatic RPG about saving the world with time travel. Using wormholes and time machines, you can travel between different time periods, and your actions in the past influence events in the future.
  • Braid, a Mario-style platformer where time manipulation is central to solving puzzles. The player must rewind time, stop time, and navigate levels where time itself is distorted and out of sync.
  • Life is Strange, an adventure game about a high school girl who gains the ability to rewind time. This power is used to solve puzzles and navigate social situations, ultimately forcing the player to make decisions with wide-reaching consequences.
Life is Strange‘s Max Caulfield rewinds time to save her friend from an oncoming train.

As a game of dexterity and obstacle navigation, REWIND was also inspired by:

  • N and its sequels, a series of platformers famous for their tight controls and skill-testing level design.
  • Super Meat Boy, a platformer that challenges the player with black comedy and infamously difficult levels.

These games are notable because they are difficult but fair (as opposed to The Frustration Game, which intentionally misleads and frustrates the player). If you fail, you know exactly when and how you failed, and another try is only a button press away. This encourages the player to keep honing their skills, resulting in a moment of triumph when the player finally accomplishes the goal set before them.

A Super Meat Boy level after the player has died a few times. Note how the dangerous and safe zones are clearly demarcated, and the bloodstained areas show where the player has previously died.

Implementation

View REWIND’s source code repository on GitHub

REWIND is a JavaScript browser game. It was created using Phaser, a free HTML5 game framework, and written up in a text editor the old-fashioned way. REWIND’s art assets were designed using Adobe Illustrator, then either recreated in Web Canvas graphics using the measurements from Adobe Illustrator, or exported as image files.

Coding REWIND posed a challenge, because while I had some familiarity with JavaScript-style programming, I was unfamiliar with Phaser and the general workflow of creating a HTML5 game. I had also not written any JavaScript since 2009. Thankfully, I managed to power through the Phaser tutorials and documentation, and wrote REWIND with close reference to the Phaser and JavaScript APIs.

Here are some interesting things about REWIND’s code architecture:

  • REWIND is divided into states, with one state for the loading screen, one for the main menu, one for each level, and so on. Each state has its own .js file.
  • REWIND has 4029 lines of JavaScript code. That sounds impressive until you realize that half of those lines are comments or whitespace, and most of the code is copy-pasted.
  • After coding the first level, I was too lazy to generalize the code, so I copy-pasted it for all the remaining levels and then modified it as necessary. This meant that whenever I made a change to the underlying mechanics, I had to copy and paste the change for each level individually.
  • Although Phaser has built-in support for animation tweening, REWIND’s time manipulation mechanic meant that I had to code all movement from scratch. Hence, each movement or rotation is defined by a mathematical function of the time position of the track.
  • I used trigonometry to determine the diagonal movement of the boxes in Track 4 (since the X and Y components of the vector form a right-angled triangle). The “back and forth” cones and gates in Track 7 also use a sine function for their movement.
  • The static effect when switching levels is generated on the fly by randomizing the brightness of pixels. I wanted to randomly generate the sound effect as well, but Phaser’s audio libraries don’t include that functionality.
  • All 3 music tracks (rewind, pause, playback) are actually playing at the same time during a level, but two of them are muted. This allows for a seamless transition in rhythm when the player changes the mode of playback. It’s a silly hack but it works.

All in all, most of the time spent on this project was spent learning to code, coding, and bug fixing.

Art Direction

REWIND’s art direction is motivated by the desire to be clear and readable at all times. The game is high-contrast and uses only a few colors. Each of the colors is established to have a specific meaning:

  • Black is used for the background.
  • Gray has the same meaning as black, but only appears on the moving parts of a level.
  • Orange is used for the area where the mouse cursor can safely move.
  • White is used for important elements like the mouse cursor, the starting and ending points, and the tutorial messages.
  • Red, blue, yellow, and green only appear in the track indicator in the upper left, and indicate whether the track is currently stopped, rewinding, paused, or playing normally.

All of the above colors are distinct from each other and immediately recognizable. This allows players to read a screen with lots of moving parts at a glance, as in the final level of REWIND pictured above. Hence, they can focus more of their mental energy on understanding and mastering the game mechanics — which is the ultimate focus of the game.

Sound Direction

“Electrodynamix” by dj-Nate

REWIND’s audio helps to set the tone of the game. It follows the conceit of REWIND being a giant VCR that you pause, play, and rewind: the background music is a pulse-pounding electronic music sample, while success and failure are demarcated by a cymbal clash and a record scratch respectively.

There is a long tradition of using electronic music in rhythm-intensive games, from Dance Dance Revolution to Geometry Wars. REWIND follows in that tradition. The driving beat of “Electrodynamix” establishes a trance-like state of concentration and immerses the player in the challenge of the game.

Furthermore, a large part of REWIND’s feedback is delivered in the form of audio. The background music mirrors the temporal state of the track:

  • When playing back normally, the background music plays normally.
  • When paused, only the drums and bass can be heard, and the music is run through a low-pass filter so it sounds muffled.
  • When rewinding, the background music is played in reverse.

In addition to the background music, the different sound effects on failing and succeeding a level help to reinforce the different outcomes, conveying success and failure faster than the naked eye can see (literally!)

Further Development

The scope of REWIND was intentionally kept small so that I could deliver it in a polished state within the time given. However, there are many areas in which it could be extended and developed into a full-fledged game.

  • More levels could be added, increasing the amount of content to play through.
  • More level mechanics could be added, such as locks and keys, multiple checkpoints, etc.
  • More optional challenges could be added, such as collectible coins, time trials, difficulty modifiers, etc.
  • More twists on the time manipulation mechanic could be added, as with Braid: obstacles that react differently to time manipulation, obstacles that aren’t affected by time, new methods of manipulating time, etc.
  • More audiovisual polish could be added, such as texturing the backgrounds of the levels with static, including more technically impressive transitions and feedback, altering the music with different tracks and tempos, etc.

Afterword

REWIND has been a fun and educational project for me to work on. It’s a project that ties into my passion as a game designer, and I feel that I delivered it competently to the best of my expertise. It’s also just commanding and engaging in a way that I feel most of my art projects are not. In my class presentation, listening to the collective excitement of my classmates and the cheer when Shah completed the last level, I was proud of how I had managed to capture something special and provide them with that experience.

I have always been fascinated with games and interactive media because they aren’t really media, but experiences that we design and share. I feel that no single image, movie, or song can touch a person as much as a well-designed game can. Going forward in ADM, I hope to pursue this interest, and to create works that aren’t just aesthetically or intellectually interesting, but fun as well.

Published by

Chin Kee Yong

hello i play video games and also sometimes make video games

Leave a Reply