Filtering

What is Filtering?

Filtering is a process to reduce the pixellated look of textures when viewed from up close. Without filtering, each pixel represents a rectangular area of a solid color on a Sprite. For example, the following image shows the redball.bmp graphic without filtering. Here is a black and white checkered image. It has been enlarged so that the checkered image is clearly visible: With filtering, each pixel represents a color at just one point. When a texture is displayed on the screen, the color for each pixel on the screen is determined through an interpolation between the nearest pixels. The following image shows the redball.bmp graphic with filtering. Here is another example of how filtering affects a 16X16 black and white checkered image (again, enlarged to show detail): Filtering not only "blurs" the color of each pixel from the source image, but also the transparency. Therefore, rather than having a solid edge, the edge pixels will gradient to transparency. Filtering can be a beneficial technique for reducing visible pixels, but can cause problems as explained in the following section.

Turning Filtering On/Off

For more information on how to enable and disable Filtering in your FlatRedBall project, see: GraphicsOption's Filtering property

Filtering Halo

Although Filtering can greatly improve the appearance of a Sprite, it can also cause problems. Consider the following situation. You are interested in creating a white sphere. You create a .png with the center white and fully opaque and the borders transparent. In your image editing program, everything looks great. However, when you load the white sphere in the SpriteEditor or other FlatRedBall application with filtering turned on, you notice a dark border around your white Sprite. The following image shows some simple colored shapes with a dark filtering halo over a white background. The reason this occurs is because the color of the transparent pixels are "averaged" or interpolated at points which display the Sprite. That is, the edge point on a Sprite may have an RGB value of (255,255,255) - white. Its alpha may also be 255 - fully opaque. Its neighboring pixel may have an alpha of 0 - fully transparent. However, its color value still exists. In the image shown above, the transparent pixels have an RGB value of (0,0,0) - black. Therefore, any point that is "between" the fully transparent and fully opaque pixels will have an averaged color. That is, the point on the screen which is halfway between the opaque and transparent pixel will have an alpha value of around 127 - half transparent; however, its color value will be the average of (0,0,0) and (255, 255, 255) which is around (127, 127, 127) - gray. This is often a problem which arises when games use transparent pixels and filtering. This can be solved manually by coloring the transparent pixels the same color as any opaque pixels. For example, consider the white ball presented previously. To solve the filtering halo, all transparent pixels should be white. After the change, the only difference between the transparent pixels and the white pixels should be the alpha value.

Solving filtering halo with FilteringHaloRemover

Kao Martin provided a wonderful tool for removing filtering halo from files. It can be found here.

Solving filtering halo with The GIMP

An excellent feature of The GIMP is that the eyedropper tool gives you both the color of the current pixel considering alpha and also ignoring trancparency. This allows you to easily see the color of pixels which are transparent and helps identify problems related to halo filtering. To fix the filtering, first, identify the location which is causing problems using the eyedropper. Once you have spotted a point where a fully transparent pixel is touching a fully opaque pixel but their colors do not match, use the eyedropper to select the color of the neighboring opaque pixel. Next, simply paint the transparent pixel the color of the opaque pixel - this will make the transparent pixel opaque. Finally, erase the newly-painted pixel so that it is transparent once again. Notice that if you select the pixel with the eyedropper, the color matches the opaque pixel. One way to do this a little faster is to use the "Fuzzy Select" (also known as the magic wand in Photoshop) to select the transparent area and paint multiple pixels at once without modifying the transparent pixels.