Atlased sprites flicker when resizing

Question

I don't trust me to describe this well, so here's a video of it.

There are two 'health bars.' They both behave this same way:

When the object's scale is 1.0, 2.0, 4.0, etc, flickering happens. Otherwise, there is no flicker and it looks exactly as expected. The game requires the object to be displayed at a scale of 1.0

The bars change from red to green through a basic localScale.x = p, localScale.x = (1-p) for the green and red sides. I first tried just resetting the mesh vertices, but that had the same behaviour.

Upon closer inspection (you can see this in the video), the texture's pixels skew vertically, both ways - showing the bottom row of pixels from the sprites above and below this one in the atlas (!!), as well as making artifacts along the bright white line of the visible sprite.

The sprites for the bars are 16x16 blocks of a 2048x2048 texture.

As an experiment, I built a coroutine to loop over all sprites and set their localScale to Mathf.Sin(Time.time) (so everything squishes and expands over and over). Every single sprite suffers from this resize-flicker.

Is there a workaround for this that doesn't involve losing pixel perfection? Another way to implement accurate health bars with sprites, perhaps?

I'm contemplating implementing some kind of stupid resize function on sprites which forces them to snap to the nearest screen pixel or something.

Edit:

Here's a picture of the actual mesh construction going on. Can't render the actual sprites in pause mode 'cause my setup doesn't do the right stuff to the mesh: alt text

Answer 1

Best Answer

Answer by ThePunisher · Nov 27, 2012 at 07:45 PM

That almost looks like z-fighting, have you tried seperating the textures out a little more in the Z axis? If you are using an orthographic camera then you won't notice a difference in offset, and the textures will stop z-fighting.

Add comment · Show 10 · Share

ThePunisher · Nov 27, 2012 at 07:47 PM 0

Share

Also, I would make sure there is no rotation being applied on either of the images.

Loius · Nov 27, 2012 at 08:32 PM 0

Share

There actually aren't any textures overlapping - the green and red are separate objects scaled to fit exactly in their spots.

I calculate the UVs in a 'rectangular' way (+/-width, +/- height), but I imagine - if I'm getting into float inaccuaracy land - they could be "rotated" as the object scales. No idea how to compensate for that if that's what's happening.

ThePunisher · Nov 27, 2012 at 09:30 PM 0

Share

Right, I'm talking about the objects on which the textures are on. Sorry I wasn't more specific.

If they are on the same Z position, they will produce the behavior I described.

Loius · Nov 28, 2012 at 06:44 AM 0

Share

Added an image to the question rather than try to figure out how to get one into a comment. ^_^

I'm pretty sure Z-fighting involves pieces of both images fighting for screen space over their entire conflict area (meaning where the bars overlap would flicker between red and green).

ThePunisher · Nov 28, 2012 at 08:34 PM 0

Share

Ah nice, that helps a lot.

Wait, so are you scaling both the red quad and the green quad? Why not have the red quad cover the entire possible area of the bar and scale the green quad shorter/longer, covering the red bar.

From the video it seems the part of the problem is the inconsistent scaling between the green and red quads.

I would also verify that there is ABSOLUTELY NO rotation on either quad. I could see how readjusting the size while the object is rotated from the current perspective can skew the object's look.

Show more comments

Atlased sprites flicker when resizing

1 Reply

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions