Noisy png with Scale

I have a very simple 32x32 black and white sprite, which during a transition, I scale to 25 and back down again. It’s a very simple bit of animation.

But when the scale gets to around 5 I start to notice white noise in the form of white lines around some of the edges of the png, is this normal? Or am I somehow managing to make a broken pngs?

The strange thing is the lines are not to scale of a pixel, they’re too thin.

Any ideas?

Could you show the sprite, or a screenshot of the artifact? It will most likely be something with the alpha channel and the RGB values around that edge of the alpha channel.

I’ve checked and double checked the alpha, but still the same.

Hmm, that doesn’t help much does it!!

This shows the problem.

The texture is wrapping. Part of bilinear filtering is the sampling of neighbouring texels. When the texture clamp mode is set to wrap (the default), the neighbour of a texel on the edge of the texture may be on the opposite side of the texture. If the texture wrap mode is set to clamp, the wrapping does not occur because the UV adjustments to get texel neighbours are clamped to the bounds of the texture.

If you set GraphicsDevice.SamplerStates[0] to SamplerState.LinearClamp before rendering the texture, this artifact should go away.

So, if I understand this correctly, textures are stored in the GD as a kind of large tiled bitmap?

I’ve tried: (VB)

    GraphicsDevice.SamplerStates(0) = SamplerState.LinearClamp

in the draw routine with no difference. Is that the right place for it? Or am I misunderstanding?

DOH! Palm meets forehead.


Thanks for your help Konaju. :o)

It is to do with how texels are addressed. With bilinear filtering, it may read neighbouring texels by adding small offsets to the given UV coordinates. For example, a texel at (1.0, 0.5) might want to read the texel at (1.01, 0.5) to do the filtering. But this is of the texture, so it has to know how to handle it. With wrap mode, it maps it back to the 0-1 space, effectively doing U mod 1. This results in a UV of (0.01, 0.5). With clamp mode, it results in a UV of (1.0, 0.5).

Is that a texture on its own page or part of a sprite sheet?

I get this with sprite sheets on ios no matter what the clamp settings - it’s really annoying and is worse the further a sprite is from the origin of the texture. Only solution I’ve found is to add a blank one pixel border around everything.

I don’t know if that’s expected behaviour or not.

Yes, it is expected behaviour. Clamp only works on the edge of the textures, not a region within a texture. The only way to prevent bleeding across separate regions within a sprite sheet is to have blank padding between them.

I think that shouldn’t happen. Are you sure you did the correct math? Is it more than one pixel (at your sprite sheet) in the worst position? Should be the same at any postion (exept borders of the texture (with clamp))

No interpolation work sometimes at sprite sheets:

My image was a single png in a Windows app, I haven’t got into using sheets yet. I plan to test a lot more with my next game idea, if and when I ever get finished with the first, and I actually have a second idea!