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. Commented Mar 25, 2012 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. Commented Mar 25, 2012 at 14:44
• Thanks, especially for this last tutorial, it answered a lot of other questions I had :p Commented Mar 26, 2012 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. Commented Mar 26, 2012 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". Commented Mar 25, 2012 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! Commented Mar 26, 2012 at 4:26
• @OskarDuveborn Nice link, the final image clearly shows how much of a difference it makes! Commented Mar 26, 2012 at 10:22
• While it's true that the grid effect is easily recognizable because of the glaring highlight, the main reason that there is a grid effect is directly because it is a repeating grid! This might sound pedantic, but it is fundamental. When someone makes a repeating grid, there is no way around the fact that a grid is a grid no matter how good an individual tile is painted (ignoring the trivial case of a solid color). The only way around it is to not use a repeating grid, by breaking up the pattern with other tiles and to cover parts of it so it's hard to detect the pattern. Commented Nov 13, 2023 at 23:40

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. Commented Mar 25, 2012 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: