Border appears around transparent images

Good day!
I got strange effect when use map tiles with transparency. It is seems like thin border around it. I uploaded pictures:
First. This tile:
GS_1C (1-я копия)
And result:
bad

Same code, but this tile:
GS_1C
And result:
good
You can see: where new tile is, no ugly lines more.

I decided to make a map with tile overlay and I use tile map 24 x 24.
I need this transparency for unification of tiles by size. I can make code for work with tiles with different sizes, but it worst way in my case.
Thanks for attention!

There are 2 possible reasons for such thin lines. It probably is issue AD 1 for you, but if my explanation doesn’t help – please upload a testcase to reproduce the problem, so that I can tell for sure :slight_smile:

  1. Lack of alpha bleeding on tileset image. See Alpha Bleeding | Manual | Castle Game Engine about what is “alpha bleeding”. Long story short, you want to have some spacing between tileset images (both CGE and Tiled support such spacing) and fill this space with RGBA colors from adjacent pixels.

    Our castle-view-image has a menu option to add alpha bleeding (but you need to make sure there’s already some space between tiles for it).

    As a quick workaround, you can also activate SmoothScalingSafeBorder, but this is not a recommended way – it necessarily shifts some pixels.

    Note that this problem is only possible if you use SmoothScaling=true.

  2. We’ve had another issue that could cause seams to appear at some zoom levels. It is fixed in PR Making TCastleTiledMap support rendering animations. by Freedomax · Pull Request #445 · castle-engine/castle-engine · GitHub that brings a lot of good improvements to Tiled rendering and I hope to merge it really soon (this weekend) :slight_smile:

    So if AD 1 doesn’t help, test the CGE from that PR. (or wait a bit until I apply it).

1 Like

Thanks!
I reed in manual what turning SmoothScaling off is option too, and it worked.
What way is better/faster?

I think I see, with SmoothScaling pixels look better :slight_smile:
But i read in manual what “The algorithm implemented here, for now, is really slow (but also really correct)”.
Is this important for a small 2D picture?

You need to run this procedure once per image and then save it and subsequently load a corrected image. You shouldn’t do this often or even just once every time during loading of the game.

I need redraw minimap every few seconds or one time it the minute, aproximally… So, I finish alghoritms to map drawing soon and test this methods more thoroughly, thanks for explain.
:upside_down_face:

To be clear, you just perform this operation once, before the game runs. It shouldn’t affect the game performance, as you shouldn’t do it during the actual game :slight_smile:

Turning off SmoothScaling indeed also avoids the problem, but then your result looks different. SmoothScaling=false results in pixel-art look.

For now i use .Url to load map tile everytime.
But, because i need to change tiles sometimes, I must download all of they into the program with AlphaBleed option at game start and after that set they as i need, yes?
For example, i can create array of TCastleImageTransform and load tiles with AlphaBleed into it. And after that I will use images from there. Right?

Sorry, I must admit I don’t understand the question 100%. Your normal flow would be:

  1. Create several images with map tileset (like terrain) or map objects (like monsters).
  2. Drag-n-drop them into castle-view-image (or any other tool capable of fixing the issue, I’ve made myself a command-line utility just for this one specific task as I run into this issue for every asset in my game), run “fix alpha bleeding” on them.
  3. Drop them into data folder of your game.
  4. Forget about the problem forever :slight_smile: Unless you need to update your tilesets, just repeat the procedure then.

It turns out that AlphaBleeding is property of the castle-view-image and don’t necessary depend of code, if this property already added for picture?

I believe you already have seen Castle Game Engine: CastleImages: Class TCastleImage — so the idea is that while indeed you can run this on some images when loading them and it will give the desired effect, you don’t have to - it will reduce performance, even if it’s just during the loading process.

What I’ve meant is that you can simply run it once on the image and inside of data folder store “already fixed images”. This way you don’t need to do any additional processing when your game runs. You can do this through castle-view-image tool, or you can do this through any other tool that can “fix alpha bleed”. I’ve made myself a command-line tool alphableeder · master · EugeneLoza / Shifted Image Control · GitLab so I just drag-n-drop all the files to be processed on it, and in a few seconds get the result.