How “oldschool” graphics worked Part 1 – Commodore and Nintendo


Welcome! In this episode I’m gonna explain how old-school graphics worked. Let’s talk about some basic math real quick. Back in the early 1980s, your typical home computer had 16K of RAM, some had 32K, and if you really had money to burn, then you might have 64K. Now, let’s talk about screen memory. The video chip back then didn’t have its own bank of memory, so it had to share with the CPU. Back then a typical screen resolution was 320 x 200 pixels. And if you do the math, you’ll see there are 64,000 pixels on the screen. Now, let’s talk about color. If you just wanted 1-bit color, which is essentially black and white, then you would need 8 kilobytes of memory just to hold the screen information. Okay, so that takes a decent chunk of memory from all of these computers. But, it still leaves enough left over for your game code. Now, if you bump that up to 16 colors, suddenly you need 32K, which is more than many computers even had. By the time you get to 256 colors, you’ve eaten up all of the RAM, even in high-end computers, so now there’s no room left for any code. And doing a modern-style 24-bit “true color” would be impossible. So the engineers were pretty smart and they figured out ways to get more color out of these old machines without using up so much RAM, and there were essentially three different methods used for this and I’m going to cover them. Color cells, which were used by many systems such as Commodore and Nintendo; artifact coloring, used primarily on the Apple II and the Tandy Color Computer; CPU driven graphics, such as on the Atari 2600 and the Sinclair ZX81. Ok, so the first type of system we’re going to cover was arguably the most popular. Now what they did was they basically took the screen and shrunk it down into smaller sections and these sections were called cells or color cells. That way you could change the color of each specific cell. Let me illustrate how this works. Let’s pretend this is a black screen, and let’s zoom into the pixels. Now I’ve drawn this so that you can see imaginary lines where the pixels would be. Now, let’s put some example text on the screen. At this point the screen is essentially a 1-bit screen so pixels are either on or they’re off. So, how can we add color to this? Well, divide up the screen into areas that are 8 pixels wide and 8 pixels tall. Now, we’ll make these areas where you can define a foreground and a background color. So, I could turn this letter yellow, and this letter blue. And I could make the background blue. So, you can see how this certainly adds some color to an otherwise black and white display. And each color cell only requires 1 byte of memory to define the foreground and background colors. That means the whole screen only used 9 kilobytes, instead of 8 kilobytes for a traditional monochrome screen. So, that was a pretty good tradeoff. But, here’s where you start to run into problems. Let’s just say, for example, that you wanted to put a white line here. This would actually not be possible, because you can only have two colors per cell. So, you can see how this method was able to give computers 16 colors on screen at the same time, you just couldn’t always put the colors exactly where you wanted them to go. And you could imagine that this made artwork pretty challenging. Nevertheless, take a look at this piece of artwork done on the Commodore 64. It looks very colorful. And, to the layman, they may not even be aware of the color limitations of the computer. But, let’s zoom into this piece of art, and look at it a little bit closer. If I overlay some imaginary lines to show you where the color cells are, you’ll be able to see that, in fact, there are never more than 2 colors per cell. But, the artist has worked very hard to make his work line up with the edges of the cells to the point that it appears seamless. Knowing this should cause you to give these guys a little bit more respect for the work they do. And, if you were a player of the Nintendo Entertainment System, then keep in mind just about every game had to deal with this exact same issue. The color cells worked a little bit different than the Commodore 64, but it’s basically the same headache. So the engineers knew that these color limitations might be a problem, so they gave the software designers another option they could use. Let’s go back to our 2-color example. The C64 had a mode called “multi-color mode”. Now, what it did was literally made the pixels twice as wide, which cut the screen resolution in half. Small text looks really bad like this. But the machine rewards you for your sacrifice. You have traded in some resolution for some color. But, it still only consumes 9 kilobytes of RAM, just like the other system. Now, each color cell will allow you up to 4 colors. So, now, you could do something like this. And here’s an example of a piece of art done in multi-color mode. And again, I’ll zoom in and show you the fine detail, and you can see how the colors were used in this picture. You will still never see more than 4 colors used in a single cell. Most games for the Commodore 64 actually used this mode, since color was often more important than high resolution. And then there was one other tool the engineers gave us. It’s called a hardware sprite generator. Now let me show you how this works. I’m going to create a sprite on graph paper. This is actually how I learned to do this back in the early 1980s. Next, we have to convert this to binary data. So, let me show you how to break this down. Every pixel corresponds to a 0 or a 1. Now I’ve divided this up into three sections of 8 pixels each. So, let’s take the first 8 pixels. There’s nothing here, so we’ll write in a 0 for this section. Ok, the next section does have some pixels, and for simplicity I’ll use a calculator to convert from binary to decimal. So, we get 124. And the last section will also be a 0. Okay, so now to finish all the way down the paper. Ok, next I entered these numbers into the computer’s memory. And, I can turn the sprite on like this. Notice that I cannot type over the sprite, nor can I erase it using the keyboard. Even if I change the color of the text, it doesn’t matter. The sprite is independent from the rest of the screen, and it doesn’t even care about the color cells. I can modify a different register and change the color of the sprite. I can change a different register, and move the sprite somewhere else on the screen. Even a clear screen command won’t get rid of it. Sprites were heavily used in gaming. Different systems had different numbers of sprites. The Commodore 64 had 8 different sprites. Um, the Nintendo had 64 sprites, but, the sprites were very small, meaning you would usually need to use a lot more of them to accomplish the same goal. So, Mario here was actually made up of several different sprites, but they just do a good job of keeping them all together so it looks and behaves like one. All right, so this concludes part one. Stick around for part two, where I’m going to show you how Apple II graphics and some of the early CPU-driven graphics modes worked.

100 thoughts on “How “oldschool” graphics worked Part 1 – Commodore and Nintendo”

  1. It's just funny reading about these old systems today, when my computer has 32GB of RAM, and my GPU has 11GB of dedicated VRAM.

  2. Modern stile isn't 24-bit is 32-bit
    Or you just spoke about anithing else…
    Edit:
    If i think i will find out that pixels is made of 3 subpixels each
    Red,green and blue and they have 256 levels of intensity
    0-255 and we need to calculate
    256x256x256=16,777,216

  3. I remember making little icons for gadgets in my Amiga software I designed. I pretty much used the same technique as the sprite paper at 5:15, but I actually memorized the hex patterns associated with the bits (0x7 is 0111 and 0xE is 1110 for instance) and rarely wrote down the actual final number heh.

  4. Kind of skipped over tile-based (CHR) backgrounds. That's how many systems drew backgrounds (Master System, NES, Genesis, SNES, etc), and also most computers implemented text-only screen modes, including Apple II and PCs.

  5. dude. I totally like this video. whenever I talk about programming sprites in machine code on the c64 computer I often get black stares. great video. thanks.

  6. Florentin ist so cool, der interessiert sich immer für so Sachen mit Commodore und Nintendo und so. Der würde sich sowas jetzt auch nach Verflixxte Klixx noch privat nochmal reinziehen weil das ist voll der interessante junge Mann der Florentin Will.

  7. I’m so incredibly happy I found your channel. I have learned SO MUCH and everything you do has given me new appreciation for older tech.

    I want to collect, game on, and create art on Commodores now. I’m in love with this fascinating machine 🥰

    Thank you, 8-Bit Guy, for all you do for us!!!

    🙏👾💜

  8. I understand why black and white color takes 8kb of ram – the 64000 pixels correspond 1:1 with bits of information, and 64000 bits / (8 bits per byte) = 8000 bytes = 8 kb. But why does having more colors take up more memory?

  9. You drawing a Pac-Man sprite on graph paper makes me think of the original Super Mario Bros. video game. I bet there are still some people out there who don't know that the entire game was designed by Miyamoto on graph paper.

  10. Wie machen er Bildunterschriften für so vielen Sprachen? Wow!

    Warte…

    Google translate…

    Wie macht er Bildunterschriften für so vielen Sprachen? Wow!

    Danke Internet!

    Ich bin Amerikaner, so yeah.

  11. Please could you help me? I would like to find a C64 game that I used to play when I was a little child. The character had to set free animals (a snake, a lion, a bear and so on) from their cages. The first stage was set in a yellow city with skyscrapers that the character climbed up. When the character took an item, I'm pretty sure it was a glass of beer, the commands were reversed for a while. Do you know this game?

  12. I really really really really, love this channel, when I was young I wanted to be a 8 bit programmer, these videos make me smile, with all the nostalgic information. 😄😄😄👍

  13. Did you know Commodore had a CMD hard drive? They are very rare but we still have one of them and it works. Noisy as heck.

  14. This is amazing! I now know how the graphics were done in the old games 25 years ago 😛 Thanks for the great video

  15. I wonder how long it would take to make a game development program where you can use the graphics limitations and color options, but expand the game length. If I was a programmer I would set up my own version of a game creator program where I can create any amount of 8 by 8 pixels, but only use 255 at most per screen, and follow the limitation of 4 3-color pallets per game, to give each game an authentic NES look. Allow certain points to go beyond the limitations, but keep them relevant for every single screen, the amounts of max sprites per line, and the color pallets. It would an awesome program where one could pop out new games every month (or every day if they're truly psychotic), or work on a few really lengthy games per year, and playtest the shit out of them. Anyways, I'm just ranting. There are so many games that I have played on the NES, that I would love to personally make sequels to for my own personal entertainment (not sales, so they never be able to stop me… Mwa Ha Ha).

  16. It's kind of funny watching this on a PC with 32GB of memory (compared to 32KB), the main 4K display of 3840×2160 (compared to 320×200), the GPU has 8GB of dedicated memory (compared to 8KB of shared). Using 10bit colour (equivalent to 30bit colour if measured the old way), with ~1 billion colours.

    Don't forget 2bit colour as used by the GameBoy and many other 'greyscale' devices. <– it's fascinating how far engineers went to utilise every last bit of the hardware.

  17. Скажите пожалуйста как называется игра на 4:04 минуте?

  18. Hey, in the intro of this video for the 8bit Guy logo there is a laser light scaling up sound effect that is done. I remember first hearing this kind of sound effect in a few TRS-80 model 1 games back in the day.

    Is there a name associated with this kind of sound effect? I want to learn how it is created.

  19. I added Polish subtitles to this movie. Subtitles have the "sended" status. What should I do to make subtitles appear in the subtitle list? Does this require some kind of approval?

  20. А вся суматоха-то была из-за памяти) Вот почему память являеться главным атрибутом пк)

  21. Fascinating! I don't really get how the sprite uses less memory though. Is it just that it is using memory on the CPU that isn't normally available via POKE?

  22. Die Werbung vor dem Video war so geil xD. Hab die ganzen 4 Minuten durchlaufen lassen, du Schlawiener xD Wait a Moment…thats a fucking English Video… But the heading is German…FUCKIIIIING YOUTUUUUUUUBEEE!!!😡😡😡

  23. Oh wow. So that's why certain pixel art style can only be achieved by certain pixel scaling. I've always wondered why the more "realistic" graphics seem to have that elongated look.

  24. Thats crazy how now we have computers that can generate millions of 3D objects when the old ones struggled to move 2D sprites

  25. Все здесь благодарят автора видио, а я поблагодарю автора русских субтитров. Спасибо, Architecture #4 !

Leave a Reply

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