Jump to content
  • Advertisement
Sign in to follow this  

Tile transitions

This topic is 2469 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts


I'm currently trying to add transitions to my different tiletypes. But I'm having a bit of trouble figuring out how.

I've read this article on terrain transitions, but even though I understand the theory behind it, I can't quite figure out the smartest way to do it.

The method in the article creates 32 images, with which you can make the 256 possible terrain transitions.


So far so good. I can easily understand it, and in theory I know perfectly well what to do. But how do I calculate how and when I need 2 of the transitions shown at the same time.
For example if I needed a transition like this:


I'm sure/hope it's just something I haven't thought about, and probably an easy question to answer :)

Share this post

Link to post
Share on other sites
Okay, I guess I still have some trouble. I implemented the algorithm from above, and it works perfectly well when there's only 2 types of tiles, eg. grass and water. But as soon as there's another tiletype, eg. desert, then it doesn't really look pretty.

How do other people make their tile-transitions pretty? Let's take an example


Where grass is G, Desert is D and Water is (you guessed it) W.

With a generic coast line always on top I can somewhat make it look non-ugly. But I doubt that's how everyone else does it.

I can't seem to figure out how for example CivWorld does it. Except it looks like grass is painted above plains. It seems like both plains and grass got their own set of coastline-art.


I've tried googling a lot for other articles on tile transitions, but I can't seem to find anything else than the article I mentioned in the original post :(

Share this post

Link to post
Share on other sites
Another post from myself. ;)

I've looked at screenshots from other games, and it looks like the most easily implemented tile-transition is just to have one generic transition for each tile-type, for example here:


which, as far as I can see, has a basic coast-transition no mater if the bordering tile is grass, desert or plains. - I guess that will be the way I go, at least in the start. But I'm still curious of other (prettier) ways to do it, so if anyone got any links or hints or anything at all, I'd be very grateful.

Share this post

Link to post
Share on other sites
I can think of three ways to do nice tile transitions off the top of my head.

#1. Create transition tiles by hand
An artist creates transition tiles from one type of terrain to another. You may also have an editor which recognizes the transitions and automatically lays them down when it sees two different terrain types blending in to one another.

#2. Exploit tile layers to provide transitions
This solution still requires "edge" tiles to be made for terrain types, but you don't have to make a transition tile for each type of terrain. Basically you can choose one type of terrain as your underlying "ground" and then have another layer of tiles drawn on top of the ground layer. So you could have one layer that is dirt, and then draw grass on top of it in certain areas, for example.

#3. Use blend masks in your code to create tile transitions
This solution requires the least amount of artwork, but may not look as nice. Basically you could have your graphics engine support creating a transition tile by taking a standard terrain tile and applying a blend mask to it. You can read more about this and see an example of the result here:


For my game, we tend to use solution #1 most of the time because it grants the greatest degree of flexibility and generally looks the best. We employ solution #2 a fair amount as well and it works out great, because it can still look very nice without requiring more artwork. Solution #3, although our graphics engine supports it, I don't believe we've ever used. The reason being because it doesn't look as nice and its complicated to utilize that in a map file, as you basically would have to construct a custom image by adding the tile + blend mask together and writing custom code for the map to get that to work. It would be a huge PITA and is a lot more work than what it is worth IMO.

Our map editor does support custom tile transitions as I mentioned in solution #1 and it is quite nice. It doesn't always get them right, but its easy enough to fix manually if the transition tiles are placed a little wonky. Below is an old video of our editor in action, but I don't think our editor supported this feature when that video was made three years ago.


Share this post

Link to post
Share on other sites
OverWind; you should look at how Heroes of Might & Magic does it. What with having 12 different terrain types, they have to get away with a lot of flexibility.

So what they did was, each terrain type only had one or two other terrain types they could transition to, but where two "incompatible" terrains are adjacent, they both use a transition tile to a common compatible terrain. Notably, only sand can be adjacent to water, and always fills its entire tile; it has no edge transitions to other terrains. Instead, water has edge transitions to sand. Wherever a terrain is painted adjacent to water, it uses its to-sand transition, and the adjacent water uses the to-sand transition.

To reduce the number of tiles they have to make, with any terrain other than sand or dirt (the two "common" transition terrains, which have no in-tile transitions themselves), you cannot have a 1-tile-wide line or single-tile peninsula; the terrain has to be drawable using overlapping 2x2 splats. This way, there's no U-shaped transitions, or opposed corners; only full fills, flat edges, inside corners, and outside corners. This means only 12 transition tiles for one common terrain, or 12+12+8 for two compatible common terrains (12 each, plus straight-edge transitions where both common transition terrains are adjacent)

Note here the grass transitioning to sand, and the water transitioning to sand. There's no full tiles of sand here.

Note in the bottom-right corner here the transitions from lava field to dirt, and then dirt to rough.

Share this post

Link to post
Share on other sites
Wyrframe: That's brilliant. Thanks alot. I hadn't thought about that at all. Very simple trick, but oh so helpful! :)

By the way. I finished making the coast-to-sand transitions, and made them draw nicely.

(Never mind the graphics, it's more or less just placeholder graphics until I decide to improve it)


Share this post

Link to post
Share on other sites
Hello again everyone.
I'm not sure if I should post a new thread for this, but I guess it more or less belongs here. So I hope anyone will read it :)

I followed wyrframe's advice, and I've more or less finished the transition from water to desert. This looks nice. I've also begun the grass to desert transition.


Now, the problem is this. I'd like to make a water<->grass transition too. Because it looks kinda egyptian desert-ish even when I don't have sandtiles, when all "grass<->water" becomes "grass<->desert<->water" (I hope I'm making myself clear).

Now, I can easily program this, but I'm somewhat confused. Here's an image more. I've made one alteration to it, and put another tile of grass where there were desert before.


How would I make the transition to that, when there's 2 desert tiles as neigbours?

Here's another image, I hope that makes my question clearer.


My question is: Do I have to make tile-transition-transitions? That would seem like a lot of extra work. Or am I missing some obvious technique? :)

Share this post

Link to post
Share on other sites
I'm not hugely familiar with 2D terrain-rendering, but anyway:

I would probably suggest that you work with compositing instead of drawing each unique transition, although this may or may not be as useful depending on the number of transitions you intend to do. Anyway, the idea being that you now have 3 materials, water, sand, grass... which you draw transparent and instead render in a specific order (e.g. water > grass > sand).

Also, instead of considering the tiles as a single big tile, it would probably be beneficial for you to subdivide them into 4 smaller tiles... so now you only need to draw the equivalent of 5 large tiles for each material. Fully covered (2x2), surrounded corners (4 * 1x1), surrounding corners (4 * 1x1), vertical transitions (2 * 2x1), horizontal transitions (2 * 2x1). However, the biggest drawback with this is that without special rendering, a transition can at most be half a tile in width (usually not a problem)... however, you will of course need to draw more if you don't composite materials.

These may or may not be applicable to what you do, but from what I can tell, they would work well.

Share this post

Link to post
Share on other sites
Sign in to follow this  

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!