Flickering seams when moving camera [Unity2D]

Question

Hello,

I'm trying to create a top down 2D game. Currently I'm stuck on a graphical problem: Some sprites 'borrow' pixels from their immediate left (in the sprite sheet) when moving the camera around, resulting in flickering seams. Below is an example:

alt text

Long Question: In this screenshot, you can see there are 4 'water' tiles that have this yellow 'seam' to the left of them (middle of screen). These lines originate from the vertical line of pixels to the immediate left of the sprite in the sprite sheet (See bottom left for the sprite and the yellow gapes in between sprites in my sprite sheet). The seams/lines flicker for a fraction of a second, happen when moving the camera around and can happen to any tile. In this case the grass tiles are not getting these lines since there are no pixels to the left of them in the sprite sheet.

I hope this issue has some obvious solution that I'm missing, but I couldn't find a proper solution through a google/forum search.

Additional information about sprite sheet/screen: Max Size 4095, Truecolor format, Point filtering, 64 Pixels to Units, happens at all resolutions. I could provide additional information about these seams/lines, but seeing how these lines are depending on their neighboring pixels in the sprite sheet, there's probably an obvious answer to this problem.

Short question: Sprites are using pixels from immediate vicinity in sprite sheet for fraction of a second, only when moving camera around. Possible causes?

EDIT: Since the colors of the seams depend on the vertical pixel line next to the sprite, I'm guessing this might have to do something with compression? I don't know exactly how the sprite renderer works though, so maybe someone with more knowledge about it might be able to answer this question.

Answer 1

Best Answer

Answer by Lovelock · Oct 13, 2014 at 01:57 AM

My guess is that this is caused by fractional lookups in the sprite texture whenever the camera and/or tile positions aren't aligned properly. For example, if your sprite's Pixels to Units is set to 10, you could try and quantize your camera and tile positions to the nearest tenth.

 float nearestTenth = (int)(floatValue/0.1f)*0.1f;

This might eliminate your textures trying to read "half-pixel" values and keep them in line. Good luck.

Add comment · Show 2 · Share

NymThePseudo · Oct 13, 2014 at 02:10 AM 0

Share

Thanks! This did seem to make it work, I don't know why I didn't come up with this myself.

EDIT: This solution is not perfect it seems. When I repositioned my tiles so that my map's left boundary is touching the y axis and the bottom boundary touching the x axis, the lines reappear. However moving all the tiles with a slight offset toward any direction seems to solve it again. It definitely has to do something with things (not) aligning properly, but it can be worked around pretty easily, so I'm happy with this solution (-> Camera position rounding + Tiles offset [+0.01, +0.01]). Not the cleanest, but might avoid unexpected future graphical issues as well.

Lovelock · Oct 13, 2014 at 04:32 AM 0

Share

Glad I could help. I have an idea of why aligning it on the axis still causes the lookup to bleed into the seams. If the camera is at (0,0) and the tiles are aligned to the axes then the very center of the screen would be the intersection of 4 pixels surrounding the origin. That means that the $$anonymous$$or offset of (+0.01, +0.01) will make the rasterizer favor the proper pixels since you are now looking more-or-less at the center of the pixels. If you can calculate the size of half a pixel and offset the camera by that, you'll be dead center on each pixel and avoid seam bleeding. I hope. :) Best of luck! Edit: If you're rounded to tenths, then the offset might be half of that (0.05).

Answer 2

Answer by stuckwiththisname · Nov 30, 2016 at 07:38 AM

I found your question while searching for my old question.

I'm going to post another answer since the question-asker notes in a comment to the accepted answer that the accepted solution didn't really work.

I had a very similar issue and it was also mostly corrected by snapping my camera to my pixel grid. Disabling Anti Aliasing fixed this problem for me.

Edit -> Project Settings -> QualitySettings and Disable "Anti Aliasing".

Details about my problem: http://answers.unity3d.com/questions/600341/seams-in-2d-pixel-art.html

Add comment · Show 1 · Share

MusaabOsman · Feb 05, 2017 at 06:34 PM 0

Share

This worked, thank you.

Answer 3

Answer by MrScottyPieey · Sep 10, 2019 at 09:32 PM

This works but enable texture flickering.

Add comment · Share

Answer 4

Answer by Catonyourhead · Mar 25, 2020 at 04:05 AM

Hey, So make sure your import settings for the sprite are set to point(no filter), otherwise it can cause problems. I had moving tiles and synchronizing their movement using time.deltatime helped.

Add comment · Share

Flickering seams when moving camera [Unity2D]

4 Replies

Your answer

Welcome to Unity Answers

Follow this Question

Related Questions