I'm making a tile-based platformer. A friend at college is doing all my art, and so far it's beautifully hand-drawn. The problem is, I can't seem to make the edges of the tilesets match up. He measures them meticulously to get sections to match up, but, due to variations in his art medium, tiles that aren't next to each other in his drawing don't match up. For example, he's drawn a basic 9-slice tileset, and the top-to-center, left-top-to-left-center, right-top-to-right-center, etc. all connect perfectly because they're touching each other in his drawing. But when I clip the tiles apart and put them together in other variations or try to put other "change-up" tiles together (any tile that wasn't touching in his drawing), the larger features fit together because of his measurements, but you can see an obvious seam where they join.
I've been using the heal tool in my graphic editor to fix the seams and re-export the tiles with edited edges to fit together correctly, and it works well, but when I heal the edges for one seam, it makes another seam appear.
Note: I don't want a solution to fix the seams at runtime using graphical filter magic or something on the code side. I'm looking for a solution to process the images and export them so that they fit together.
[EDIT:] Here's one of the tiles for reference. It tiles along the bottom of a block of stone.
And here's a 9-slice thumbnail of an early stage of the tileset:
[Edit again:] To be clear, it's not the big-ish things (stone sides, grass, etc.) connecting that's my problem. My artist already measures everything to make it match up. It's the variations in shading and impreciseness of the physical medium that's the problem.
Answer
Here's one method that works well:
(Though I've done a bit of a quick & sloppy job of it here. Original rock texture from this site)
Duplicate your 9-slice and offset it by one tile width (so the seam between the left & center tiles now sits over the seam between the center & right, or vice versa)
Trim this duplicated layer to a narrow strip, making sure it completely covers the seam line. You want to keep as much of the underlying tile visible as you can, to reduce repetition.
Blend this strip into the background tile, either by feathering out its transparency, or painting/cloning behind it so that you keep the copied strip's pixels unchanged in the immediate viciinity of the seam.
Now the immediate neighbourhood of the seam is identical, whether you're laying a left tile beside a center, a center beside a right, or a left beside a right - they all flow together correctly.
- Repeat by copying one of the horizontal seams over the other and blending accordingly.
No comments:
Post a Comment