3
\$\begingroup\$

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. enter image description here

And here's a 9-slice thumbnail of an early stage of the tileset:

enter image description here

[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.

\$\endgroup\$
3
  • \$\begingroup\$ Would you be comfortable sharing one 9-slice here, so we can base answers on the style you"re using? \$\endgroup\$
    – DMGregory
    Dec 10, 2015 at 13:47
  • \$\begingroup\$ I've added a tile and a 9-slice thumbnail - sorry it's not clearer; this is my friend's first "real" project other than college assignments and I want to be extra careful about stuff. I think he uses color pens or marker. \$\endgroup\$
    – Caleb P
    Dec 10, 2015 at 15:50
  • \$\begingroup\$ That's the reason why most game artists work fully digital and use hand-drawings only for concept art. \$\endgroup\$
    – Philipp
    Dec 10, 2015 at 16:26

2 Answers 2

5
\$\begingroup\$

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)

Illustration of seam-fixing steps

  1. 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)

  2. 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.

  3. 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.

  4. 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.

enter image description here

  1. Repeat by copying one of the horizontal seams over the other and blending accordingly.
\$\endgroup\$
1
  • 1
    \$\begingroup\$ I finally ended up using a variation of this to solve my problem. I cut the side off one tile, inserted it into each seam, and made each tile join with that. That way each tile was guaranteed to blend with a particular shading level. \$\endgroup\$
    – Caleb P
    Dec 11, 2015 at 20:35
0
\$\begingroup\$

Sorry, I may have this wrong. Am I correct in believing that you want your textures to be seamless. So if you have 2 of them side by side they match up without you being able to clearly see the edge.

Here is a zoomed up image:

enter image description here

Usually you want to create these hand drawn pictures and try to make them seamless. So basically if a line is going from the left, it must end in the same location at the right. Here's an example:

enter image description here

The line begins at the left, it goes swirly, then ends in the same location at the right. This is the same for lines going from the top to bottom and bottom to top. Using that image I can do this:

enter image description here

The lines don't match up exactly but that's just because I've done it very crudely and quickly.

\$\endgroup\$
3
  • \$\begingroup\$ My artist has already done this. The major features (stone lines and such) all match up, it's just subtle differences in shading that don't. I'm trying to figure out how to get the shading to match up. \$\endgroup\$
    – Caleb P
    Dec 10, 2015 at 22:14
  • \$\begingroup\$ You need to be precise in your question. It sounds like your asking how you can make your textures seamless. It should sound like "There are slight shading differences when I try to connect my tiles, how do I fix this?". \$\endgroup\$
    – Hyden
    Dec 11, 2015 at 20:29
  • \$\begingroup\$ I tried to make it clear that he "measures [tiles] ... meticulously to get sections to match up", but sorry if that wasn't enough. I'll edit. \$\endgroup\$
    – Caleb P
    Dec 11, 2015 at 20:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .