Understanding ASCII Art

It’s pretty easy to see that I’ve taken the step of using ASCII art in my next game, Gemstone Keeper, and it’s pretty difficult to not notice it if you see the screenshots I’ve been posting for #IndieDevHour or Screenshot Saturday.

This writeup will explain my understanding as mainly an outsider and relative newcomer to the ASCII art and Roguelike Development scenes, and hopefully explain my reasons why I chose to move to ASCII art, and how I am approaching it to make my own style to the art form.

The most obvious place to start with ASCII art is its limitations, as it is those limitations that encouraged its most early use, as well as encourage creativity. Traditional ASCII art limits you to 96 symbols, you have only one layer and you can only draw in a grid like structure. It doesn’t seem like much to work with but lots of people have done creative stuff with it. What Ludum Dare and GBJam have taught me, is that working with boundaries can bring out more creative ideas than simply being told to make something, and do whatever you want.

File:BB-ASCII-art-screenshot-zebra.png

Zebra by Wilinckx

There’s also an element of nostalgia and traditions, especially for Roguelikes. The original Rogue used ASCII, most likely because Unix terminals had limited graphical capabilities, as did many of the early derivatives. As such, while some roguelikes are updated to have game sprites, or a larger selection of characters, most roguelikes keep the ASCII characters in the grid format, even going so far as to run in a terminal like cgwin. The same way how some indie developers like to follow a retro game style by imitating the pixel art style of early NES games, they loved the games that had them in the past, and prefer using them to fit that style of game.

Rogue (1980)

Angband.png

Angband (1990)

That being said, that hasn’t stopped some game developers breaking the rules for ASCII Art and use of text characters, which is where I find the most interesting examples of the art form. One good example is DDDWares, the developer of Illuminascii, a first person shooter that uses ASCII characters in a 3D environment. I vaguely recall seeing the game at the Norwich Games Expo when I was showing off Secret of Escape, and the way it uses text in a 3D environment fascinated me. While the textures themselves are 2D and the text is in a grid structure, applying them to 3D models and having them transformed into a 3D environment has really given the game an interesting visual style.

Illuminascii

More recently, one huge influence is a guy named Josh Ge (or Kyzrati as he calls himself in Roguelike Developer circles). Not only is he working on an amazingly huge roguelike by the name of Cogmind, but he’s also written his own articles on ASCII art and developed an efficient ASCII art tool called REXPaint, clearly he understands this artform and the genre more than I do. People who follow me on Twitter may have noticed that I’ve ended up talking to him on occasion and even contributing to his stuff, as I’ve written both a C++ library to read his REXPaint compressed binary files and a text renderer for said REXPaint files, written for SFML 2 framework. I’ve even tried out REXPaint for myself and made a creation that can be seen in the REXPaint’s Gallery.

Left: REXPaint-R9 - Right: SFML 2.3.2 with XPText

Left: The Gamepopper Logo as designed in REXPaint. Right: The REXPaint design as rendered in SFML using XPText and RexReader++.

However what drew me to his work was his title logo, which I decided to recreate myself in order to understand how he made it (although I could’ve just read an article where he explained how he made it), you can see the comparison below.

cogmind_10x10_animated

Essentially, I found three aspects to how it all works, the colours, choice of symbols and the layering. Cogmind is themed around hacking, and uses sounds and colours of an old green and black terminal, so those colours are heavily used. The choice of symbols also fits with the theme, the most used ones having one or two long thin lines (≡─│┌┐└┘├┤┬┴┼═║╒╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡╢╣╤╥╦╧╨╩╪╫╬) to give the impression of a circuit board. The key one I like is that it’s multi-layered, as the logo has three layers all differed by colours, as it gives a certain amount of depth to the overall graphic so it doesn’t appear so flat.

There are others I like to give credit as well, Tarn & Zach Adams Dwarf Fortress is a pretty big one as they got recognition from the Museum of Modern Art, and how they’ve really achieved in world generation to create a realistic and large scoping world out of ASCII. For more procedural art, there’s no other person to point to than Mark Johnson and his game Ultima Ratio Regum, where everything from the world, to the cities, to the factions, religions, race are all procedurally generated, and the graphics are also procedural, with a mix of ASCII text and custom defined symbols.

Dwarf Fortress (2006)

Tomb22

Ultima Ratio Regum

So where does that lead to the art of Gemstone Keeper? The simple answer is that I’m being a bit liberal with my use of ASCII art, given my experience with 2D games. I have made it an aim to use only text, to the point that the game will use no image files, and hopefully use a single font file for all assets. That being said, Gemstone Keeper’s art style isn’t restricted to a grid, as to allow free and real time movement.

Like with Illuminascii, the text is treated like textures, however this time it’s 2D so they are sprites. To create more unique designs, characters can rotate and and scale to create new symbols for better interpretations. Treating text like textures in sprites also allows me to store multiple frames onto a single texture, giving me the opportunity to do sprite animation, such as with the bats in the game.

I’ve also used what I’ve learned from recreating Cogmind’s logo, consider multiple layers (the final logo design has four layers), use symbols that would fit the theme (so gemstones, caverns and rocks), using good colours and make sure the title is clear to read.  I started with some base designs and getting feedback from several game developers, followed by adding in the layers and colours before having some concept designs. Once the majority had picked one of the designs, I worked on that to give some more effects (like the sparkles, shimmer and other animations).

Two of the concept designs for the title logo, both produced with Photoshop. The bottom one got the majority vote, which lead to the final logo below.

There have also been a lot of changes between the Allegro and SFML build, especially since the last blog post I wrote. The tilemap no longer has the lined border, and some of the hash symbols have been taken out to give a coarse and more bumpy look.

Menu Concept 2

Colours have also been updated, which occurred when I was talking to a game artist. He suggested I should look into balancing brightness/luminance, as it allows people to easily distinguish where things are, even when overlapping each other. As such I’ve mostly abandoned using colours in RGB format in favour of using HSV, allowing me to set the brightness (or value), so that each object’s brightness is based on what type it is,  and adjust the hue and saturation instead, which is honestly a lot more easier to manage than changing RGB values.

This is the approach I’ve taken with ASCII art, breaking some of the traditional rules in order to produce a fresh interpretation on the use of text to create abstract designs. I’m still exploring this while adding to the game so the art style will probably change several times over.

Advertisements

2 thoughts on “Understanding ASCII Art

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s