Graphics 101 -- Blit

Graphics 101 Blit

There are different methods one can choose to blit or bit field copy a graphics image, including a pure blit where the image is merely copied pixel by pixel or a transparent copy such as detailed here.

A transparent pixel is referred to by a variety of names , including transparent, color key, skip color, invisible color, and non-displayed pixel. This is a pixel containing no image color data that allows the color of the pixel directly underneath it to be displayed. It is typically set to an unusual color that helps the artists and programmers easily identify it in relation to the rest of the colors.

If you watch the news you see this process every day compliments of the weatherman. He is shot on a green screen, being careful not to wear a color similar to the color key , so the electronics will make him appear in front of an image such as a map and that composite image is transmitted to your television. If he wore the same shade of color as the color key, in the middle of his chest he would appear to have a big hole where you would be able to see through his body.

When using film, moviemakers shoot models or actors on a blue screen, as the color of blue is actually clear on the film negative. Oversimplifying this explanation, the non-clear areas would be converted into a mask and the images would be cut into a composite typically using a matte backdrop.

When using digitized graphics in a computer, movie/game makers shoot actors on a green screen and digitally map the images into a single image using some sort of backdrop.

Your transparency color can be any color. I typically pick a dark shade of blue. For instance, in an RGB range of (0 to 255) {red:0, green:0, blue:108}. This allows me to differentiate between the color of black and transparency and still have the transparent color dark enough so as not to detract from the art. When I am nearly done with the image and almost ready to test it for any stray transparent pixels, I set them to a bright purple {red:255, green:0, blue:255} as that particular color of bright purple is not usually found in my art images and it really stands out. It does not matter what color you use as long as the image does not contain that particular color.

In a 2D graphics application, there is typically a need to composite images and so this leads to how to handle a transparent blit.

A few years ago, I taught a College for Kids program during the summer titled "The Art of Computer/Video Game Design." For that class, I had put together a small program that reinforced the need for computer games to have foreign language support. This particular game was called "Monster Punch." A language would be selected and then various living fruit with their eyes moving around would drop down from the top of the screen and pass through the opening out of view at the bottom of the screen. After all the fruit had fallen , the display would snap to a view of a blender, at which point all the fruit would be blended, while screaming, into monster punch where the blender comes alive ,   la "Monster Punch!" (Okay, maybe I am a little warped , but you should have been able to figure that out by now!)

The following sections use Monster Punch to demonstrate blitting.

Copy Blit

The following sprite imagery is that of a copy blit, where a rectangular image is copied to the destination and overwrites any overlapped pixel.

image from book
Figure 19-3: Monster Punch Copy blit of strawberry image on the right into the blender on the left.

Using efficiently optimized code, up to eight bytes at a time can be copied with 64-bit access, which corresponds to simultaneously writing eight 8-bit pixels, or four 16-bit pixels, or almost three 24-bit pixels, or only two 32-bit pixels. With 128-bit, up to 16 bytes can be accessed, thus 16 8-bit pixels, or eight 16-bit pixels, or slightly over five 24-bit pixels, or only four 32-bit pixels.

Transparent Blit

As the following sprite image portrays, all pixels from the source that match the transparent color are not copied, thus causing the sprite to be seamlessly pasted into the background.

image from book
Figure 19-4: Monster Punch Transparent blit of strawberry image on the right into the blender on the left.

Normally when dealing with transparencies , only one pixel at a time can be tested to detect if it is transparent or not and so wind up introducing inefficiencies such as branch mispredictions, but that is where the sample in the following section comes in handy.

32.64-Bit 80X86 Assembly Language Architecture
32/64-Bit 80x86 Assembly Language Architecture
ISBN: 1598220020
EAN: 2147483647
Year: 2003
Pages: 191

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: