Graphics & Palettes – Super Nintendo Entertainment System Features Pt. 01

Graphics & Palettes – Super Nintendo Entertainment System Features Pt. 01


This video is part 1 in a series about Super
Nintendo Entertainment System features. We’ll be introducing the various graphics
formats, as well as palettes and how they are used to assign colors to the graphics. Suppose we have an image that we want to store
on our console. How can we represent this 2-dimensional image
as a 1-dimensional stream of bits? We know we can divide our image up into pixels,
and that each pixel has a single color, or it’s transparent. For now we’ll just treat transparency as its
own special color. Let’s start at the top left, work across,
and down listing off the colors of each pixel. Then, we can represent each color as a single
number by finding the appropriate amount of red, green, and blue in the color. For reasons you’ll find out later, we treat
each color as a 5-bit number, ranging from 0 to 31. If we do this for each pixel, we’ll end up
with 512 bytes that correspond to an approximation of this image. I say approximation because we may have lost
some color data when we limited our color space from 0-255 to 0-31. But this works! We can retrieve our image by just reversing
the process, going from a byte stream to a 2-dimensional image as long as we know what
the size of our original image is. What we have done here is called ‘direct color’. The graphics data holds the color of each
pixel within it, without having to do any extra work. The only problem is that this file we made
is very large. You can tell just by looking at it that there
is a lot of repetition, since we use the same colors a lot. Maybe instead of storing the color of each
pixel in the file, we store which color it is, and then make a list of all the colors
to reference. We’ll call transparency #0, black #1, white
#2, and so on. Separately, we’ll keep track of which color
is which number. Without it, we wouldn’t be able to restore
the correct colors of the image. This is called ‘indirect color’, and it’s
what most of the SNES graphics formats use. Another benefit to this format is that we
can switch our color table–the palette–and create a copy of the graphics with a different
color scheme. To learn how the data is truly stored in memory,
let’s use a more simpler image for now. This image has only two colors, black and
white. So our color indices are just 0 and 1. This is already in binary, so we just start
at the top left, work our way across and down to form our file. We used 1 bit to encode each pixel, so we
say that this file has a depth of 1 bit-per-pixel, or 1BPP. If we step up to 2 bits per pixel, we find
that we can expand our palette to be 4 colors intead of 2, and our indices run from 0-3. This is the lowest depth that the SNES supports,
and it always treats color #0 as transparent. But, there’s a small catch. The two bits per pixel are not stored togetherin
memory. There’s this thing you have to keep in mind
that’s called a bitplane. The nth bitplane is the nth bit of each index
for each pixel. So the first bitplane is the least significant
of each index, and the second bitplane is the most significant bit. To store this image in the SNES’s 2BPP format,
we take the first bitplane, then the second bitplane of each row. Then we add on each row until we get to the
last row. There are other ways to store graphics in
a 2BPP format, but this is just how the SNES interprets graphics. The next depth the SNES reads is 4BPP. This allows for 16 colors, since each pixel
uses a 4-bit index. We interleave the first and second bitplanes
like we did for the 2BPP image. Then, we interleave the third and fourth bitplanes. We can also continue this pattern for 8BPP
images, which allow for 256 colors. There’s another 8BPP format the SNES recognizes,
used with mode 7 graphics. 8 bits per pixel is just 1 byte per pixel,
so we can just store the pixel indices directly one after the other. This makes more intuitive sense, but it isn’t
really expandable, which is why the other formats don’t use this method. 8BPP graphics can also be stored in direct
color format when a certain switch is set. The downfall to using direct color is that
you are limited to an 8-bit or an 11-bit color space instead of a 15-bit color space. We did all these examples with an 8×8 pixel
tile, but what if we had more graphics than that? 8×8 tiles are stored one after the other;
two tiles will never combine or interleave data. Generally, tiles are organized in rows of
16 due to how objects and 16×16 characters work, but you can really interpret the data
however it applies to the situation. So now, we know how the graphics are stored,
but we still have the color data to deal with. You’ll notice the highest color depth supported
up to 256 simultaneous colors. That just happens to be how many colors the
SNES can hold in its CGRAM at one time. The colors are stored in the same 15-bit format
I showed earlier. A palette is the sequence of colors used to
color in a particular graphic according to the color indices. Palettes can be 4, 16, or 256 colors depending
on the bit depth of the graphics themselves. The first color of the palette is always treated
as transparent and can’t be changed, even if the tile doesn’t have any transparency. The first color in CGRAM, color $00, is used
as the background color behind everything. So now, given a dump of CGRAM, which holds
all the colors, and a dump of VRAM, which holds all the graphics, you should be able
to figure out what the graphics look like. You can use an emulator’s debug tools such
as Bizhawk or no$sns to look at the RAM and graphical representations of the RAM in real
time, if you are curious. Thank you for watching. This series of videos aims to introduce various
things and explain them on a basic level. There are a lot of details that may not find
their way into these videos, so I encourage you to do more research on your own if you
are seriously interesting in this sort of stuff. Next time, we’ll talk about objects and OAM.

