What to do about edges between tiles?

[hunterloftis]

I'm building a grid of 64x96 sprites, laying them out at x * 64, y * 96, such that they should theoretically be seamless.

However, some artifacts are appearing in the seams between sprites (image attached).

My best plan to resolve that at the moment is laying sprites out at x * (63), y * (95). Does anyone know if there's another, accepted approach to this problem? I'm sure I'm not the first person to run into it.

 

[hunterloftis]

After some experimentation (like shrinking the layout by a few pixels) I think the issue may actually be partially-transparent pixels at the edges of tiles.

[hunterloftis]

That was it - I'm rendering this from a single BaseTexture, which is required by the ParticleContainer. The sprites that tend to have seams are those with textures that border differently-colored textures. I think the textures are being anti-aliased somehow and some of the border pixels from neighboring textures are bleeding in.

I've started framing the textures with a 1-pixel padding; other suggestions welcome.

[ivan.popelyshev]

> I've started framing the textures with a 1-pixel padding; other suggestions welcome.

That's a correct fix. All others are less effective or too many lines of code.

[johncl]

Is this really the suggested fix for this issue? It seems such an obvious problem when tiling sprites. How do you all fix this in the graphics workflow so its more automatic if anything? I am using Aseprite which does have an "extrude" function to do this on individual frames of an animation but its mainly plain tileset sheets that require this extruded padding so it seems the artist would then have to draw the tiles as individual frames which is generally not how they work from what I have seen (except when making seamless patterns). Any hints is welcome.

[ivan.popelyshev]

> It seems such an obvious problem when tiling sprites

welcome to OpenGL. 

Well, there's a solution - special shader that clamps coords according to the frame, but i dont have it for ParticleContainer. To think about it, i dont have it currently for anything, the only easy-available solution is in "@pixi/tilemap". For everything else you have to write shader from scratch , because currently im too busy with other things

[johncl]

Ok, yes I seem to recall struggling with this in Phaser as well. Oh well. I guess I need to create some sort of script that takes a spritesheet PNG and adds those pixels around each tile expanding the image as well as I prefer to work on a full sheet of images instead of individual frames. Although I guess this depends a bit on the next version of Aseprite which should support tilemaps as well. Will be interesting to see how they go about defining which tiles are part of the sets you draw with and if they assume individual tiles selection from a sheet somehow.

EDIT: I just made a conversion script in nodejs that makes this image with padded tiles in their right border colours so it wasnt that hard to add to the workflow.  - Give me a word if anyone needs it too.

Edited April 29, 2021 by johncl