Using delta time produces visual artifacts

[Flesh Gregor]

Sorry if this was brought up before, but does anyone else have this problem? If I change the x and y of a graphic using just a number the image looks fine, but if I multiply by delta time I get a blurring (like bad anti-aliasing) and the cx and cy of subsprites seems to want to change slightly (I'll get a 1px wide sliver of the subsprite to the right, left, top, or bottom, depending on which direction the sprite is moving). This only occurs when multiplying by delta time, and only after I've moved the image, and it happens on other computers as well. I can provide screen shots or a .love file if anyone wants proof.

[bartbes]

Maybe because dt allows you to be at half pixels, so you might want to do a math.floor call somewhere, to see if that cleans it up.

[Flesh Gregor]

Thanks alot, I didn't know about the half pixel thing, but that fixed it.

[rude]

Yeah, that's one way to solve it, but using whole-pixels will make the animation less smooth. Using math.floor is often good enough, but you'll really notice it if you can compare the animation with other smoothly animated objects.

Another alternative is to pad your image with at least 1px transparent space, and expanding color data from the visible part of the image into the invisible part (but keeping alpha at 0). You can do this by:

1. Using a format like .tga to completely control the alpha channel.
2. Using the pngopt.exe tool bundled with HGE. (Windows only, included in the attached .love).
3. NOT using love.image_optimize (which USED to do the same thing as pngopt, but mysteriously broke some time between 0.2.1 and 0.5.0 ).

In the file:

1. Left: unoptimized PNG with no rounding. You should see white slivers along the edges of the circle.
2. Middle: optimized PNG with no rounding. Should be no artifacts.
3. Right: unoptimized PNG with rounding. Should appear less smooth.

If you don't want any filtering ("bad anti-aliasing"), then you have to use math.floor, no scaling, and only 90 deg rotations.

... I should add this to the Wiki.

EDIT: Fixed copy/paste failure.

[Robin]

1. Left: unoptimized PNG with no rounding. You should see white slivers along the edges of the circle.
2. Middle: unoptimized PNG with no rounding. Should be no artifacts.
3. Right: unoptimized PNG with rounding. Should appear less smooth.

Wasn't the middle PNG the optimized one?