David Steckler// cs · robotics · thinking for yourself
1 · Numbers 2 · Bits & Bytes 3 · Text 4 · ASCII 5 · Unicode 6 · ASCII Art 7 · One byte 8 · Images 9 · Graphics 10 · Audio
BINARY / LESSON 06

ASCII Art & Games

What if a picture was just text? See how ordinary characters became game worlds, then use the same trick to build your own.

01 / SEE IT

Before game graphics, there were characters.

In Rogue, a room is drawn with lines and dots. @ is you. $ is treasure. Every symbol is still text.

Screenshot of the BSD version of Rogue showing an ASCII dungeon made from text characters
Rogue, BSD version. Screenshot by Thedarkb, licensed CC BY-SA 4.0. View original
@One character is the player.The game draws a symbol, not a picture of a person.
#Repeated symbols make spaces.Walls and corridors form a recognizable map.
$Context gives the text meaning.Here, the dollar sign is treasure.
Try it yourself
02 / PLAY IT

Explore a dungeon made of text.

Move @ to $, or click a character on the map to reveal its ASCII code. The inspector stays alongside your game.

  ascii_dungeon.txt
Move @ to $. 0 moves
Arrow keys or WASD work too.
03 / MAKE IT

Make a picture out of text.

Three small experiments, one workspace. Learn why the characters line up, see how they make shades, then draw your own sprite.

// trick 1

Every character needs the same width.

ASCII art depends on a monospace font: every character takes up the same amount of horizontal space.

       /\
      /  \
     /____\
     | [] |
     | __ |
     ||  ||
     ||__||
The columns line up because every character has equal width.
The character does not decide what it means. The context does.
# can be a hashtag # can be a corridor # can be a dark patch in a picture

Exit ticket: what makes this a picture?

Think about the sprite you made. Why can ordinary text look like an image?

← PreviousBinary 5 · UnicodeSee how Unicode expanded text far beyond basic ASCII. Next →Binary 7 · One Byte, Many MeaningsSee the same bits become text, image data, color, or sound.