Tile Map Tearing Problems

Unity Engine
1

Okay, first off I’ve been looking into this issue since the 2D tools surfaced for unity hoping these problems would have been rectified, but here we are. So the problem is this:

1504263--84902--$TileTearing.jpg
1504263--84902--$TileTearing.jpg870×473 98.4 KB

As you can see I have a pretty noticeable line going in between my tiles. Also I have highlighted the Position of the camera, as you can see it is in integers (no floating point trickery here :wink: ). I round the position I send the camera to an int. The tiles themselves are set up as 1 pixel to 1 unit. I have tried this in a multitude of numbers all producing the same effect. It also may be of use to note that my tiles are tiled in integers as well (0,16,32, etc).

Aside from buying something like 2D toolkit, or subtracting the pixels to unit by one thousandth, is there any other way to solve my problem?
Is anyone else encountering this issue no matter what kind of “magic” they use?

2

Hiya,

How are you laying the tiles out, if you are using an index of 0,16,etc try going from 0-15,16-31 etc.

Cheers

Craig

3

Hi,
I’m currently laying out the tiles using the built in unity tools. Each tile is 16x16 with each pixel equal to 1 unit. Thus a difference of 16 units is needed for perfect layout between the tiles. However this is a moot point as I just made this quick mock up to illustrate a point. I’ve been dealing with this problem in various applications, I have even used a 3rd party tool to layout the tiles and I still get the gaps. I’ve had some hints as it being a problem with floating points so I eliminated that from the equation entirely, but still does not give me the desired effect.

I’m looking for the possibility of eliminating this without overlapping the tiles. Any ideas?

Thanks,
Hunter

4

You have your game view in free aspect… if your screen is 320 game units wide with your numbers you would expect 320 pixels… but if its in free aspect and your window is 400 pixels wide (for example) then each “pixel” of your image has to span 1.25 on screen pixels.

Set a fixed resolution in which game units will map perfectly to pixels. If you really want to support any resolution (not just common multiple like 640, 960, etc) then you will need to add a script to change the camera settings to ensure the view always maps directly to a number of pixels (or set up your tiles to bleed).

EDIT: I should add you also need to take in to account camera position. If you translate your camera you will need to make sure you quantise the movement to ensure alignment between pixels and world space.

1 Like
5

I’m using SpriteTile, and this seems to be a common problem no matter what plugin, texture type, or any setting you use.

It just seems to be a problem in Unity, period.

I fixed it in SpriteTile, by using tiles that are actually pixels larger than they’re suppose to be. So while the tiles are 40x40, the texture is 42x42.

The tiles still end up being 40x40, and all that is ever visible is 40x40. Yet whenever these stupid lines occur thanks to Unity’s problematic 2D rendering, the extra pixels compensate and show up as they’re suppose to because the edges are the exact same pixel as the adjacent pixel.

A lot of the 2D problems that people have in Unity is not because of their settings, but because of Unity being a 3D engine with less-than-perfect 2D functionality. The engine just isn’t coded correctly to compensate for a lot of 2D problems with which pixels should be drawn at what coordinates. Not that you can’t fix this in your game in many different ways, but that it is not the fault of the user, it is the fault of the engine.

SpriteTile fixes this for me because even though tiles are the size you want them to be, you’re allowed to have a Tile’s sprite be larger than the tile, but the overlap is correct so the tiles display as they should (only 40x40 pixels ever displayed, as the extra 2x2 is always covered up by the next tile.) I also use trillinear filtering for one of my steps because even though it should be Point, it simply refuses to display correctly for the most part.

IMO, this (and nearly identical issues) is the worst and most problematic quirk in Unity, and if they care for 2D functionality, it should certainly be the first thing they fix in their next 2D-based update. This can even occur in pixel-perfect rendering with integer (rather than float) camera positioning. It’s just silly, and the only reason I do not berate the devs for it is because Unity is a 3D engine, and was never intended to be a 2D one until recently. So they have time, IMO, to justify problems like this taking time to fix.

