Will the next Unity release fix the 2D issues?

Unity Engine
1

*** BE SURE TO READ MY UPDATE BELOW ON HOW I FINALLY SOLVED THESE ISSUES ***

Hoping to hear from a Unity3D rep on the 2D issues.

Is anyone currently working to resolve the issues with 2D?

The issues are:

  1. The Sprite Editor does not always “extract” the sprites from the sprite sheet as it should.
    Occasionally, an extra line of image data is pulled from the sprite sheet and included in the texture the sprite renders on the screen. This has been documented by others on the forums and I have run into the same issue many times.

  2. There is some problem with displaying sprite images on the screen where gaps occur between them.
    This is most often seen in 2D games using tiling systems. Again, this has been documented by others on the forum many times.

I can show an example of both right now in a little 2D platform game I started:

Also, you can try it out in your web browser and see for yourself firsthand:
http://supergar.com/Unity3D/platformcollect/pgdemo.html

The vertical and horizontal dashes should not be there.

The vertical dashes appear to be the “gap” issue. The horizontal dashes are caused by the sprite editor grabbing an extra pixel’s worth of image data from the sprite sheet (or offsetting by 1 pixel).

I have tried numerous methods to resolve the issue including using a pixel snap material, adjusting the pixels to units, using tile images that are slightly larger than the actual tile cells and so forth.

I have spent more time trying to get rid of these glitches than I have on the actual game.

Basically, if I know that Unity is working on these issues and we will get an update in the near future that resolves the issues then I will just ignore the glitches and continue working on the game using the Unity 2D system.

Otherwise, I will need to find another multi-platform game development engine. I like Unity very much. I definitely want to get that fact across. It’s just frustrating to have to spend so much time fighting these little glitches especially when, in some cases, there seems to be no solution on our (the users) end.

Thanks!

2

Well, you could use a different 2D engine in Unity. I’ve used 2D Toolkit for a long time, and it has some perks not found in Unity’s built-in system, like the attach point system and tile editor. The sprite sheet editor also has quite a few more options. The built-in stuff has not impressed me yet :confused:

1 Like
3

I’d like to hear from a Unity rep on the issue but definitely appreciate your reply!

I did some quick research on 2D Toolkit and found posts where users have the same issues:

“I’ve tried a few different setups, and can’t seem to eliminate occasional “tearing” between tiles”
http://2dtoolkit.com/forum/index.php?topic=254.0

“Recently, we’ve been noticing screen tearing on our tilemap”
http://forum.unity3d.com/threads/2d-toolkit-2d-in-unity-made-simple-released.93287/page-46

I did notice replies to both posts indicated there is a padding property that can be set to resolve such issues. Still, it appears the issue lies in Unity itself and the 2D ToolKit is providing a work-around for it.

Have you experienced the “tearing” effect in 2D ToolKit and were you able to overcome it by using the Pad Method?

4

I come from the opposite side with my sprite sheets - the artist feeds me individual images, and we just assemble them with the sprite editor from 2DTK. It then assembles them into sheets, and so far we haven’t actually needed padding. I think we did see it when not sticking to full or no opacity. Those low-alpha transparencies tend to cause artifacts, and I think that’s where Unity messes things up. But our art is simple, pixellated stuff with only full transparency now.

1 Like
5

UPDATE - I FINALLY FIXED THE ISSUES!

I think these artifacts may actually be caused by the SpriteEditor.

After spending more time studying the tiles and looking at the artifacts it became obvious what was happening.

Anyway, here is a screenshot of the game now:

And here is the updated version available to play in the web browser:
http://supergar.com/Unity3D/platformcollect/pgdemo.html

There are still some gaps in the gray rock tiles and in just a bit I will tell you almost certainly why.

First, let me explain what I did.

Here is my sprite sheet for the tiles as seen in the Sprite Editor:

ignore all of the tiles that I X’d out.

The vertical dashes were caused by tiles I marked as # 1 / #2. What was happening is the SpriteEditor had apparently grabbed one pixel of the grassy top gray blocks sitting immediately next to them.

In the Sprite Editor. I manually adjusted the x-starting position of both of these tiles 1 pixel to the left. This worked in this case because the two tiles immediately to their left are just slightly different variations of the same “back wall” tiles.

The horizontal dashes were caused by the SpriteEditor grabbing one pixel row of the yellow and blue tiles sitting immediately below tiles marked #3 and #4. #4 was not really noticeable because the line below it is a darker color, the blue.

But the tile below #3 is a brighter color, yellowish. To solve this issue I simply changed the height of tiles #3 and #4 from 32 to 31. This works in this case because these tiles are only used for the shadows beneath the ledges and the screen is being cleared to black.

Now, as to why there are faint lines (“tearing”) between some of the grassy top gray blocks… if you look at the tile sprite sheet you will see tile #1 and #2 are both dark. I think what is happening in this case, is the SpriteEditor is saving the rock tiles starting with 1 pixel of the background tiles. Either that or it is saving it as only 31 pixels and then the black background-clear color is being drawn.

UPDATE

I tested my theory and I solved the issue. There is now no gap when playing the game.
I went into the SpriteEditor and changed the starting x-offsets for the two tiles immediately to the right of tiles #1 and #2. I moved them both 1 pixel to the right. This completely eliminated the faint lines that were running through the rocky tiles.

It is interesting to note that I had to move some tiles to the left, other tiles to the right and still for other tiles I had to change their height (would have needed to move them up but I couldn’t do that in this case).

At any rate, it appears like the issue is caused by the SpriteEditor itself in how it is actually slicing and storing the tile positions. I suppose it is possible there is something more complex going on. Maybe the fix is for the Unity system to simply implement the padding feature similar to 2DTK.

Anyway, I hope this helps someone. Obviously, in my case I got lucky due to the arrangement of my tiles I was able to simply shift them and reduce the height and fix the issue. If the tiles were arranged differently it would not have been possible.

One thing I am “taking away” from this is from now on I will group all of my tiles together by color / brightness on the sprite sheet so I can shift them around in the SpriteEditor to resolve these glitches.

I also wonder if we simply made each tile a single image maybe that would get rid of the issue completely?
This might be a good test to determine if it is the SpriteEditor causing the issue with the way it is saving the offsets.

6

Yeah, looks like an off by one bug of some sort. They have a bit of a problem with precision.

I’d try the single image option and see how it goes. You just need to give each image a label for grouping into sheets (which fortunately is doable via multiselect now). I don’t know what size sprite sheet it’ll use if you try to label all the art with the same tag, due to the strangely low limit for textures.

(I haven’t owned desktop hardware that’s limited to textures smaller than 8192x8192 pixels in many years, but Unity stubbornly insists on the maximum atlas size being 4096x4096 :P)

1 Like
7

See my post here.

–Eric

1 Like
8

I just tried the solution you proposed and it also does not work for my project.

It definitely made a big difference over the original but still there are vertical lines splitting the rock tiles and it also caused a faint horizontal line to run through the rock tiles in the row that has the two blue treasures.

Definitely much improved but the only way to get rid of the artifacts completely for me was to manually adjust the tiles inside the SpriteEditor. Also, I suspect that loading each tile image separately would solve the issue. However, I don’t want to do that because then I would end up with a lot more draw calls because I am using the free version of Unity and my understanding is the atlas feature does not work in free?

Anyway, here is a screenshot showing what I get using the padding method you outlined in your post:

I just think it is crazy to spend this much time and effort on something like this. Adjust tiles, padding them and so forth. This is exactly the kind of thing that should “just work”.

9

Yes, the fancier atlasing (really just a choice between squares or tight packing) is Pro only. Separate packers work with it, though. But then you’re probably better off just generating the atlases with margins already there.

1 Like
10

@GarBenjamin : It seems like the padding wasn’t really done correctly. I agree that it would be nice if the sprite editor worked better for this, but it’s actually not hard if you plan for it. If you want, you can send me the atlas and I’ll see what I can get here.

–Eric

