Unity - Fixing Gaps Between Tiles
ฝัง
- เผยแพร่เมื่อ 10 ม.ค. 2025
- Learn how to fix gaps appearing between tiles where no gap should be.
Get the files for this video here: www.dropbox.co...
Don't forget to hit that like button and if you'd like to see more gaming goodness then subscribe for more!
Support the show by pledging at / gamesplusjames
And you can also find me on twitter and facebook!
Twitter - / gamesplusjames
Facebook - / gamesplusjames
Outro music "Theme for Harold var 1" by Kevin McLeod - www.incompetech...
A much easier way is Right click, Create, 2D, Sprite Atlas. Then inside the atlas just load all your tilemap sprite sheets (the image files) into the "Objects for Packing" list. That's it, you are done. Problem solved.
You don't have to add the atlas to your scene or anything. Its mere existence seems to somehow fix this issue. If using pixel art, you should set filter mode to point and compression to none to make your pixel art look even better.
Please upvote if this helped you, so it can reach others. I spent about an hour trying to find this info.
Oh man, this IS the solution! Thank you so much!
FINALLY! Thanks a lot! This is the ONLY solution that helped for me
You are a wizard, thank you very much!
Yup, this is awesome. Nothing to add. Thank you so much!
you're a genius thank you !!!
I found that if you're using a grid and a tilemap you can just change the Cell Gap of your grid to like - 0.01 or something in both the X- and Y-axis. This makes your tiles overlap a tiny amount (depending on the value of course) which does affect your tile transitions slightly but it fixes the bleeding without having to redo your tiles.
Edit:
This is a bit of a 'hacky' method and should only be used if you've tried the other methods mentioned in the comments.
The best solution! Even works with -0.0001 so you really can't see the difference. Thanks a lot.
work!
THANK YOUUUUUUUUUUUUUUUUUUUUUUUUUUU
this doesn't work well if you have transparency in tiles
This entire comment helps more than the video
i got an easier way, if your tiles are 16x16 pixels then just type in pixels per unit 15.9,
for 32x32 = 31.9 ect.
always works 4 me
That also worked for me, thanks a lot :D, I couldn't edit my sprites
@@Mestik78 or you could use unity's pixel perfect camera and turn pixel snapping on
@@_felix128old2 how do I do that?
@@Mestik78 on the camera, go to add component, search pixel perfect and add it.(if you are using URP then it will be pixel perfect [experimental]). then change the pixel per unit to the chosen size and click upscale Render texture
oh my gosh this comment was very helpful thank you!
I'm going to blow your mind now:
- Make a new material
- Set shader to sprites/default
- enable "pixel snap"
- assign that material to the tilemap renderer
And it appear to work even with tightly packed tiles.
I'm not joking or dreaming.
I think.
I've done this and it's working, but I've got one issue. I want my tilemap to be affected by light, so I use the sprite/diffuse shader. Pixel snap just doesn't have the same effect then.
Now there are gaps always between my tiles
OOF
@@sharpedged7830 same here
This actually fixed mine. Thanks!
For me it just made all my tiles have vertical lines... even more apparent now than before
Man when you said "Unity sometimes tries to fill the pixel gap with anything that is right around the tile", it hit me like a truck and I knew what was wrong, since I know this graphics issue very well.
Thanks, simple fix, worked for me.
If anyone is seeing the lines when in Full-screen mode, add the Pixel Perfect camera to your Main Camera (download through package manager) and set your correct PPU and check the Upscale Render Texture
my god man. thanks for saying that I need to attach the pixel perfect camera to my main camera!! a lot of folks said it but for noobies, I can't figure out where it was.
The best way is simply creating a material with shader = sprites/default, and then activating the option pixel snap
This fixed it for me, thanks!
I come across another one of your vids when wanting help. Thank you so much dude, you channel has helped me out in so many ways.
Gosh, searching through all around the internet not solving it. You literally saved my life, thx a lot!
Literally?
Make a sprite atlas. Add all tile sets. Make sure to format the atlas just as you would the tile set sprite.
thank you. you probably saved me 4 hours of google and yt searching for solving this problem
This is great if you're working with individual tiles but most sprite sheets don't have any space between the tiles as to save space so I can't add a 1px border around each tile without taking out 1px of the tile next to / above / below it.
Exactly. For me, this fix here is useless. :(
I selected my image then changed filter mode to "Point (no filter)" and it fixed xD
For everyone confused by the vague comments:
1. Create a new material in your project window (ideally in a new folder for organizational purposes) by right-clicking, selecting create, and then selecting material.
2. Change the shader on the material to Sprites > Default
3. Enable the "Pixel Snap" box.
4. Drag the new material onto your tilemap in inspector. It should replace the default material.
5. Hopefully this worked and solves your problem.
Thank you James for taking the time to explain this common problem and your way of fixing it
Its like Christmas for me, thanx James for solving this issue. You are awesome
I'm going to blow your mind now:
- Create a sprite atlas.
- Add your tile sheet to the sprite atlas.
- Match sprite atlas filter and compression settings with your tile sheet.
This is using Unity's own tools to not only fix gaps but also to optimise tile rendering in your project. It's not a hack and it won't randomly stop working later on, or affect rendering in ways that can cause issues later. This is official!
(There's a small chance you may need to switch it on in settings. The setting you want is "Sprite packer" and the value you want is "always on," but the non-legacy version. docs.unity3d.com/Manual/SpritePackerModes.html )
The sprite atlas is only applied in play mode though, so don't expect the editor view to be fixed. If you really need a fix for editor mode, use the free tile gap fixing tool on the Unity Asset store.
You're tutorials are the best! Tried it out and it worked.
Only solution that's worked for me reliably. You still have to get the camera scaling correct to look smooth, but even if you got those perfect you'd still have occasional alpha bleed through otherwise.
I'm having a similar problem when scaling a tile map drawn on an HTML5 canvas. Upon closer inspection, I found that the gaps are filled with colors from the surrounding tiles in the sprite sheet. The sampling algorithm must be grabbing pixels from outside the source rect in the sprite sheet. I have been trying to figure this one out for a week. I thought it was rounding errors. Thanks so much for bringing this solution to light!
thank you so much ! Looked for fixing this problem for so long now. This is by far the most usefull and easyest method !
what I would do is when you take your tiles into photoshop with the gaps in between - duplicate layer, drag it underneath your first layer and nudge it down one pixel, dupe layer again, drag neath, nudge up, dupe again, drag, nudge right, dupe, drag, nudge.... etc
Photoshop's keyboard shortcuts are really convenient here. The move shortcut key is ctrl; ctrl+arrow key moves by a single pixel, ctrl+shift+arrow key moves by 10 pixels, ctrl+drag moves like the regular move tool. Throw in alt, which duplicates the selection without making a new layer, so with that row/column of pixels selected, ctrl+alt+arrow key will duplicate and move it in a single action. You can let go of ctrl and alt after the first move the arrow keys will keep moving the selection, or you can keep holding ctrl and alt to make more duplicates. (Make sure to deselect when you're done.)
Sadly, this fix isn't going to work for my (isometric) project, so I'm going to have to use the no-antialiasing + pixel snap method.
hey yall there's a thing in unity called a Sprite Atlas that literally does this for you, no need to redo all your sprites
Came back to say this! Createsprite atlas, point to your sprites, it automatically adds the padding and fixes the problem without extra work shown in this video
Very helpful tutorial even in 2022. Cheers!
Yai this is a really common problem! Thank you :)
This man just saved me from wasting a hundred hours of my life
Thanks man. It really worked for me. :)
But working in photoshop was so hard and long part.
Thankssssssssssss again.
although this works, I found that once I matched pixels per unit, camera orthographic size and game resolution, I no longer needed this "fix"
Orthographic size = ((vertical resolution) / (PPU scale * PPU)) 0.5
search "Unity Pixel Perfect Blog" in bing or google for more info.
Do you know how to check what PPU scale the project is set too? Also what do I do with my art? Because its all made in 32x32 its all now super small once I change the size of the cam?
PPU scale is just a value for that calculation. The engine only keeps track of the PPU for each sprite asset and the orthographic camera size and the game resolution. The PPU scale variable should probably be an integer (but i think 0.5, 0.25 would work too) but it sounds like you need a larger value to make your assets look bigger. You can also play around with doubling and halving your ortho size and that should maintain a pixel perfect ratio. It's basically the same thing. The main thing to keep in mind is one pixel of asset needs to related to 1 (or some other integer)
Thanks, changing the scale of my camera to a whole number fixed my problem (I think it's simply a scaling problem with complex scale numbers)
I'm about to submits Major Project, thanks to so much for shoving this.
Just select your sprite asset and set "Filter Mode" to "Point (no filter)" in the import settings. Easy
Thank you so much, this worked for me.
@@b-stri This worked for a while for me, but the gaps appeared again later and persisted into release builds.
This makes it easier. th-cam.com/video/OoS8FN05YNc/w-d-xo.html
James did you know about using the sprite atlas to fix this problem? I'm using the default tilemap editor + 2D tilemap extras, and using a sprite atlas seems to be a much easier way of getting rid of those lines, I just created a 'Sprite Atlas', dropped all my tiles into it, and hit 'pack preview.' This fixed my problems with those lines. Looking at the packed preview the sprite atlas made (it looks like the sprite atlas automatically does what you're doing here. in it I can see the tiles are being stretched out at the edges). just in case you didn't know.
How to fix it: go to you .png file and set the correct Pixels Per Unit (for example a 64x64 sprite, set 64)
Aww man. It works. But it's SO tedious when you've got several tilesheets with 700 tiles each for an RPG. Wish Unity would have some function to do it for me, but can't wait around forever... Thanks for the tip!
I know it's a year ago, but:
th-cam.com/video/OoS8FN05YNc/w-d-xo.html
amazing video, you're an excellent instructor!
Interesting, however I have a tile that is surrounded like the one you have, but it still has a gap. So this fix did not work for me. Is there other ways to fix it?
Does this issue only occur if you use unity's slice feature to split sprites from a single image? What if you import each individual tile as it's own image file and make them each a sprite/tile afterward, would this problem still come up?
Only way to find out is to test it. But I suspect that it would consider all sides as being on the edge of the tilesheet so you'd get transparent gaps.
Nice, turning off Anti-Aliasing worked for me!
Anyone got a better solution? This shouldn't even be an issue, sort of a joke, cmon UNITY!!
Swapped my main camera with Pixel Perfect Camera and it was fixed (Right-click on Hierarchy -> 2D Object -> Pixel Perfect Camera)
What a horrific solution to alter an entire spritesheet because of a bug.
I've created an editor panel for Unity to fix tilesheet .png files using this technique. It saves them in place, and tries to keep the offset and padding values the same (but they have minimum values of 1 and 2 respectively in the output file for obvious reasons.)
You set offset and padding values as per the sprite editor, and it shows examples of the sliced tiles before you save.
It keeps a backup of the original sheet and can generate a new file instead if required. In the best case it just fixes tile sheets and you don't need to do any extra work. In the worst case you're using .gif files (why??) and Unity makes them incompatible with this process. In the medium case you need to re-slice the tiles in the sprite editor, which takes a few seconds.
Would you pay $1/£1 or so for that in the asset store?
i was having this issue but it seems it was the Filer mode just set it to no filter then it should be good.
Awesome tip! I've struggled with that problem many times :)
But in this case, if your to add, idk a grey metal tile next to your dirt, won't you get brown lines? (The stuff around your dirt tiles?)
Awesome video thanks, informative and well explained as always!
Thanks for the vid.
I believe that using the camera plugin: Pixel Perfect Camera solved my issue.
For those who came here after 2020, unity did Package called: 2D Pixel perfect, you can download and solve this,
read more here: docs.unity3d.com/Packages/com.unity.2d.pixel-perfect@1.0/manual/index.html
Thanks! You have helped me in a very big problem :)
I'm using tiled2unity an I have one big map how do I fix the lines in that? when I was using tiled I didn't see the lines until I imported them to unity any way I can fix this?
Turning off anti aliasing fixed it, thanks!
Thank you!!! Love your tutorials!
You are the Best James!
There is an easier way, just put the camera 0.005 up and to the left, this is not even a pixel but i changes where the pixel is read.
Thank you a lot !! I could not solve this problem.
how can I edit the sprite for all of my ground that I already made?
this was so useful ! thank you so much !
Brillo, thanks MrGames
Nice video, really helped, thanks for the good job :)
Thanks you very much You save my project!!
the 3D Platformer series died? great video btw
nope, new episode will be out very soon :)
13 minutes for this fix, really
There's a program originally made for GameMaker that does this manually called Tileset Champion. Hopefully it can still be downloaded from here:
gmc.yoyogames.com/index.php?showtopic=546371
OBRIGADOOOOOOOOOOOOO
translation: THANK YOUUUUUUUUU
I just tweeted to you about this issue. :D
very nice tutorial!
There is a much better solution now. Just make a sprite atlas! I do tutorials too , come look :)
what about using tiled?
it's ri-fucking diculous that you have to do this kind of shit. Unity is seriously garbage sometimes
To think this bug has been there for years and they still haven't fixed this...
if your pixel per unit is 16 ,just set it to 15.9 and you will see some difference, if gap still exist ,set it to 15.5 or less
Great tutorial, thanks.
if im using 16x16 ım just setting pixel per unit 14x14 and setting ofset x:1 y:1. easy and better solution.
if a god exists then that's you
Big help, thank you!
nope, didnt work
Great video!
emm what about 3d tiles?
You just need to create material sprite/default and turn on pixel snap on it. Thank me later)
Quality setting doesn't exist in late 2021 - or at least, not in the way it's presented in this video.
Very cool Thanks!
Just don't use a sprite sheet. Use a special sprite for each tile
easier way found! Go to sprite file and set its Filter mode to Point(no filter)
쳐프랙 this doesn't work to remove lines completely, although it does help in some cases :)
That's a lot of work to do something SOOO IMPORTANT. Thanks for the video but my photoshop skills are pretty sad... But my programming skills are pretty ok. I made a tool to do this with any image with a click:
lsadevelopment.com/Software/Files/UnityTileSetFixer.zip
Keep in mind, there isnt much idiot proofing so don't type dumb values or it may crash.
Nice tip
Plz make a video tutorial for 2d platform game 3 star system level complete
just give -0.0001 on both X and Y of cell gaps = problem solved!
THANK YOU SO MUCH
Thank you so much
Reason for this error: Unity sucks dick.
The fix: 3:00
thank you so much
Thanks a lot.
I SOSOSO LOVE YOU THANK YOU!
Thanks you!!
Obrigado. Funcionou!
Очень полезное видео, благодарю
Thank you so fucking much!!!!!!
You needed 13 minutes to explain a stupid fix? Guess you really needed that 10 minute mark didn't you?
u are the best xd
thank you!! :D