Welcome back, Adventurer. I hope the last time wasn’t too hard on you. I admit it got a bit long (I strive to keep it under 2,500 words, the last one was 3,900). But we covered some important ground that will come in handy later.
In this article (should I start calling them dungeons instead? Levels? Quests? I’ll think about it) we will go about things a bit differently. Since the last article was heavy on the theory, I want to keep this one a bit more practical.
Apple IIGS, Atari ST, Amiga, CD-i, Game Boy Color, Apple Macintosh, Nintendo Entertainment System, Palm OS, DOS, Pocket PC (ARM, MIPS), Mobile Phone July 30, 1987 The Faery Tale Adventure.
I promised you in the last article that you will create a sprite to display later on the SNES, so in this article, we will
And in the next article, we will use that sprite and display it on the SNES. Let’s get started!
The SNES relies on a technique called (indirect) color indexing (in fact, the NES and Game Boy used this technique too, as we will see shortly). Instead of saving the color of a certain pixel, the index number of a color is saved that references a color inside a palette.
Let’s look at a simple 8 x 8 example. This first image is in 1 bit per pixel format, or 1bpp:
Each pixel holds 1 bit. So this means, a pixel can have two colors, either color 0 or color 1. On the left, you see the sprite. To the right of it, you see the color index assigned to each pixel (i.e., the index of the color the pixel will have). The numbers under Mem. are the indices of the corresponding pixel row translated to hexadecimal. And finally, the palette that shows which index represents which color.
Now, only two colors are nice for certain art styles, but to relive the glory of 16-bit graphics we need a bit more (no pun intended). Let’s extend the format to 2 bits per pixel (i.e., 2bpp). Having two bits per pixel allows us to assign four different colors to each pixel (remember how binary numbers work?). Here is an example:
Let’s introduce the concept of bitplanes. Since we now need two bits to store the information for one pixel, we need to think on how to store those bits in memory. Each byte in a bitplane represents one row of the sprite. Each bitplane holds one bit of the color index of the corresponding pixel. So to get the color index of a specific pixel we need to combine the data of each bitplane. For example, to get the color index of the first pixel of the first row (the pixel on the upper far-left), we look at the first bit of the first row of each bitplane and combine them to form a 2-bit number.
Let’s do an example:
This can be hard to wrap one’s head around at first. I suggest you take the data from the gif above and try to complete the sprite by hand on paper. Yes, it’s tedious. But when we talk about the architecture of the SNES in a later article, a lot of the things described there will be easier to understand. Most of the graphical limitations of the SNES stem from the way it stores and processes graphics data.
Now is a good point to talk about the section title, intertwined and planar data storage. Once we have converted our graphics to a format the SNES understands. There are two ways to store the data in memory:
This again might sound confusing, so let’s try to clarify this with another picture:
On top, you have the two bitplanes and their hexadecimal equal. Below you see the graphics data stored once in planar and once in intertwined format. In both cases, The bytes are stored in consecutive memory locations from top to bottom.
Why does the distinction matter? Nintendo has used both formats in their consoles. While the NES stored graphics data in planar format, the Game Boy used the intertwined format. Both consoles could display sprites with a maximum of four colors (why they used different formats on each console is anyone’s guess; the overall architectures off both consoles aren’t that different, to it probably came down to a factor like performance or system design).
So which format does the SNES use? The answer is both.
I know, more confusion. But before I explain that, there is an important piece of information to add: While I simply used white as the color 0 of the palette, this isn’t entirely correct. The first color of a palette has a special function. The SNES considers the first color in any palette as transparent and will not render it. So any pixel that has the color index 0 will not be displayed. We will see this in action shortly.
Now, back to planar and intertwined. I told you the SNES uses both formats. Why? The SNES (unlike the NES and Game Boy) can actually switch between different bits-per-pixel formats. In fact, the SNES supports a total of five bit formats: 2bpp, 3bpp, 4bpp, 8bpp, and the special Mode 7 format (this is the ominous mode used in some games to simulate some kind of pseudo 3D rendering, e.g. the Final Fantasy VI opening sequence, Mario Kart, or F-Zero; I will cover Mode 7, but that is -sadly- still some way off).
You already know 1bpp and 2bpp. Extending 2bpp to 3bpp and 4bpp isn’t hard if you understand how color indexing works by now. You simply add the extra bitplanes needed. So 3bpp will let you use a total of eight colors, 4bpp a total of 16 colors. The two most frequently used formats are 2bpp (HUD elements and background) and 4bpp (backgrounds and sprites).
This concludes the section on the color indexed graphics format. If you feel overwhelmed by it, there are two excellent resources that explain this in more detail. You will find links to them at the end of this article in the Links and References section.
Let’s put this new knowledge to good use and actually create a 16 x 16 sprite (which is simply four 8 x 8 sprites combined) in 4bpp format by hand. Finally, we get practical, as promised!
(If you’re wondering, “Wait! I have now all the color indices, but where are the colors themselves?” You are correct, we haven’t covered that yet. This will happen in the next section.)
Before we start, let me state that this is not the best way to create graphic assets for the SNES. There are a lot of tools on the web that will automatically convert assets in jpg, png, bmp, or any other format to 2bpp/4bpp for you. I will link some common tools in the Links and Reference section at the end of this article.
Since the victory of Sonicfox at Evo 2018 (as of writing of this article in August 2018) is all the rage right now, will recreate the face of Super Kai from Dragon Ball Z: Super Butouden 3. I am a horrible pixel artist, so I won’t take you through all steps of creating pixel arts, there are more than enough tutorials and guides around on the web. Cyberhive game. So, here are the finished sprites:
Since we’re going to use a 4bpp format, I can use up to 16 colors (remember to reserve color 0 for transparency). Let’s start by creating the color indices:
No surprises here. There is no need to use all 16 colors, so the last color of the palette is simply set to black. Since we can use any color for transparency, I simply chose a gray tone.
Now, let’s translate this by hand with the help of a hex editor. I prefer hyx, but you can use any editor you see fit. I’ll link some down in the Links and References section. Mind again that I’m doing this only for educational and demonstration purposes. When creating your own game assets you can, of course, rely on (automated) tools to do this step for you.
I will take the first row of the first sprite (upper-left) and work my way from the left-most pixel to the right. Since we’re using 4bpp, we now have 4 bitplanes: bitplane 0, 1, 2, and 3. Now, do we store the bitplanes in planar or intertwined format? The answer is both.
Here is how we need to store the graphics data in memory so the SNES can read it:
So, this is obviously intertwined. Now we have stored bitplane 0 and 1 in memory, so the file is now 16 bytes long (1 byte times 8 rows times 2 bitplanes equals 16 bytes). But what happens with bitplane 2 and 3? Easy, rinse and repeat! We take the exact same steps as above just with bitplane 2 and 3 this time. Here is the finished first tile in my hex editor:
Now, repeat this for the other three tiles. One tile needs 32 bytes, so your final file should have a size of 128 bytes (crazy, I know! The favicon in your browser is larger than this). Save this as
/assemblyadventure/lesson03/ or wherever you prefer to keep your files. Mind that the file extension is arbitrary; I chose
.vra to represent VRAM (which stands for Video RAM). Some choose
.bin, it doesn’t really matter. Just keep it consistent. You will need those files in the next article when we write the code to display them on the SNES.
We have converted our four tiles into a 4bpp format the SNES can read. Now the only thing missing is the palette, i.e., color data.
Since we’re using color indexing, we need to store the actual color values somewhere. The sprite data and color data are stored in two separate files. Why that is will be part of a later article on the architecture of the SNES.
You’re probably familiar with the way computers store color information. The most widely used format is RGB888 (or RGB8888 if you add transparency). You store the amount of red, green, and blue that make up a color. The color components mixed together then yield the final color on the screen.
Unlike the NES and Game Boy (both had fixed palettes developers are forced to use), the SNES can actually display any color that fits into its BGR555 format. Mind the BGR part, the SNES stores the color components in reversed order.
So, how do we convert an RGB888 color to BGR555? We simply take the five most significant bits of each color component (i.e., we discard the three least significant bits) and reverse their order:
Mind we only use 15 out of the 16 bits of a two-byte number, make sure to always clear the most significant bit to 0. Try and see if you can convert the 16 colors of the palette we used for our sprites above. Go! Do it! Don’t cheat!
Okay, are you done yet? And you didn’t cheat?
Here is the solution:
Since each color takes two bytes to store, a full (4bpp) palette will take up 32 bytes. I haven’t told you that yet, but the 65816 is a little-endian machine. This mean, if you need to store information that is longer than one byte, the store the lower byte first, then the higher byte.
Let me demonstrate this again in my trusty hex editor:
I took the converted data from the picture above and wrote the first the lower, then the higher byte to the file. Save this file as
SpriteColors.pal. I again chose an arbitrary file extension,
.pal for a palette.
So, now we have our graphics data in
Sprites.vra and color palette in
SpriteColors.pal ready to use. Congratulations, you have created your first SNES graphics!
Again, the process I described here is definitely not the way to go about when creating assets for your game. But it is essential to understand the underlying rules and formats. There a few tools specially made for SNES development, I’ll link some at the end in the Links and References section.
After the last programming theory-heavy article, this article explained (a bit more practical) how the graphics format on the SNES works (in fact, most retro consoles like the NES, Game Boy, Genesis/Mega Drive, etc. use this format in some variation). You created your own first sprites and palette by hand. In the next article, we will take these sprites and palette and display them on the SNES. So finally you will put your theoretical knowledge to use!
As always, comments and suggestions are always welcome. Please use the comment function below.
Kirby's back and the NES has him. Already a Game Boy legend, the rotund puffhead comes to the 8-bit system with six, count 'em, six big megs of action! If you aren't yet a fan of Nintendo's Kirby, you will be once you start playing this addicting game.
Everything that made the hand-held Kirby's Dream Land enjoyable has been retained and improved in Kirby's Adventure. He still lives on the distant Art Deco-inspired star called Dream Land, and he's still battling his archenemy, King Dedede. This time the King has split the Star Rod into pieces, which means nobody in Dream Land can dream at night. Only Kirby can find the missing pieces in this side- scrolling search that takes him through seven immense levels and into combat with dozens of imaginative enemies.
ProTip: The Level 1 Tree Boss has only one vulnerable spot -- his nose. Bop it with the apples that fall from overhead branches.
As in his Game Boy debut, the Kirbster still runs and floats across land and sea, Hoovering up enemies and blowing them back out against oncoming attackers. He also swallows points, extra lives, and health-restoring foods. A major enhancement over the Game Boy version is Kirby's new ability to adopt his enemies' powers when he devours them, meaning Kirby's now armed with Hammers, Fire- Balls, Lasers, Porcupine-Needles, and over a dozen other abilities. A large display across the bottom of the screen tells you at a glance what ability Kirby's sporting, as well as his number of lives and your overall point total.
One of the best parts of this game is its overall look. The detailed monochromatic backgrounds on the Game Boy now explode with color on the NES. Hidden caves, desert pyramids, and churning oceans abound in the wonderful world of Dream Land. The special effects are, well, special. Pick any level, and you'll find innumerable graphic flourishes. For instance, as Kirby walks around the brick Butter Building in Level 3, it rotates past him (a rare effect in 8-bit games). Also check out the gorgeous flowing fountains in the Crape Garden, or the darkened castle chambers that only get lit when Kirby swallows a light. The only complaint is with the sprites: They're often too small to identify, and you miss some of their humorous details.
In addition, the sounds add a symphony of delights to the game. Each character has its own signature squeak and the music changes with each new encounter.
During the maritime mishaps in the Orange Ocean, look for hidden doorways scattered throughout the entire level.
Each level offers three Bonus Games: Crane Fever (the familiar carnival game where you pick up items with a crane); Egg Catcher (face off against the King in the ring); and the hilarious Quick Draw Kirby (see who's got the fastest Button A in the West). At the end of the game, after you've defeated King Dedede, expect two more rounds of wild shoot-em-up action. Whatever the challenge, Kirby's up to it, because the game's simple controls enable him to move easily and react quickly. In fact, the controls are as well-rounded and smooth as Kirby himself.
Kirby's Adventure is as good as the 8-bit Mario games, which is great news for NES owners. Now, instead of looking longingly at 16-bit systems, you can look in wonder upon the marvels of Dream Land, a place of endless fun and adventure.