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:

enter image description here

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:

enter image description here (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. – doppelgreener Mar 25 '12 at 11:17
  • 1
    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. – Mike Cluck Mar 25 '12 at 14:44
  • One thing that could help you, aside from the aforementioned answers, would be to use a pixel art editor that allows you to preview your tiles as you're drawing them. I recommend Pickle: pickleeditor.com – jSepia Mar 25 '12 at 16:24
  • 2
    there's another good article about this subject here: gas13.ru/v3/tutorials/sywtbapa_obliterating_grid.php – Tesserex Mar 25 '12 at 18:49
  • 1
    Thanks, especially for this last tutorial, it answered a lot of other questions I had :p – Cristol.GdM Mar 26 '12 at 4:12
up vote 20 down vote accepted

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:

enter image description here

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:

enter image description here

  • 3
    +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". – Oskar Duveborn 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! – Cristol.GdM Mar 26 '12 at 4:26
  • @OskarDuveborn Nice link, the final image clearly shows how much of a difference it makes! – David Gouveia 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?)

  • 5
    +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. – doppelgreener 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.

Sub tile marked in red

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:

  1. Make your draft tile
  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
    -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. – doppelgreener 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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.