8 Bit Character Editor

Today we have the luxury of beautifully anti-aliased fonts on high resolution displays. Several years ago computers had blocky fonts whose characters were defined by a handful of bytes. It was often easier to build these characters using an editor like this one than the alternative approach : graph paper.

Ataris, Apples, Commodores, Tandy / Radio Shacks, Acorns, Sinclairs and many other classic computers and game console had character sets defined in this way. Many of these older systems were able to redefine the shapes of their characters. This allowed early programmers to create custom imagery that was used for games and other types of applications requiring this sort of flexibility.

When Micro Computers and early game consoles first arrived, games were often the work of a single individual. The programmers did the programming, artwork, music, sound effects and testing. By contrast, today it is common to have artists specializing in each of these various areas and working as a team.

The 8 Bit Character Editor is a very simple editor that allows you to build characters that are defined on a 8 x 8 bit grid. Each row of 8 bits results in a single byte. The entire shape is defined by only 8 bytes (64 bits) of information.

If you are old enough you may recall many similar types of editors available for classic computers years ago. Some of these programs you would obtain at computer clubs while others were to be found as type-in listings from magazines or books.

NOTE : The 8 Bit Character Editor is an Html5 application and thus requires a modern Web Browser to access.

The Editing Grid

By clicking your mouse pointer on a square anywhere within the editing grid, you will toggle the bit represented by that square ON or OFF. Click once to turn a bit ON, and again to turn it OFF.

The Byte Row Values

When you are manipulating the bits in the editing grid, you will notice the byte values representing each row will automatically be updated. These are the values that programmers would use as data in their programs to re-create the character’s shape.

You may also enter your own byte values to re-create shapes in the 8 Bit Character Editor. Simply enter the value(s) and click on the update button to have the bits adjusted accordingly.

Sample Shapes

Here are some sample shapes created with the Editor. You can type these byte row values into the appropriate row fields above to re-create these character shapes.

Happy Face

60,126,219,255,189,195,126,60

Alien

66,36,126,219,255,255,66,36

Running Man

48,16,56,124,186,72,132,130

Invader

24,60,126,219,255,36,90,165

Operations

There are several operations you can apply to the bits in the editing grid. Select an operation from the drop down menu and click the do button to perform the operation you have chosen.

Scroll up/down/left/right

The scroll operations move the entire shape one pixel in the desired direction. Scrolling 8 times in the same direction gets you back where you started. Bits that are scrolled off of the editor grid are rolled around from the opposite direction and therefore not lost.

Horizontal / Vertical flip

Similar to the effect of a mirror, flipping the bits horizontally swaps the location of the bits from left to right on the editing grid. Vertical flipping swaps the bits from top to bottom.

Invert

This operation toggles all the bits in the editing grid. All bits which were ON are switched to OFF and vice versa.

Fill / Clear

The Fill operation turns all of the bits on the editing grid ON. The Clear operations turns them all OFF.

Rotate right/left

The Rotate operations rotate all of the bits in the editing grid by 90 degrees to the right (clockwise) or left (counter clockwise) depending on which operation you have selected.

Copy / Paste

When you perform a copy operation, the entire contents of the editing grid are stored in the copy buffer. You can then use the paste operation to restore the editing grid to the contents of the copy buffer at any time.

Comments

  1. Peter Jensen says:

    Love this, sweet.
    Commodore vic-20 rules 🙂

  2. This is a great start, but to be truly useful you need to have some more features:

    1) edit more than one character.
    2) edit characters in a grid such that you could have a grid of 4 x 3 characters (arbitrary values) and edit them as a map.
    3) save the data to a binary file and allow for downloading.

    Thanks!

  3. C64 user says:

    Really cool. A BASIC V2 listing source code would be more cool.

Trackbacks

  1. Online 8 bit character editor | commodoreisawesome says:

    […] rotate, copy and paste. The character data, in 8 bytes, is automatically calculated. Website: http://computingvoyage.com/687/8-bit-character-editor/Source: http://www.richardlagendijk.nl Category: Link […]

Speak Your Mind

*

Read previous post:
An introduction to Bits, Bytes and Hexadecimal

Sometimes it's easier to explain concepts by breaking them down into smaller pieces. This article will attempt to introduce bits,...

Close