# How can I design good continuous (seamless) tiles?

I have trouble designing tiles so that when assembled, they don't look like tiles, but look like a homogeneous thing. For example, see the image below:

Even though the main part of the grass is only one tile, you don't "see" the grid; you know where it is if you look a bit carefully, but it is not obvious. Whereas when I design tiles, you can only see "oh, jeez, 64 times the same tile," like in this image:

(I took this from another GDSE question, sorry; not be critical of the game, but it proves my point. And actually has better tile design that what I manage, anyway.)

I think the main problem is that I design them so they are independent, there is no junction between two tiles if put closed to each other. I think having the tiles more "continuous" would have a smoother effect, but can't manage to do it, it seems overly complex to me.

I think it is probably simpler than I think once you know how to do it, but couldn't find a tutorial on that specific point. Is there a known method to design continuous / homogeneous tiles? (My terminology might be totally wrong, don't hesitate to correct me.)

• Worth noting: in the screenshot you linked there may be 2 or more grass tiles appearing in a checkerboard pattern. Chrono trigger has a variety of grass tiles. Mar 25 '12 at 11:17
• I'd also suggest doing a quick search for RPG Maker tilesets. They're not top-of-the-line tiles but you can see some examples of transitional tiles. Mar 25 '12 at 14:44
• Thanks, especially for this last tutorial, it answered a lot of other questions I had :p Mar 26 '12 at 4:12
• I just want to point out that CT uses a lot of variety in their ground. It's not just tiled grass. There's dirt, rocks, tall grass, flowers, and shadowed grass. That makes tiling much less obvious. Mar 26 '12 at 14:19

Disclaimer: I'm not an artist so this is just programmer's art knowledge.

You're having the grid effect in your example mostly because of that lighter patch of grass on the bottom edge of the tile:

Details like that that are easily recognizable instantly give it away that you're just repeating the same tile.

Check this article which has a lot of useful tips on the subject. In particular, using Photoshop:

• Use the Patch Tool to get rid of glaring details.
• Use the Doge or Burn tool to get uniform luminosity everywhere.
• Make the edges seamless by offseting the image and then using the Patch Tool to blend the edges together. I've also seen people duplicate and mirror the image four times before for this purpose.

Also in the image you linked there seems to be an implementation problem too because when zooming in on the image you can see some gaps between tiles:

• +1 duplicate and mirror seems to work nicely for me, there are also tools that help with this: here's one of many tutorials - photoshoptextures.com/texture-tutorials/seamless-textures.htm - the keywords are basically "seamless textures". Mar 25 '12 at 17:48
• Ok, I tried (both answer tutorial and comment tutorial) and the results are just A LOT better, and knowing the term "seamless texture" will help in the future, so thanks! Mar 26 '12 at 4:26
• @OskarDuveborn Nice link, the final image clearly shows how much of a difference it makes! Mar 26 '12 at 10:22

I'm no expert, but appart from having more than one type of grass tile (not completely different so people realize, but different enough), one trick could be having "transition tiles" between 2 different types of tiles. Using the example image you showed, having a half-green, half-grey tile between the completely grey and the completely green tile can help smooth out the transition. Also, if you make those transitions rounded and more natural looking (one texture fading into the next one), it can help with the effect.

Notice in the image from Chrono Trigger, on the bottom center, how it has a half brown (dirt), half green (grass), with patches of darker grass. It also uses lighter grass and stones to add natural variation (a transparent tile with the stone or light grass on top of the grass tile, maybe?)

• +1 Transition tiles are critical! A golden rule: Do tile transitions on a need-to-have basis. Have you put snow beside grass yet? No? Then you shouldn't have a set of grass-to-snow transitions. Have you just put lava beside dirt for the first time? Great, time to create a set of transition tiles for that. Mar 25 '12 at 13:21

You have got to make transitions, for every possible composition of multiple types of tiles you will have to draw tiles that complete the shift. You might want to decide that a lot of the combinations ain't possible in your game as the number of transitions you would otherwise have to make would easily grow to a very large number.

Usually this means blending the qualities of the surface types in some manner, a simple grass to dirt transition for instance would typically have small patches of grass growing rarer the further you get into the dirt tile. But for a quick fix you may simply fade out one texture while fading in another, or make a dithering where you randomly pick pixels from one of two textures using weighted chance that shift from favouring one texture to the other.

Also, I'd recommend that you shift from looking at tiles to sub-tile patterns, consider this image of two tiles, if you rather than making full tiles make shapes corresponding to the red figure you will never need more than two different surfaces in the same tile, thus greatly limiting the number of transition tiles that you have to make, you may then proceed to generate square tiles from these diamond tiles for use in the game, or you may simple use the diamond tiles directly, computers ain't very picky about these things any more.

Apply a high-pass filter to your tiles.

See this excellent article by Skaven for detailed theory, examples, and instructions.

Start by making a regular tile. Then divide the tile horizontally and vertically, into 4 equal pieces, leaving you with 4 "tiles".

The tile will now look like this:

1 2
3 4


Put piece 2 on the left side of piece 1. Do the same with 3 and 4. The tile will now look like this:

2 1
4 3


Now move both of the lower pieces up above the top pieces. You're left with this:

4 3
2 1


Assuming your tile is 32x32, each piece will be 16x16. Now you delete the middle, let's say 22x22 pixels(it's up to you), leaving a frame of your tile. This frame will now tile perfectly with itself and you're left to fill in the gap in the middle with uniqueness like gravel, a stone, some higher grass or whatever.

You probably have to jiggle the pixels a little but when you have your frame, you will be able to churn out plenty of unique but perfectly tiling tiles.

The way i design my tiles is like this:

2. copy your tile into an image that is 3X larger in the X an Y directions
3. copy your tile so that there should be 9 copies of your tile in the image
4. you should be able to see where each tile starts and ends, what you need to do is take a blur tool(I use GIMP for this) and blur the edges so it looks like its one big tile.
5. Then copy the middle tile out of the image and then you have your final tile

The result should look pretty good when you put multiple tiles next to each other. You can always repeat this process to fine tune your tiles.

• -1 In step 4, the blurring doesn't apply to both sides (e.g. the blurring on the bottom of the middle tile doesn't match the blurring at the bottom of the top tile) so your results are not seamless. Offset is a much better tool for ensuring seamlessness. Mar 26 '12 at 0:58
• if you do it correctly it will appear seamless, if you do it evenly on all of the seams then it turns out good, if you decrease the pressure on the blur tool you can fine tune the edges so it looks even on all sides.
– John
Mar 26 '12 at 1:02