1 Like
11

Okay. LOL. Well my first attempt was to simply move all of my tiles around on the sheet leaving a 1-pixel gap of transparent space horizontally and vertically between them. That didn’t work. So my second attempt I moved the tiles again to create a 1-pixel gap of transparency around each tile meaning there is a 2-pixel gap between each tile. That worked much better resulting in the screenshot I posted previously.

In the interest of figuring this out both for myself and all of the others who have posted about it… sure I will gladly send the stuff over. I can do that on my lunch break.

12

Did you tried using a tool like Texture Packer ?
Tutorial
Unity Plugin

When i started my game i got the same issue. But when i started using TexturePacker the tiles aligned correctly.
If you check my game (in my signature) all the plataforms are formed by tiles. And i don’t have the problem anymore.

Give it a try with the trial version :slight_smile:

2 Likes
13

Thanks! This sounds like it is exactly how the built-in Sprite Editor should work.

14

I made a new Unity project and imported my tile sheet and map in prep to send to you. Made sure the each tile was marked as non-transparent.

The map displayed fine. No distortions. So I loaded my game project and checked the tiles. They were not marked as non-transparent so I did that. I had forgot to do that when I made the updated tile sheet with gaps. I had spent so much time on this issue trying suggestion after suggestion from changing pixels to points ratio, tile size, pixel snap material, etc I think my brain was a little burnt out.

So… bottom line is it really is the Sprite Editor causing the issue.

The solution is to make sure each image has a transparent border around it.

I am cool with that. As long as we know how to work around the issue we can progress to other things!

THANKS!

15

The question whether bug X will be fixed in version Y will almost never get an answer until we have a verified case submitted with bug reporter.

It doesn’t really matter if someone else has reported something similar or that people talk about it at forums. Bugs are such complicated beasts that we simply can’t reliably do or comment anything until there is a solid case # with solid repro.

16

Hi,

Some tips on how to fix your issues and understand 2d rendering better:

  1. You can confirm that ISSUE 1 is a problem with the SpriteEditor by selecting the generated sprite in the project window and looking at the inspector. It shows the pixels of the sprite. Nothing else is “pulled in” at any other time. Here you will probably see that sprite is indeed correct.

  2. The pixel-bleed effect you’re seeing is caused by bilinear filtering and can be worked around by several methods:
    2.1) Use point filtering. It will make sure the GPU only samples one pixel.
    2.2) Add gaps to your texture. But not transparent ones - bilinear filtering averages 4 pixels therefore it will be averaging the edge of your tile and transparency resulting in the thin gaps you’re seeing. What you should do is duplicate the border pixels instead. TexturePacker has a feature for this called Extrude, see http://www.codeandweb.com/texturepacker/documentation
    2.3) Use the sprite packer in Unity Pro which does the same kind of extrusion for you automatically :slight_smile:

  3. Set wrap mode to Clamp.

  4. Position and scale your sprites to actually be pixel perfect (pixel snap material handles positioning as long as your scale is correct). Position your camera on pixel edges to eliminate jitter.

2 Likes
17

Thank you for the detailed reply. I appreciate it!

I always use point filtering and the clamp mode. I did not realize the images needed to have gaps around them until Eric mentioned it. I just figured if I defined the area in SpriteEditor to extract as a Sprite it would only extract that area and it would work fine. I have always made my tile sheets with the images all right next to each other.

The transparent pixels idea Eric mentioned actually worked to fix the issue in my case but I will definitely keep this in mind going forward. I think I will just knock out a little Windows app that will take my tiles and automatically add the 1 pixel of duplicate edge data around each tile.

Thanks again!

18

If Unity did “extract” those pixels as Sprites, then you wouldn’t have to worry about this. But now you’re essentially giving Unity a Sprite Sheet so it expects that sheet to be prepared for the dark horrors lurking in the GPU :slight_smile:
It was less of a hassle back in the days of true-2d, blitting things, etc.

Also keep in mind that 1 pixel edge won’t be enough if you intend to use mipmaps.

1 Like