Tile transitions

Ah. I think I've figured it out myself. I didn't quite catch the part about having 2x4 bits and figuring the sides our first, and then the corners.

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


WWD
GDW
WWG


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

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.

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:

http://allacrost.sourceforge.net/wiki/index.php/Video_Engine_Visual_Effects#Transition_Tiles



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.

http://vimeo.com/1887665?pg=embed&sec=1887665

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.
[attachment=4267:2383919_f520.jpg]

Note in the bottom-right corner here the transitions from lava field to dirt, and then dirt to rough.
[attachment=4269:heroes-of-might---magic-iii--8.jpg]

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)

Hey that looks nice!

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.

Example:


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?

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.

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.

Example:

Um. I'm not sure you did, if that's the system you came up with. The technique HoM&M uses only works because they impose a few limits on terrain generation (that is, enforcing non-transitional terrain to be paintable in 2x2 splats). You can make a set of transitions for water bordering grass... but if you want to generate only 5 transitions for the sand-grass-water combination (plus rotations), you must enforce that rule.

If the terrain you are showing there is an example of the look you are after, then I suggest an entirely different technique: an offset tile grid, sometimes called "vertex-painted terrains".

You've been referencing (as linked in the original post) Artifact's terrain system, which works because they don't have "transitions"; they have their terrain layered, in a strict ordering, with all terrain types simply drawn transparently over whatever terrains underly them. This won't work for your demonstrated art style, so you might consider this article instead: http://playtechs.blogspot.com/2007/04/tileset-design-tip.html

As this article says, without constraints like HoM&M used, a square-painted terrain has to determine what tile to use based on nine tiles; itself and eight neighbours. But with vertex-painted terrain, every tile is determined by just four vertices; its four corners. You can get the exact same results (graphically) using only (# mutually adjoinable terrain types) to the power of four, instead of to the power of nine.

Syranide:
Thanks for the idea. I appreciate it a lot. But if I understand you correctly, you want something like this:



And while that's "fine", I think the endresult is rather generic. - I'm not really that good at graphic work myself, but I have limited access to a friend who is, and while the screenshot I posted isn't "finished" I think it allows a better look. Also, when different transitions are added, then it will look even better.

Wyrframe:
Ah. I see now that I didn't take all your advice. I thought I could manage using only the "transition to transition" advice. - Before that, I had only one transition.

Is it a huge drawback to use the method I'm using now? I mean. the grass, desert and water are almost done. And I plan to make maybe 1-3 terrain types more for my game, so even though I see that the method you linked to is easier, it's not a huge annoyance to make some more png's right now.

Also. I'm not sure if the link you sent solves my problem by having several terrain-types meeting at another terraintype? (Or maybe I just can figure it out?)

I mean. If this image:



generates this map:



Then how would it, with nice transitions, where both grass and desert got a transition-type towards each other and also towards water generate this map?



or this map:




It seems that no matter how I generate my terrain, I'll end up with transitions that probably don't fit?

I hope I'm making myself clear. I'll try rephrasing, to make sure everyone understands.

I know how to make (albeit maybe inefficient) different tiletypes, and how to make transitions between them all. My problem is when 3 different tiles are neigbours, and the 3 different transitions shares borders. How do I make sure that it looks natural?

Sorry if this is newbiesh questions. But I'm learning a lot, and I'm very grateful that both of you take the time to give insightful answers

That's not exactly what I meant, that's just smaller tiles it seems. What I meant was that for some art, it is possible to take your 2nd tile image up there, and divide those tiles into 4 smaller. However, this is not applicable to all types of art, and as you can tell, it limits the transition area to such a smaller tile... anyway, looking more at your art, it's very likely that it's not a good fit (if you are doing the offset grid as suggested by the 2nd tile image above).

Anyway, back to the topic, there's no simple way around it I assume, you have to account for all transitions, or compose a final tile from multiple materials like I mention above... in the case of the "grass,grass,sand,water" combination up there, you could render the "middle tile" as follows:

Water corner > sand vertical transition > all grass (top to bottom)
The sand transition could also be replaced by a corner or some other special variation, depending on your preference.
And it shouldn't be hard to design an algorithm for this (find highest priority material, determine which variation from neighbours, render, clear from list, do again until all 4 tiles have been cleared).

I have never specifically done it like this myself, but right now I don't see why it wouldn't work for you.

Assigning terrain types to tile corners instead of tile centers should help.
With 3 terrain types you have 81different tile types (all but 3 "transition" tiles), greatly reduced if you can take advantage of symmetry.
You can forbid some terrain types to appear in the same tile to reduce work: for example, if you cannot have grass horizontally or vertically adjacent to water, tile types reduce to 35: 16 without any water, 16 without any grass, 4 with grass in a corner, water in the opposite corner and desert in the other two corners, minus 1 for the pure desert counted twice.

Then how would it, with nice transitions, where both grass and desert got a transition-type towards each other and also towards water generate this map?



or this map:




It seems that no matter how I generate my terrain, I'll end up with transitions that probably don't fit?

I hope I'm making myself clear. I'll try rephrasing, to make sure everyone understands.

I know how to make (albeit maybe inefficient) different tiletypes, and how to make transitions between them all. My problem is when 3 different tiles are neigbours, and the 3 different transitions shares borders. How do I make sure that it looks natural?

Sorry if this is newbiesh questions. But I'm learning a lot, and I'm very grateful that both of you take the time to give insightful answers

As far as I see it, both of those contain a (GW/GS) tile, at the bottom-center (remember, your graphical tiles are centered on map vertices), which with MSPaint's spraycan tool and 35 seconds, I created this:


Note the second image, a clone of the first where I've drawn a dividing grid, indicating where the vertex and edges of the map tiles are. This technique works for any projection, or even as a texture on a mesh terrain. Does that make sense, as a demonstration of how to draw that transition?

Edit: filled in the rest of the tiles, including dots to visualize the underlying data. This should provide a good illustration of how it all fits together.

Last edit: added some more desert tiles to show more transition logic. And it's kinda fun drawing such lo-fidelity tiles.




So note: of the 81 possible combinations (3^4), there are 3 tiles which need no extra rotations (all grass, sand, water), 3 tiles which need only one extra rotation (two values, opposite corners, as at row 3 column 2, above), and 19 tiles which need 3 extra rotations, but some of those are flips of others (I'm not doing the math on it; in the second demo, above, you can see that row 1 column 4 is a flip and rotate of R2 C3, which itself is a rotate of R4 C5).

Not bad, for 3 mutually adjoinable values. You can add additional tiles easily, though if you allow them adjacent to all three of these existing terrain types, your 81 tiles explodes to 243. If you want jungle, perhaps you can allow it adjacent to only grass and water, not sand, thus adding only 52 more tiles (that's 81 minus the already-existing grass tile, water tile, and grass/water transition tiles), amongst which you will again have lots of rotates and flips.

Well, I got bored, and decided to demonstrate that the same principle does work for isometric art style, without using an isometric dataset. You could use isometric graphics, but then you have lots of wasted "transparent" pixels. This way, you get isometric art without isometric overdraw. Note that this is how Starcraft 1's maps worked; you draw on an isometric "grid", but the map is actually made up of squares; IIRC, about 8x4 squares per isometric "meta-tile".

Greetings!

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

If you are doing 2D textures some of those transition patterns are simply flipovers/rotations that might allow you to make fewer tile images...