top-down Tilemap terrain borders

[stvrbbns]

What is the smart way to do top-down tile terrain borders in Phaser?

You can't see hard-line tile edges if you look at basically any top-down game with tiles (Sid Meier's Colonization, Rimworld, Civilization 2, Heroes of Might & Magic); there are a few pixels between the tiles that get merged which makes the image as a whole look more or less seamless. Using Phaser, it looks to me like manipulating and rendering a large tile-based game map/board should probably make use of Tilemaps. However, the examples all look like the tilemap tiles do not overlap at all. I can see how you could make a complete set of intermediate/edge/border tiles if your tileset only had a couple types of terrain on a single tilemap. Assuming that you rotate tiles when needed then such a tileset requires you needing something like a straight edge, an inner corner, an outer corner, and a pocket (bordered on 1, 2, 3, or 4 sides) for every terrain combination. For 2 terrains, that is only 4 border tiles. For 3 terrains, that is 12 border tiles. For 4 terrains, that is 24 border tiles. ... For 16 terrains, that is 480 border tiles! This is clearly unsustainable. So what is the solution?

Is it possible to use a negative margin and positive spacing in the Tileset?

Do you use a second TilemapLayer with partially transparent border tiles (so you only need some border tiles per terrain instead of per terrain combination)?

Do you manually load images instead of using the Tilemap objects/functionality?

[drhayes]

To achieve that effect in my game I overlap tiles in multiple layers. I have full tiles, like you say, then I also have "border" tiles that are meant to overlap to make it look less like a grid. When the border tiles overlap a different terrain type's full tile, it looks pretty nice. Works especially well on things like grass.