Basics of Transparent Blitting, Part 1by Michael J. Norton
We’re back in session once more to discuss the fundamentals of Game Boy Advance SP-style graphics programming. Previously we discussed using offscreen buffers in the article, Basics of Offscreen Buffering. In this discussion we’re going to focus on copying sprites to the offscreen buffer. We’ll learn how to use a transparency pixel, and what it is used for in blitting <rendering> sprites.
Lesson 1: Wading Through the Hexadecimal Swamp
Even on the smoothest of sailing trips one can encounter a little turbulence every now and then.. Well, today is no different. We’ve been sailing smoothly through Elementary Graphics topics without having to discuss the complex math involved. Today we have an exception. I need to cover some basic math in order to discuss computer pixels and color.
Computers use a special number system that will seem a little foreign to you at first. With time and experience, you’ll get used to it. When people learn to count, we’re accustomed to starting with 1 and counting to 10. This is called a base-10 decimal system. When a computer counts, it counts to 16. This is called a base-16 hexadecimal system. To make things a bit more interesting a computer uses letters after it counts to 9.
Let’s take a look, side by side, at a base-10 system and a base-16 system, starting from 0 and counting to 15.
|0||1||2||3||4||5||6||7||8||9||10||11||12||13||14||15||-- base 10 counting|
|0||1||2||3||4||5||6||7||8||9||A||B||C||D||E||F||-- base 16 counting|
Why does a computer use base-16 numbering anyway? It all has to do with the computer’s hardware. A single base-16 digit can represent 4 bits. What is a bit? Now you’re making me work for my money, aren’t you?
A bit is the true language of a computer. A bit can have one of two values, 0 and 1. A bit is simply a placeholder for a 0 or a 1. Four bits are four placeholders for four zeros and ones. For example, 0000 is a four-bit representation of the number 0. The number 1 represented in 4-bit notation is 0001. A single-bit computer is pretty much useless. Early computers were 8-bit computers. This meant 4 bits used together could represent an 8-bit number.
To represent the number zero using 8-bit notation we would write, 0000 0000. To write the number 1 using 8-bit notation we would write, 0000 0001. The smallest number we can represent with 4 bits is 0 and the largest number is 15. Four bits, in the good ol’ days of computing, was called a nibble. Two nibbles, 4 bits + 4 bits = 8 bits, is called a byte. Let’s take a look at how bits are used to represent numbers.
The table shows side by side the binary numeric value with its decimal and hexadecimal counterpart. Before you get mad and jump out of a window, let me make this point. You don’t need to clearly understand hexadecimal just yet. Just know that it exists and WHY it exists. Here is WHY a programmer uses hexadecimal numbers in the first place. Look at the chart above. One hexadecimal digit can represent 4 bits. Take for example, the 4-bit value 1111. I know from a lookup chart that this value is F hexadecimal. This is easier for us to read, too. After some experience, you’ll get the feel for hexadecimal numbers.
This concludes today’s quick math lesson. Let’s go play with some video game graphics.
Lesson 2: The Transparency Pixel
We’re going to pick up where we left off in the article, Elementary Computer Graphics: Basics of Offscreen Buffering. Our final programming example from the last article is shown in Figure 1.
Figure 1. Sprite copied with no transparency pixel.
We copied our sprite directly to the offscreen buffer. The sprite has a funky fuchsia background that covers the cool game background. It looks hokey, right? Well, we can fix this. What we need to do is draw all the pixels of the leaping monster sprite, except for the funky fuchsia pixel. This pixel is our transparency pixel, which means we won’t draw it.
Identifying the Transparency Pixel
The first task is to figure out the pixel values of the funky fuchsia color. Building on the code from the blitting sprites discussion in Elementary Computer Graphics: Basics of Offscreen Buffering, we know the sprite’s location in the Tk image sprite's buffer. The leaping monster sprite is located in the sprite's image buffer at location <rectangle> 265 737 328 800. The Tk image library will allow us to retrieve the pixel using the image photo library tools. It looks like this:
# retrieve the transparency pixel value set transparency_pixel [$sprites get 265 737] puts $transparency_pixel % 198 0 107
The image photo procedure returns a list of three numeric values as shown in Figure 2. These are RGB values, for Red, Green, and Blue, the primary color pigments. The three values represent how bright each value should be for red, green, and blue to create a specific pixel color. This is just like mixing watercolors in art class. Only now we're using a computer to mix the paint for us. We need a red brightness of 198, a green brightness of 0, and a blue brightness of 107. These three Red-Green-Blue (RGB) values define our funky fuchsia transparency pixel. We have completed our first task. We have the RGB values for the transparency pixel.
Figure 2. Fuchsia transparency pixel information.