Only registered users can comment.

  1. I can't understand because I have no knowledge of binary and programming at all but the animations are wonderful 😮

  2. For anyone wondering about the conversion he's doing at 2:18

    01111100 = 7C

    1) covert from binary to decimal
    2) convert decimal to hexidecimal

    0*(2^7)+1*(2^6)+1*(2^5)+1*(2^4)+1*(2^3)+1*(2^2)+0*(2^1)+0*(2^0) = 124

    124/16 = 7.75 (throw away the decimal)
    124-(16*7) = 124-112 = 12

    7C

  3. Not a bad basic description. Considering both what the official documents and those created by the homebrew community say though, it's impressive you can get that level of clarity out of it.

    Though to be fair there's a lot of other complications and weirdness in relation to how graphics are stored…
    But…. That's a bit much for a single short video.

  4. The fun thing is that the NES does it the exact same way, and the only difference is that it only supports the 2 bits per pixel format, and only 32 bytes of CGRAM (4 background and 4 sprite palettes with 4 palette indices each)

  5. Awesome explanation…the details are clear and crisp! This really helps you to appreciate the design moves that often go unnoticed.  This vid got me thinking about some things…the programmers cook up these amazing systems/games for our enjoyment, but most of us stay at the level of consumption.  Its like going to a restaurant and trying authentic thai food…it doesn't necessarily mean that we go out of our way to understand the culture of where that food comes from.  I think the same goes for games.  We can consume the game by playing it, but to truly grasp the imagination of the system/game at hand we need to understand what's under the hood, and its obvious from these vids that you need a good foundation in mathematics and programming. These videos help us to appreciate the chefs who cooked up these experiences.   This is a whole other dimension to gaming that I think deserves our attention. Thanks for your vids, man

  6. Thank you very much! I grew up with this system and want to use it to explain these sorts of programming concepts to my son as he grows up. I really appreciate your thoughtful explanations of these concepts! Keep 'em coming!

  7. man I'm loving this! I think hands down the best channel on how seeing a designers point of view in programming SNES games. Keep it up man, I love this stuff (MOOORE INPUT!!!)

  8. Great content man! This makes me want to learn how to program the SNES, and these videos could serve as a good visual reference when things aren't very clear in text form. Once you're done with this series, you should do something like this for the IBM PC and compatibles, since interest in that machine is growing and it's still not very well covered. Of course, modern PCs are still IBM PC/AT compatibles, so this would cover modern computers in a way as well.

    I'm actually developing my own game for MS-DOS as a hobby project. I'm using Digital Mars C compiler on Windows 10 with Code::Blocks for my IDE and DosBox for testing. It's surprisingly quite simple to do.

  9. This is an amazing work, incredibly well explained. I love your videos, looking forward for the rest of the videos and all the hardware stuff you can deep inside this great console.

  10. Could you please, after this series is done, talk about NES, SMS and Genesis graphics? I believe there would be some content overlap, but it would still be better if each series would work separated from each other.

  11. This is so enlightening, your videos have really good editing and you know your stuff. I’m definitely looking forward to each video

  12. Once you're done with this series, can you make a video explaining how the 3D graphics in Star Fox (or Starwing of you're like me and lives in Europe) works? I've always (or, well, not always, it's closer to about 2 – 2 and a half years) how 3D polygonal graphics works, especially in retro games, and Wikipedia isn't very trustworthy, so I'd absolutely love it if you made a video on the subject of Star Foxes 3D graphics.

  13. Does anyone knows a similar video ( or series of ) about the Genesis ( Mega Drive ) ?
    All those that i found are not as in depth as i hoped :-/

  14. I am impressed with your content quality and the amount of technical data provided. It’s really appreciated, I wish I had found this sooner.

  15. You talk about the color palette, but what is actually generating the color, like a red or yellow. I know they are not real color pigments, so what exactly are they!

  16. I think the idea that you can't have "true black" in direct color is based on the mistaken notion that black and white are not completely relative to one another and what is white one second can literally be black the other depending on what it is in relation to. So, it doesn't matter, there is no "true black"

  17. 0:22
    as
    1010101010100101001011101001010101011100001010100100101010010101010101010100101010000000010101010100101011101010100101010100101010101010101010101001010101010110101011011111111111110100101100101010100101001010101010100101010100100000101010100101010101001010101001010100101010101001010101010010101001010101001010101010010101010110111010100101010101001010101010101010010101010101010100101010100101010101001010101010101010100101010101010010101010101010101001010100101010101001010101010101001010101010010101010100101010100000110101011110011111110101010100101010100101010100101010100101010010101010
    of course

  18. 3:27 Finalmente… agora eu sei o que significa, em partes, bits por PIXEL!

    Na imagem, vários números em um mesmo bloco, que é PIXEL que veremos na tela em cores….

  19. Greattt another Nintendo centric channel, pretty cliche… Great content nonetheless. Here's a challenge, I wanna see you or someone break down the Genesis. Let's see how Alien Soldier or Thunder Force IV get their awesome graphics and animation.

  20. 1:01 Is it just me or I see a mushroom in the string on the right?
    But Fantastic content, I will binge watch all of your videos. Very entertaining.

  21. This whole series is amazing. My only suggestion is to include links to other video, or test resources relating to the video so those of us who want to delve deeper can explore it more in depth. Cheers. And thanks for taking the time and effort to make this series.

  22. This is super interesting. But question: i would like to understand all explanations. What do I have to do? Which books do I have to read or which subjects are important? — sorry, as you see, i am a noob. So a big thank you to anyone who could give me an answer. ?

  23. Why do snes games only have 128 colors or less on screen in mode 5? Is it because they’re using 4-bit, 16 color graphics per element instead of 8-bit 256 color graphics?

Leave a Reply

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