Texture Bleeding

Questions
1

I know that there are plenty topics in the www but I am just to silly to understand it + my not that great english makes it not easier for me.

My textures are bleeding and I basically know how to fix it, but not how exactly.

I have tiles with a size of 96x96.

  1. I will create a 1px thick border around every tile ?
    -So 1 row will look like this: 1px border, 96px tile, 2px border, 96px tile and so on? (horizontaly and verticaly)
  2. Does the border have to match the sorrounded tile in color?
  3. Is 96 a bad size (not power of 2 ?)
  4. how do I set the sheet up in Tiled ? - what to use as margin and spacing ?

Thanks guys…

(feeling really silly atm)

2
  1. Yes, that’ll suffice unless you’re scaling down a lot and using MIP mapping.
  2. Yes, that’s the whole point of the border. It has to match the colors of the pixels at the edge so that you don’t see your edge pixels blend to another color. Because it’s tedious and error-prone to set up such a border, it is something that you should automate by code, or look for a tool that can already do this for you.
  3. No. Only the size of the whole tileset image matters, depending on the hardware.
  4. Based on what you described at 2, you’d specify a 1px margin (the space at the tileset border) and 2px spacing (the space between the tiles).

Finally, note that when you’re not actually scaling your map, you can also avoid the whole problem by making sure to render it aligned to pixels.

1 Like
3

Oh I am sorry, I used the wrong picture, because I created a new folder.

  1. Basically this fixed issue 1.
    (I can see that whenever there was the background shining through, there is the border pixel as you said)
    This leaves nme with a very small issue that sometimes the lines around my tiles are looking 1px bigger (but thats hard to tell on smaller devices)

  2. My performance issue was not fixed. It is kind of choppy, but maybe thats a ghosting effect of the screen

I really appreciate your work. Keep it going man.

4

But, in your sheet image, the borders are transparent. Did you forget about step 2?

1 Like
5

Yes sry I edited my previous answer while you very answering too…

1 last question… If im running my app now on Android, sometimes a 1px black line is shown like this, sometimes it looks like the 1px thick line is 2px - it is the conversion from from 1px to 1 screen px…

Thank you for your help !

6

I thought transparent could work?

7

It won’t, because as was visible in screenshots @captainflyaway posted before (but then deleted in an edit), you will have blending going on to transparent pixels, causing the background of your tile grid to show through.