[solved] drawing with transparency

[Joe Black]

I have no acknowledge in image and transparency.

my result from love

what I want from tiled


I want to draw isometric tile which superimpose each other on a line of one pixel.
In tiled - a tile map editor - it result in the smoothing of the gap between tile
When I draw them with love we can see a line between tile.
it seems to me me that pixels where it is superimposing just have the color of the last tile drawn instead of a "sum" of the color in tiled.

I took 2 screenshot to show the difference. If someone know how to have the good result with love ?
I am also taker for some article explaining te process used by tiled.

Thanks
Joe

[HugoBDesigner]

I don't know if this is the ideal solution, but try making the tiles *slightly* larger (1 or 2 pixels larger) without affecting their positions. This should result in the tiles overlapping each other just a little, but enough to cover the "gaps" without looking huge. I hope I helped

[Joe Black]

thanks Hugo
but the overlapping of tile don't cover the gap



actually the "gap" is made by borderline of the tile.
I think the border of the tile is in .png slightly transparent and so tiled(the editor) when overlapping(because we can see that in isometric mode the border line of tile is always overlapping with others) make the sum with the color below or something like that. Whereas in love.graphics.draw it just draw the color that is in the .png only pixel that are totally transparent are not drawn.

one solution is to recreate tiles in order erase this border line and paint it fully colored and as far as possible don't make tile overlapping.

But if someone know how tiled draw that and could indicate me some article or whatever thanks

[DaedalusYoung]

The problem is indeed the transparency. When you scale the png, LÖVE interpolates all the colour channels, including alpha. So you get a blend of transparency, but the colour of the underlying pixels is black (so some pixel's colour value is 0,0,0,255). The solution lies in your image editor, make all transparent pixels have an underlying colour that is not black. How you do this, depends on what editor you use.

[s-ol]

The problem is indeed the transparency. When you scale the png, LÖVE interpolates all the colour channels, including alpha. So you get a blend of transparency, but the colour of the underlying pixels is black (so some pixel's colour value is 0,0,0,255). The solution lies in your image editor, make all transparent pixels have an underlying colour that is not black. How you do this, depends on what editor you use.

Or floor the image coordinates (at least that works usually... not exactly sure whether this isometric-tiled-stuff is a special case)

[micha]

Flooring the images coordinates is not the issue here.

The problem partly comes from the canvas. If you remove the canvas and draw the tiles to the screen directly, then it works fine. See attachment:

renderProblemSolved.love

(785.48 KiB) Downloaded 159 times

I don't understand, why this is. It is somehow related to the semi-transparent pixels being treated differently in the canvas than in direct drawing. Maybe one of the devs knows more?

Edit: Ok, I might have found an explanation: Maybe the canvas by default is filled with "transparent black", the color that DaedalusYoung talked about. When you draw a semi-transparent pixel to the canvas, then it is mixed with this color and this brings black into the image. Unfortunately you cannot solve this by making the canvas "transparent white", because then you get light artifacts instead of dark ones. Changing the BlendMode does only help, if you draw one single tile to the canvas (in that case the "replace" BlendMode should do)

[Joe Black]

thank you very much, indeed use different blendmode is the solution.
so I use the blendmode "replace" to create my tiles
and reuse "alpha" when drawing the map