1 Like
6

Johnny, thank you very much for the reply I see what you’re saying, but doesn’t Unity change the camera viewport based on the window rect? It shouldn’t be changing my pixels aspect ratio, or even attempting to right? Just adds a bit on each side in my experience. I also tend to have this problem no matter what the window size is unfortunately. Now I see you talk about tile bleeding, and that seems to be what I’m going to have to use to keep it as simple as it should be.

Carter, Thank you for replying, I use SpriteTile as well, it is definitely a promising tool! It’s looking more and more like I’ll have to use your same method of tile bleeding. So far all the solutions I’ve come across seem very “hacky” and just don’t feel right to my programmer instincts.

7

This is exactly how I felt, you couldn’t have described it better.
And as a programmer who usually fixes stuff like this myself, I really don’t like all the tearing/bleeding. If it were my engine, I would not allow this to happen, especially if other people were using it. It would probably be the highest priority to fix.

I don’t think I have the problem anymore though. Except with textures which don’t have the overlap, in only some resolutions.

edit: Seems as though one of my problems wasn’t this, but that one of my tiles wasn’t in a POT2 texture. Even though my tiles are 40x40, I import them in as 64x64 images with transparency around them.

You can see that problem here http://forum.unity3d.com/threads/210497-Pixel-perfect-2d-in-4-3?p=1487216#post1487216

8

Hi Hunter,

I have create a basic 2d tile map using prefabs to load the tiles as game objects. I know this may not be the best method for fps but it does work for the items i am doing right now.

All I do is place the tiles at 0.16f apart using the following formula to set the position;
float x = ((xTiles/2)-xTile) * 0.16f;
float y = ((yTiles/2)-yTile) * 0.16f;

What is see is each tile being place at the correct position; however there is a small line with default settings on the sprite;
1506030--85107--$DefaultSprite.png

If I change the Filter Mode on the Sprite to “Point” I get the correct pixel version of the tile.
1506030--85108--$DefaultSprite_withPoint.png

Cheers

Craig

9

Here is the solution

http://forum.unity3d.com/threads/224918-Weird-problem-with-tile-map

10

Hi Craig, thanks for the advice, unfortunately I use point filtering and it still is a problem for me. I will have to extrude my tiles a bit like previously mentioned.

Quarag, I have seen that topic before and I used the “solution” he used and it did not work for me. I mentioned that in my original post. Thank you though.

11

Point filtering solved the problem for me so thanks for the advice (I’m using UniTile and non power of 2 textures btw).

12

Does UniTile work with the sprites in unity 4.3? or is it textured quads?

Thanks.

13

"I changed pixelToUnit value (now 1 unit is equal to 1 pixel). It almost completely eliminated the problem. Additionally I round the camera position to int values (Mathf.RoundToInt) in each frame. "

That is interesting. I’d test that to see what the actual problem is, as that kindof hints at what it might be. Well, along with all the other solutions to the problem which seem to count in the hundreds. But IMO that is Unity’s responsibility not mine.
This problem has been around a long, long, looooooong time. I remember it back in version 1.6 dealing with that one (and only) 2D plugin.

Honestly surprised this is still an extremely common problem. Or a problem at all.

Really, one should be able to simply do the exact math and have it blit correctly. Not sure why it changes the math to blit the pixels oddly, resulting in the spacing inbetween what otherwise is perfect math. Even more perplexing is why Unity has no documentation acknowledging this problem, nor a fix despite how old the problem is.

14

I did try this as one of my last attempts at rectifying this issue, the screenshot you see above is with his solution in place. I guess I should mention when in the scene view I don’t see any type of tearing whatsoever, but as soon as I hit the play button I may or may not get tearing and if I start moving I will almost definitely see tearing right away.

It’s an interesting conundrum that I wish would handle itself as every solution I’ve tried seems counter-intuitive and not the “Unity Way”, For all the amazing things Unity does right this is not one of them, unfortunately.

