monogamesubpixel

Sub pixel movement need 1 transparent pixel on the edge to move smooth


When I move a sprite slower that one pixel everything moves sub pixel except the edges here's a Video : https://www.youtube.com/watch?v=zcai1PUfzzA&feature=youtu.be I think it does this because it isn't allowed to scale the image. If I add one transparent pixel to the edge of the image it does look like this : https://www.youtube.com/watch?v=ovCBpBFj3FU&feature=youtu.be Probably because now it dosent need to scale the image, But this way "sucks" because then I have to do - 1 on the positioning to remove the transparent pixel so it looks good + Its a prformance drain since I cannot make the image "power of 2". How would I go about allowing it to scale? (if that is the issue?) I'm using MonoGame to make my games.


Solution

  • Texture border colors were created for precisely this sort of situation.

    The basic idea is that you can replace certain texel fetch operations (those outside the normalized range [0.0,1.0]) with a constant color. Border colors work for texture filtering too, which may implicitly fetch a neighbor texel outside the normalized range.

    Pay special attention to the following diagram:

    enter image description here

    The texture coordinate 1.0 is equally close to the center of its neighbor texel on the right as the texel on the left, but obviously there is no neighbor on the right since 1.0 is the rightmost extreme.

    In this situation, GL's default behavior is to repeat (fetch that non-existant texel from the left side of the image), but you can use a special clamp mode called clamp to border to have it substitute your texture border color instead.

    You can set a texture's border color in GL like so:

    GLfloat border [4] = { 1.0f, 1.0f, 1.0f, 0.0f };
    glTexParameterfv (GL_TEXTURE_2D, GL_TEXTURE_BORDER_COLOR, border);
    

    However, you are not done - texture filtering is necessary to make this work as described.

    If you use a transparent border color and linear texture filtering together you can smooth out sub-pixel movements due to weighted averaging. The texture coordinate at the center of your pixel will vary slightly as the polygon moves, which will affect the weights given to the transparent border and opaque edge texel. As a result the change in opacity will smoothly interpolate visible aliasing away.

    Putting all this together will produce identical results as you showed on YouTube without modifying the actual image.