2D game artifacts - at the edge of the texture

Inspired by the article “Transparent pixels also have feelings or PNG’s artifacts with transparency” , I decided to talk about some more problems that may arise when developing a 2D game.

In this article, I would like to talk about non-trivial problems that I had to face when developing 2D games related to texture filtering.

All these artifacts occur when texture filtering is enabled. As well as scaling, rotating the texture, or if it has fractional coordinates.

A bit about texture filtering.


Textures are superimposed on triangles in the screen space. Typically, the size of a triangular texture fragment is different from the size of a triangular face on the screen. When the texture fragment is smaller than the image of the face on the screen, the texture fragment is enlarged to the size of the face. When the texture is larger than the face on the screen, it shrinks. In both cases distortions arise. Filtration is a technique for reducing these distortions.
Filtering is very useful, but as it turned out, it can cause some problems in applications where it is important that the original image is identical to the original.

Let this image we want to display:


Texture addressing.


Texture addressing modes indicate how the video processor should behave if the texture coordinate of the top of the triangle goes beyond the image. There are four types of addressing: wrap, border color, single overlay, and mirror.

When the WRAP texture addressing mode is set, pixels on one side of the image fall on the other.


Decision:

Use WRAP addressing only if necessary. If you just need to render the texture, use the CLAMP mode.

Textures whose dimensions, width or height, are not a multiple of the power of two.


On some video cards, textures whose dimensions, width or height are not multiple of the power of two, are supplemented. And we get the following image:
Of course, we will not see the extended part of the image on the screen. You can learn about its existence by receiving a texture buffer and discovering that it is larger than expected. But this part will be involved in filtering. As a result of this, we can see part of it at the border of the image.


Decision:

You can fill this area, in whole or in part, with pixels that lie on the border. Like this:



Common decision:


As a general solution , you can leave a frame a few pixels around the area of ​​the texture that will hit the screen.


The blue frame is the area that will be displayed on the screen.

Another solution is to leave a transparent frame at the edges of the image.

But in this case, a problem may arise from the article that is indicated at the beginning. But it is also solvable. For example, you can use the PVRTextureTool program .

Sources:
1. Frank D. Moon. An introduction to 3D game programming with DX9. Wordware Publishing, 2003. ISBN: 1-55622-922-4