[UNITY] 2D Graphics Issue

Started by
3 comments, last by Vallazar 9 years, 1 month ago

I've had this problem before with Unity and I thought maybe it was just the sprites I was using, but I'm encountering it again with different sprites. At certain positions extra pixels can be seen on my tiles, in both the Scene and Game view. Sometimes, the extra pixels can be seen in Scene view and not Game view, and vice versa. Sometimes, they don't show up at all.

The only thing I can think is that my sprites weren't correctly sliced up in the sprite editor, but I did it manually and have checked several times. When I zoom in extremely close on the sprite editor, I can see the edge of the particular slice in question and it does have a very slight overlap with the tile next to it, but the editor only allows me to move in single "pixel" increments, so I can't move it out of there.

I'm very new to Unity, and I have a feeling it's something small that I just don't know or understand yet, so any help would be appreciated!

Extra pixels in both:

2bw4ux.png

Extra pixels in Game view:

2l8c2af.png

Extra pixels in Scene view:

33jkego.jpg

No extra pixels:

bf0468.png

Advertisement

This problem stems from the fact that nowadays and with software like Unity3D sprites are not blitted to screen but mapped by textures. The latter technology is not intended to map pixel perfect, so it allows for sub-pixel addressing and image scaling. Further you seem to use a sprite sheet (or, to referring to the underlying technique, a texture atlas) so that just portions of the image are used for sprite mapping. The screen shots show that in some cases the sub-pixel addressing cause neighbored pixels to bleed in.

I don't know whether Unity3D has an option to overcome this problem, something like a checkbox that enables pixel perfect rendering.

An image based approach, however, may be to not let slices in the sprite sheet / texture atlas touch each other! Instead, for non-tiling sprites, use a transparent border of at least one pixel around them; for tiling sprites make a border by repeating the next inner pixels once. In both cases the sprite image selecting frame should be drawn inside the pixel border, of cause.

Thank you for your reply, haegarr.

I don't know if Unity has an option you're speaking of, but perhaps that is the Filter Mode on the texture? When I set it to Point, it changed the images from being blurred from AA to their original depiction in the tile set.

Anyway, I built and ran the game in the Unity Web Player when the sprites were at a position that was causing the issue in both the Scene and Game view, and in the built version of the game, the glitch is not there. Perhaps it is not actually an issue? I'm pretty confused.

I will try separating the tiles with a border, however; I do not quite understand what you mean by using the next inner pixels to create a border for tiling sprites. Why wouldn't I just want to use a transparent border for both tiles and regular sprites? I am very new to game development and don't know a lot about 2D Graphics (or really anything, for that matter), and am only marginally familiar with sprite sheets/texture atlases.


I don't know if Unity has an option you're speaking of, but perhaps that is the Filter Mode on the texture? When I set it to Point, it changed the images from being blurred from AA to their original depiction in the tile set

That is part of what I meant, yes. In fact texture mapping allows for snapping to the nearest texel (that's short for "texture pixel"), or else interpolating linearly between the 4 surrounding texels of an addressed sub-texel position.

However, pixel perfect mapping also requires a 1:1 relation between the texels and the pixels on the screen, so that 1 texel covers exactly 1 pixel. But that cannot be done if the target screen has another size (when measured in pixels) and you nevertheless want to see the playground fit onto the screen. In such a case scaling is necessary, and scaling ever cancels pixel perfect mapping. That may be the reason for the observed issue.


I will try separating the tiles with a border, however; I do not quite understand what you mean by using the next inner pixels to create a border for tiling sprites. Why wouldn't I just want to use a transparent border for both tiles and regular sprites? I am very new to game development and don't know a lot about 2D Graphics (or really anything, for that matter), and am only marginally familiar with sprite sheets/texture atlases.

The problem shows pixels from the outside of the wanted rectangle. If you set the outside (the said border) as transparent, then those transparent pixel will be shown. That will cause gaps in the tiled background. So if you cannot avoid extra pixels to come in, what you want is that those extra pixels attract as low attention as possible. And that is reached when those extra pixels look like those already there.

So if you have selected the sprite image with a rectangular frame and the pixel column left to the left border of the frame is a copy of the pixel column below the left border, and the pixel column to the right is a copy of the pixel column below the right border, and similar for the top row and bottom row, you have repeated the pixels below the frame into the outside. For completeness, you should also set the 4 corners.

Example coming … If the original image slice has pixels like


123
456
789

then after adding the repetition it looks like


11233
11233
44566
77899
77899

Note that the inner rectangle is still the original one.

Non-tiling sprites usually already have a transparent background around them. So the above method would just repeat the transparent pixels, what would be equivalent to drawing a transparent border around the selection frame.


However, pixel perfect mapping also requires a 1:1 relation between the texels and the pixels on the screen, so that 1 texel covers exactly 1 pixel. But that cannot be done if the target screen has another size (when measured in pixels) and you nevertheless want to see the playground fit onto the screen. In such a case scaling is necessary, and scaling ever cancels pixel perfect mapping. That may be the reason for the observed issue.

In the Unity Inspector, I have set the tile sheet to 1 Unity unit per pixel, which should do what you are saying here. When I move the objects in the editor, they move 1 pixel at a time and every pixel is represented, rather than being interpolated, so I do not believe the objects in question are being scaled.

I now understand what you meant previously regarding the border, I will give this a shot. It will take me some time to edit the sprite sheet in that way so I may just try it here and there on a couple of tiles to see if it fixes the problem. In the meantime, I'm just going to keep working on my game. Like I said, the issue has not been present in the actual built version of the game (yet),

Thank you very much for the reply and insight, it has helped greatly. If I have any more questions or end up fixing the problem, I will update this thread.

This topic is closed to new replies.

Advertisement