Advanced Image Manipulation


In the previous section, we looked at some basic information related to editing an image. This obviously only scratched the surface of what we’ll need to do in order to create graphics for a game.

Sprites

Sprites are small pictures of things that move around—characters, buttons, and items in your games. Sprites can be animated as well. A sprite is a graphic image that can move within a larger image. Notice that the sprite image in Figure 3.37 has a solid border around it, and in Figure 3.38, the solid part is not seen.

click to expand
Figure 3.37 A sprite image. Notice the solid part surrounding the image.

click to expand
Figure 3.38 A sprite image in a game. Notice that the solid part is not displayed. You can see the background.

Sprite animation is done just like cartoon animation. A series of images is played in sequence to make it appear that a character is walking or a logo is spinning, for instance. Examples of sprite frames can be seen in Figures 3.39 and 3.40.

click to expand
Figure 3.39 A series of sprite images for a game animation.

click to expand
Figure 3.40 A series of sprite images for a spinning logo.

Masking

A mask is a special image that is used to “mask” off portions of another image. A mask works like a stencil. Since an image is square or rectangular, the mask allows the edges to be any shape, as the game will render the masked portions invisible (see Figures 3.41, 3.42, and 3.43).

click to expand
Figure 3.41 An image of a ghost.

click to expand
Figure 3.42 The mask for the ghost image.

click to expand
Figure 3.43 The mask and image combined in a scene.

Color Masking

Masking can also be achieved by dedicating a specific color to be rendered as clear or transparent. This color is usually an ugly green or purple that most likely will not be used any other time in the game art.

Palette or Positional Masking

Finally, some games use a specific position on the color palette to determine what color will not render or be clear. Remember, the computer cannot see color, only the numbers. This method for masking has the computer looking at the position on the palette, not the color, to determine transparency. Usually the last color place on the palette is used, so instead of rendering a certain color as transparent, it will render whatever color is in the designated position of the color palette as clear.

Opacity

Images can also be displayed in games as opaque—halfway between solid and clear (like our ghost image). This is done by looking at each pixel in the image and the pixel directly under it and creating a new pixel that is a blended value of the original pixels (see Figures 3.44 and 3.45).

click to expand
Figure 3.44 The masked ghost image with opacity set at 50%.

click to expand
Figure 3.45 A close-up detail of the ghost image.

Anti-Aliasing

Look really closely at the computer-generated images in Figures 3.46, 3.47, and 3.48. See those jagged edges on the letters? Those are actually the pixels we have been talking about. They look really jagged if made from a solid color. But using various shades of that color and gradually blending the edge color with the background color will make the transition smooth and will fool the eye from a distance. Yes, this is similar to opacity.

click to expand
Figure 3.46 This image has no anti-aliasing.

click to expand
Figure 3.47 This image has anti-aliasing.

click to expand
Figure 3.48 Here is a close-up of both of the images’ edges.

This technique is called anti-aliasing. This is also the reason more colors look better in an image, because you can blend more gradually. This is also the reason high resolution (more pixels) makes an image look better—the blending is smoother between pixels.

Graphic Formats

Graphic images are stored in many formats for many reasons. In business, this may be for technical support and product design reasons, competitive reasons, and security reasons. But the main reason is image quality and usefulness. Some image formats are quite large because they retain a lot of image data, whereas some formats allow compression and strip out data for a smaller file size. Still others degrade the image so that it can be really small for uses like Web sites. In Figures 3.49 and 3.50 you see two versions of an image. The degradation is not that bad (see Figure 3.51), considering that the file size of the BMP is almost 20 times the size of the JPG image. The specifics you need to know about graphic formats are discussed further later in this book and in the documentation of any applications you will be working with.

click to expand
Figure 3.49 This 640 x 480 image is in the BMP format. It is 900 KB.

click to expand
Figure 3.50 This 640 x 480 image is a compressed JPEG and is only 40 KB.

click to expand
Figure 3.51 Here is a close-up of the same area of both images.




Awesome 3d Game Development(c) No Programming Required
Awesome 3d Game Development: No Programming Required (Charles River Media Game Development)
ISBN: 1584503254
EAN: 2147483647
Year: 2006
Pages: 168

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net