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

July 30, 2019 posted by


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 Comments

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

  1. PRdeSO says:

    David…

    you're a cool guy

  2. Hiustwui says:

    Rien à voir avec le graphisme, mais plutôt avec les capacités de la machine.

  3. Joe Blow says:

    How cool! It's great to learn things from the ground up.

  4. Někdo says:

    Oh, sprites 🤗 so cool and retro

  5. FrxBass says:

    Nice tits

  6. Sean Maxwell says:

    I love coming across a YT video and creator that actually earns their subscriptions. GJ

  7. Happy Fakeboulder says:

    2:40 wouldn't it be 2 bytes (adding another 2 kilobytes instead of 1 kilobyte) because it's a foreground and a background color, and it's 8-bit color?
    or am i misunderstanding something?
    EDIT: oh wait, maybe it was 4-bit color…?
    EDIT 2: 4:33 really, still only 9K? something seems wrong here
    you're specifying 4 colors for each block, right?

  8. Gar H says:

    Is that cottage on the river a Bob Ross piece?

  9. A. Maldonado says:

    awesome video, man!

  10. rollinger r. says:

    Ich weiß noch, als ich meine ersten Sprites auf dem C64 programmiert hatte. Ich bin fast verzweifelt wegen einem einzigen Scheißpixel. 🙂

  11. Swithsss says:

    Hate these machine translated title and description by youtube. Why if Im from Russia I cant just see it in original language? Its so stupid.
    By the way cool video)

  12. Nova Void says:

    aka how every single indie game with "retro visuals" is doing it wrong

  13. madison verger says:

    isn't this really just explaining how the frames are drawn

  14. Greg Yaesu says:

    Great Video!!

  15. Clint Eastwood says:

    I made so many sprites on Graph Paper..

  16. bowserlv100 says:

    16,32 64 K memory RAM! Dias em que PC era para Héteros SUADOS e Malhados!

  17. savvynz says:

    I remember making sprites with those paper grids. And typing in pages and pages of code from magazines to make a small game. Friends and I would take turns calling out the data lines from the magazine while the other one typed them in. Can you imagine kids doing that nowadays?!

    I also distinctly remember being about 8 years old and realising that I could assign an X,Y value to sprite to position it on the screen, then to change those values with a key press. I think my career as a coder really started at that point.

    Though I discovered Girls and alcohol shortly after that which caused a decade or so of having no interest in computers at all.

  18. Anon Ymous says:

    I put a gtx 1080 ti in a colecovision.

  19. Joel Martin says:

    Did Mario ever accidentally go four divergent ways?

  20. edr777 says:

    Great video! Brings me back to my BASIC days…I learned a lot, thank you!

  21. Randal Pink says:

    I know this is super old but man I want you to explain more stuff to me hahah. That was so well taught

  22. BlazeBytes says:

    you spelled nintendo wrong

  23. Jonathan Rodriguez says:

    Who's here due slightly to Bandersnatch?

  24. stonytina01 will-not-be-banned says:

    I always thought the limits of old systems required better programming talents.

  25. stonytina01 will-not-be-banned says:

    Ah… oh… I actually did that sprite designing stuff on graph paper in the mid 80s.
    It was also how I learned about binary numbers.

  26. Lou Picardo says:

    Yo! Wassup homie?

  27. Mitchell Boldman says:

    That is a buetiful thumbnail

  28. Pranav Tripathi says:

    1:44 it says "Nintento" and not "Nintendo"

  29. Duck Producciones says:

    you deserve billions of subs greetings from cochabamba bolivia

  30. Ed Trillo says:

    Fantastic video, your infographics and editing are so well done!

  31. Alessio S says:

    could we revive those smart engeneers to program our new computers and throw away all our sluggish windowbillgates?

  32. Eduardo Rossi says:

    There is something I didn't understand: how they select the color of each pixel inside the 8×8 box?

  33. Lincoln Stookey says:

    You are the bomb!

  34. Retro Will says:

    | |
    O

    whoa.

  35. RW Lynch says:

    I just had this random thought today… Jan 2019. Glad I found this to answer my thoughts

  36. Bitch Face says:

    Is that a slower version of the 8-bit keys song for some of the background

  37. Israel Wolstein says:

    ( – – – – Proud new subscriber

  38. AntomationTV says:

    nintento entertainment system

  39. Pralka TV says:

    If You had Final III than You could turn the sprite collission off

  40. Logan Gamer 20 says:

    Typo in 1:42

  41. Stormspark says:

    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.

  42. PureOrangutan 10 says:

    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

  43. bestamerica says:

    '
    why too dark color font letter / sentence on this video at 044

  44. LordRenegrade says:

    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.

  45. snarfblam says:

    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.

  46. Tanya Mennear says:

    3 million views! He definitely deserves that ad revenue!

  47. Some One says:

    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.

  48. TalkingToTheHand says:

    Fischkarteeeeeeeeeeeeeeeeeee

  49. OwLMaster says:

    Es ist schon wieder Donnerstag!

  50. DeathMetalVictory666 says:

    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.

  51. Mr Pixel92 says:

    Did you make this presentation in Commodor64?

  52. Termination Shock says:

    You really look like Bruce Willis

  53. lego craft says:

    I heard that 5:18 8 bit keys.

  54. Return to Cat Mountain says:

    Great video!!!

  55. Punky Lex says:

    Great video!

  56. Greatest Ever says:

    Why did I just now find this guy? Interesting stuff.

  57. Screw The Net says:

    FANTASTIC! Ilove looking back on old school tech and its progress.

  58. Little Caladan says:

    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!!!

    🙏👾💜

  59. Dénes Sebestyén says:

    those two artworks are freakin' awesome!

  60. Rob Dimambro says:

    New subscriber, really enjoying these vids so far 🙂

  61. Sam Knocke says:

    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?

  62. CrashGuy41 says:

    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.

  63. Jackson Mandle says:

    Wanna sprite cranberry? cue tiny pixelly cranberry

  64. Fernando Gonzalez says:

    Commodore 128 had an integrated sprite editor with command sprdef

  65. Joshy boy says:

    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.

  66. Raichuzyu says:

    Who is Nintento?

  67. BangGamer 1338 YT VN/ENG says:

    Mario

  68. sexobscura says:

    … is that, per chance, Stephen Tobolowsky

  69. Noelie Howick says:

    This was super cool! Thank you so much for the video!

  70. Giuseppe Ferraiuolo says:

    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?

  71. Mac Flex says:

    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. 😄😄😄👍

  72. luk3Z says:

    I haven't program in Basic since 2000 but I appreciate that you make this video 🙂

  73. Stephen Seat Jr. says:

    Holy shit. I actually learned something that tech class never taught me.

  74. GoldenPhonautogram says:

    1:33 You spelled "Nintendo" wrong. Still a good video, though.

  75. damnson says:

    SO EDUCATIONAL, THANKS!

  76. BlueFeather0509 says:

    Amazing

  77. Anthony Ingram says:

    I reccomend following this video up with this: https://youtu.be/ZWQ0591PAxM

  78. Singlet Tuber says:

    Now I want a commodore 64

  79. Hubbabushka says:

    4:57 “Most gAmes for the Commodore 64…”

  80. john smith says:

    6:35 – Yume kōjō doki doki panic.

  81. Walter White says:

    So amazing how humans come up with this stuff

  82. Cool Kid BMX says:

    Wow, from watching your latest videos…you've gained alot of weight.

  83. Anula993 says:

    But how did the hardware sprites actually work?

  84. Peter Hart says:

    2019 anybody? Me.

  85. xXCoolGamerPro2635Xx says:

    5:17 8 bit keys intro!

  86. Daniel Martinek says:

    3:01 same wspectrum 128k

  87. problem solver3 says:

    9k exepec 8k?

  88. Kyle Hill says:

    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.

  89. Kyle Hill says:

    Commodore had and still has the best 8 bit color.

  90. Antonio Kantek says:

    Great vídeo!

  91. Krishna Nadoor says:

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

  92. Michael Rishot says:

    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).

  93. Gerardo Lerma says:

    bro what the heck, ive been trying to make a pixel art game and this just blew my mind

  94. Homem-GenkoRanko Portugues says:

    4K screen? COOL!

  95. JesusChristIsLord says:

    All this talk about sprite is making me thirsty…

  96. Gareth Evans says:

    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.

  97. Miguel Moreno says:

    This channel should be called the lazy 8 bit guy

  98. RectalDiscourse says:

    Penises are for gay lunch

  99. Nicht von dieser Welt says:

    5:20 Love the sprite sheet. I did this too by replicating sprite images from Nintendo magazines to sheets of paper to then draw them on screen on my old computer.

  100. Nicht von dieser Welt says:

    Also nice to learn what actually a sprite is. Really great educational videos you put out.

Leave a Comment

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