Between the Pixels #01 – From data to sprites

In my spare time I’m a pixel artist, and sometimes, when I play indie games, I can’t help but think that some developers miss the point of the retro style when it comes to their sprites. When people talk about it, they think they have the style right. The problem is that it paints indie game development as easy and cheap. With a bit more effort, you can get the retro aesthetics.

In this series of articles, I’ll analyse and take apart sprite styles of different eras, genres and even consoles. I’ll break down what works and doesn’t work, and how you as an independent game developer can create a game that truly has the retro feel. But before I do that, I’ll have to explain the basics.

The bits! The bits!

When people talk about 8-bit, people think about a certain sprite style. The truth is, though, that bits have nothing to do with how an image or sprite is painted, and has everything to do with the processor. All it says is that it can only handle numbers or integers that are at most eight bits long.

To explain what bits are, let’s assume that bits are switches. When a switch is off, it sends no signal. Its strength essentially is zero. When a switch is on, though, it does send a signal. We don’t know how strong it is, but we can assume it’s at least one, and that’s all that matters. So, when a bit is 0, the bit is turned off, and when it’s 1, it’s turned on.

Binary code

Generally, a byte consists of eight bits. That doesn’t seem like a lot, but with it, you can make any number between 0 and 255. You see, each bit corresponds with a power of two. The first bit, or bit 0, can have a value of 1 in its on-state, since 20 is 1. The second bit, bit 1, can have a value of 2 in its on-state, since 21 is 2. This goes on for each bit, and with it, you can combine them to create every number between the minimum (0) and maximum (255 in the case of eight bits). Bits essentially represent binary numbers.

There’s a lot more to it, though, and I haven’t talked about everything. Most don’t really matter for our subject, though.

All in the pixel

Pixels, or picture elements, are basically just elements that combined make one large picture. Contrary to what people think, pixels don’t necessarily have to be square. In fact, in older consoles, pixels more often appeared rectangular, due to the output resolution not matching the aspect ratio of the television screen.

In order to represent part of an image, a pixel needs several data, specifically, the red, green and blue values, with optionally an alpha value for transparency. These values can be stored in several ways. You can have each color be stored in each pixel. For example, you could reserve two bits for each color value, which takes eight bits per pixel. An even better way is to store color palettes. This way you could reuse colors multiple times, and you could store more data per color.

The MS-DOS color palette

For example, if you have color palettes of 16 colors, and you’d store five bits per color, with one bit determining the transparency, you’d take up 32 bytes per color palette. Further, if you would use these palettes on your sprites, you’d only take up four bits per pixel. On a sprite with the size of 16×16 pixels, you’d only take up 128 bytes instead of 256.

With older games that only take four color palettes, you could optimize it even more. Most consoles that limit each palette to four colors, with the first color with index 0 being a transparent color, have set color values. This means that each palette would take exactly four bytes. And, since you only use four colors per palette, each pixel would only take up two bytes, meaning a sprite with the size of 16×16 would only take up 64 bytes.

Sprites divided

In gaming, a sprite is something that represents an entity. This could be anything from a character to even a GUI element. Most of the time though, when people refer to sprites, they refer to 2D images, or bitmaps. Essentially it comes down to the same thing.

Several sprites from the game Pac-Man
Sprite sheet by Superjustinbros

In most older games, specifically retro consoles, sprites are subdivided in smaller tiles. Tiles are mostly used for background elements, but they can come in handy with sprites as well, mainly to save memory. Imagine having certain parts of a sprite coming back in other sprites. You could then just reuse certain tiles. Often, these sprites are divided in tiles with the size 8×8.

An example of how 8×8 tiles can save memory
Sprite sheet by Superjustinbros

In any case, sprite sizes are always in powers of two, and with that in mind, using 8×8 as a basis isn’t that bad an idea. For example, if the sprite is 16×24, you could just have two columns and three rows of 8×8 tiles, saving memory that would otherwise go to waste on the white space. Mind you, most sprites are still divided up in tiles of 16×16, but these can be subdivided in smaller tiles of 8×8 as well. Only in more recent games are sprites stored as a whole.

The only limit

As you can understand, most of the retro art comes from limitations. Sprites had to be small to conserve memory, and therefore they had to be thought out. You couldn’t just scan an image and expect it to work. Nowadays pixel art is used for more aesthetic reasons, but when you aim for a retro feel, you should be aware of these limitations.

For a more authentic look, one should make sure to look up on the specs and inner workings of the consoles that’s being emulated. It’s easy to make retro-like pixel art, but it’s a lot harder to stick to what the console is capable of.

Profile photo of GaryCXJk

Author: GaryCXJk

A web developer, in his spare time an author, pixel artist and programmer. He has a deep love for Western animation and music.

Leave a Reply

Your email address will not be published. Required fields are marked *