by Morgane Santos

Growing up, I loved video games. My favorite was Baldur’s Gate, a text-heavy Dungeons & Dragons role-playing game which relied more on text than stunning graphics. Later I fell in love with The Longest Journey, a sci-fi point-and-click with a female protagonist (!) and captivating storytelling. When Mass Effect came out, I was immediately drawn to its atmospheric universe and the moral choices you had to make. Each of these games effectively built mood and philosophical dilemmas with solid writing and well-chosen visuals. I wanted to make something similar.

I don’t know the first thing about graphics. And my only experience making any kind of game was a terminal-based adventure game in college. Pure text, no visuals, certainly no mind-blowing physics engine. I didn’t even have to write the story myself, since it was a class project.

But I do know a thing or two about JavaScript, so I decided to make a browser-based game, inspired by Internet aesthetics and the fringe opportunities of front-end coding. I was especially into broken GIFs and glitchy text.

GIFs

A GIF (Graphics Interchange Format) is an image format, suitable for simple images, like logos or photos with few colors. It also supports animation: basically, it stores videos as a series of images that play sequentially and keep looping.

Broken GIFs are a truly weird subset of animated GIFs. One way to “break” a GIF is to compress it heavily, thereby losing information you need to make the full GIF. To really make a mess of things, you can remove crucial parts of the video used to make the GIF. Videos are made of frames: I-frames (static reference images) and P-frames (images that show the difference between frames). Here’s an example: http://i.imgur.com/h31sLEh.png If you remove the I-frames, there’s no more point of reference, and the P-frames will bleed into each other. Here are some examples:

These tend to be really creepy. But it’s a good example of what you can do when everything goes wrong. If you’re not aiming for perfection anymore, a lot of possibilities open up.

I wanted GIFs (broken and otherwise) to feature heavily in the game, namely as backgrounds, to add movement to the game, and act as an homage to this uniquely Internet form of art. An Internet without GIFs would be stale indeed, and there’s real beauty in this slightly outdated, clunky image format.

Zalgo text

Even weirder and sometimes more unnerving than broken GIFs is broken text, or Zalgo text. Zalgo, or Z̵̹̲̖͒͋́̚a̯̱͕͇̠̋͂̒̇l̵̟̾͑̋g̘͈̬̮̦̹͚͒͌ͦ́͘o̩̞̭̰̜͑̃͋!ͬ, is what happens when you completely exploit Unicode. Unicode is the standard for encoding text, including alphanumeric characters, symbols, accents, and all other visual markings we use to write to one another. If you’ve ever gone to a website and seen “&” instead of “&”, that’s because the encoding for the ampersand wasn’t properly, well, decoded.

Unicode has codes for standard characters like “A”, but it also has codes for combining characters. These are the accents and marks that can combine with other characters to create new, modified characters. If you’ve taken a Spanish class before, you’ll remember there’s “n” and there’s also “ñ”. ñ is the combination of n and ˜.

A fun fact about Unicode is that you can technically stack combining characters. So you can add all the accents in the world to a single character, which quickly makes it bloated and unreadable. Hence:

T͙͎̙̗̊ͫ͂h̵͈͙͚̜̗̾ï̹̽ͩ͑̍̿͝ș̲̬̟̈̒͋̏̂͢ ̣̒͐ͣ̾ͭͬ̚c̸̯̻ͦͬͨͅr̭̝̎̓͞à̙̮̯̲͊́̅̓z͎̙̱̝͘y͔͓̲͔͈̩̆̂̑͞ ̦̩͙̫̽n̤̣ͭ̀̏o͙̜̫̖n͈̰ͦͤͮ̈ͧͥ̉̕ͅs̸̓͗͋̂͆̅e͚̟̟̣̲̘͖͐͆̉n͓͖̤̈́́͜s͚̙͓̘͎̮̖ͩͪ͊̄e̦̥͚ͨ̐ͦ̑ͯ͋̚!̤͈̤̣̼͙̘ͩ́͂ͬͧ̅

Or, “This crazy nonsense!”

There are lots of ways to mess with text online; the Twitter account @FORBIDDEN_GEM is a novelty account completely dedicated to writing strangely distorted tweets:

@forbidden_gem tweet

Very creepy, and very cool.

With all this inspiration in mind, it was time to start coding!

GIFs as backgrounds

Luckily for us, using GIFs as a background is exactly the same as using any other image. First, find the GIF you want to use. My game starts with this GIF (warning: very quick, flashing GIF). I’ve saved it as “bwglitch.gf” in my project’s images folder. Now, in my CSS file, I can write:

.background {
  background-image: url(“bwglitch.gif”);
  width: 100%;
}

Note: this game is a Rails project. If you’re not using Rails (and Sass), your code may look different! But the idea will be the same.

What this does is it makes my GIF the background-image, and makes sure it fill 100% the width of the page. As you may have guessed!

Now, this ends up being way too overpowering on the page. And unless you already have a muted GIF for a background, you may need to do a little extra work to tone it down. For the game, I used a dark, transparent overlay on top of the GIF, to dim it. It’d be like covering a photo with tissue paper. You can still see it, but it’s not as striking.

To create the overlay, I made a very dark, but not completely opaque, background that also spans the entire page:

.overlay {
  background: rgba(0, 0, 0, 0.8);
  min-height: 100%;

  position: fixed;
  left: 0px;
  top: 0px;

  width: 100%;
}

First, the background: #000 represents black (aka, the absence of red, green, and blue), and the alpha, or opacity, is set to 80%. This is enough to still see the GIF, while making sure it’s not distracting. The min-height, position, and width are to make sure this overlay spans the full screen. Depending on how you’ve organized your HTML file, some of this may be redundant. Mine looks like this:

<div class=”background”>
  <div class=”overlay”>
    <!-- game stuff -->
  </div>
</div>

Play around with different layouts and opacities. For the game’s homepage, I used an image that I’ve essentially “fractured” by making it not quite align to the edge of the page.

Future Perfect

You can do this by changing the image’s starting position:

.background {
  background-image: url("cat.jpg");
  background-position: 300px 500px;
  background-size: 100% auto;
  min-height: 100%;
  width: 100%;
}

This means the image starts 300px to the right, and 500px down, and tiles from there.

One screen experience

An essential component of the game is making it asynchronous. In other words, the page shouldn’t refresh every time we move to a different dialogue box. Doing this is easier than it sounds!

In my HTML file, I have an area for the game screen:

<div class=”gameScreen”>
  <div class=”screenText”></div>
  <div class=”screenOptions”></div>
</div>

All this does is create a section for the dialogue text and options you can choose. There’s nothing in there yet. When you start the game, the JavaScript file appends text to each of these divs:

$(".screenText").append("<p>" + currentScreen.text + "</p>");

When you’ve selected a dialogue option, rather than reloading the page, the JavaScript file resets the game area by removing the

tags we’ve appended:

$(".screenText").children("p").remove();

This reverts the HTML file back to how it was, with nothing in the screenText div. From here, new text is appended, then removed, and the cycle continues.

You can view the full JavaScript file on Github.

How to create your own glitch art

Finally, if you really don’t feel like coding but still want to make something cool, it turns out that making glitch art is really easy. If you’re using Windows, you can use WordPad. For Mac users, download Hex Fiend. The idea here is that images are really just a string of numbers as far as your computer is concerned. If you mess with the numbers, you mess with the image.

To get started, save an image you’d like to glitch with a .tiff or .bmp extension. Higher quality formats like PNG won’t work here. Now, open your image in WordPad or Hex Fiend. You’ll see a huge text file full of numbers. Delete some. See what the image looks like. That’s it!

Sometimes the image will disappear altogether if you deleted too much. Sometimes it won’t really change. You can keep deleting, looking at the image, and reverting your changes until you find something you like. That’s how I turned this into this:

image00

image02

Enjoy!

By the way, you can play the game here: http://futureperfectgame.herokuapp.com/ It’s a work in progress but it’ll give you an idea of where things are headed. And you can look at the source code here: https://github.com/morgane/promised_future

Morgane Santos is a designer and maker based in San Francisco. She likes Internet art, bad music, and her two cats Buck and Ripper. Holla: @morgan_e_