Interesting little bit: Hearthstone, which seems to be developed in Unity, has this problem in their buttons. They use some sort of 9-slicing on the GUI and I regularly see tears on the buttons when I play.

15

Wow, that is horrible for Hearthstone.

I don’t see how Unity doesn’t see this as one of the major flaws in their engine, and something that should have top priority in fixing.

Nothing kills immersion than obvious lines slicing through all the pretty graphics.
To have this as a problem since the creation of Unity from v1.0 to 4.3, is just horrific. How can they sleep at night? lol, I’m serious.

It is sad that the only thing that seems to work as a definite solution is extrusion. That is the only way I can resolve the issue as well. All other solutions seem to only solve it sometimes, or only in some resolutions, or only some camera angles.

16

Maybe we’ll see a solution to this along with native tile map support and 2D nav mesh generation. lol

Jokes aside, I would like to see a fix to this in this cycle. That would be great.

17

I figure I would organize all of the well known solutions in a single post, for people who need reference.

The Solutions

  1. Extrusion. This seems to be the only solution that will resolve the problem universally. Other solutions seem to be iffy on whether or not they solve the problem or simply help to mend it. To extrude, have your tile be 1 pixel larger than it is suppose to be. So if you have a 40x40 tile, make it 41x41. The extra pixel can simply be identical to the adjacent pixel. TexturePacker has an option to “Extrude”. I’m sure Photoshop can do it easily as well. This actually doesn’t solve the problem of the 1pixel spacing between tiles. What this does, is that when the spacing does occur it is covered up by the extra 1x1 extrusion pixels, filling in the spacing but it will look fully natural.

Other Possible Fixes

2.) Power of Two textures. If your texture is NPOT (Not Power of Two) then Unity will butcher it. For example, even if your tile is 40x40, make sure the actual image you import is 64x64. The tile should remain the same size but have extra transparency around it.

3.) Integer Camera Transform.Position. Instead of allowing the Camera to be moved using floats (1.4, 1.5, 1.6) have it move in whole numbers (1.0, 2.0, 3.0).

4.) PixelToUnit Size of 1, so that 1 Pixel equates to 1 Unit.

5.) Even Numbered Screen Resolution. I have heard people on the forums state that when the resolution ends in an odd number (ex. 555x555), to make sure it ends in even numbers. (ex. 556x556 or 554x554).

6.) Point Filtering. Trillinear Filtering. Sometimes changing the filtering will fix the problem. Often changing it to POINT fixes an issue, but I have had it happen before where I had to change it to Trillinear- even though that makes absolutely no sense.

7.) Don’t Change Resolutions. This is a very bad fix, and not much of one. However, you can probably use one of the fixes above to make sure it works without problem in a specific resolution. Then in another resolution, check to make sure the problem is gone. This is a bad solution because it will require you to change everything based on what resolution is chosen by the user.

Edit: 8) Pixel Snap

9 Likes
18

The issue has been around since…well, probably the beginning.

I would certainly not expect it to ever be fixed, honestly. If they didn’t care about it back then, why would they care about it now? As odd as that is, it doesn’t seem important in any way. Very strange, but Unity has been around for a few years and not a single mention of the problem in updates.
There were plenty of posts about the problem back then just like there is today.

19

The only reason I could see them fixing it now is because they have official 2D support and it is relatively brand-spanking-new. The only reason I see them not fixing it is because they are trying to be the all around good for everything engine. As of right now if I was going to make a 2D tile-based game I wouldn’t use Unity’s 2D offerings as they are still very much in their infancy and still very much “beta”.

20

That is a really good point, it is much like a “beta” as a 2D engine.

I can definitely see them fixing it because you’re right, the 2D functionality is pretty much brand new.
Thank you for the practical optimism.

Let’s hear; Cheers towards them fixing it. We can definitely hope.

1 Like