Issue #361 wontfix

Quad: bleeding when drawn on float-positions

Golan2781 avatarGolan2781 created an issue

When using Quads to extract solid images from an image atlas, the resulting quad image can only be properly drawn on integer screen/pixel positions. Using float positions the pixel lines adjacent to the quad image on the atlas bleed in on the edges. Extracting the raw image data to create individual Image types and drawing these does not create the same problem.

Screenshot: left: integer position | right: float position

Comments (6)

  1. josefnpat

    I slime73 is correct. If you are having issues with bleeding on the edges, don't draw on the canvas in floats.

    I have attached an example that illustrates this. (non tearing from TechnoCat:

    in the file, you will see that it's not a problem with quads, but the fact that you are drawing on non-integers. When you draw 0.5 .. 0.9, you will draw into the next pixel, and blending occurs. Where as when you draw 0.1 to 0.4, it will move slightly, but it will not blend with the background.

    The easiest way to fix your issue is to do something like this:


    drawq(img, quad, math.floor(x),math.floor(y))

    But a better way to do it is to make sure that all the movement is moving at the same "speed" (so that the decimal is the same.) Otherwise, if you insist on different speeds, pad the image to avoid this.

  2. Boolsheet
    When using Quads to extract solid images

    Quads work a bit different in OpenGL. You're giving it one texture with the tiles and the coordinates of what it should draw from it. How it interpolates at the edges of these coordinates is (afaik) out of your control. The wrapping setting only applies for the texture edges.

    As suggested by josefnpat, you can draw at integers, but it will still interpolate the neighboring pixels if you scale or rotate. To get rid of it you have to pad the tiles with the border color, like slime73 said.

  3. Log in to comment
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.