I'm wondering what would be the best technique for rendering terrain à la Age of Empires 2, given a set of tiles (2D sprites). Of course if the terrain is entirely flat, then it simply consists of aligning the tiles next to each other; but in AoE2 you also have pseudo-elevation:
Note that the angled terrain has different lighting applied that gives it a smooth contour. I'm wondering if it'd be simpler to do it in 3D and get lighting for free basically, or do it in 2D and emulate the angles, offsets, lighting etc. And if the latter option is taken, what would be a good approach to adding this lighting/shadow effect to angled terrain.
By the way I'm very much a newbie to graphics programming.
Ah, good old memories. Elevation can be done by shading / lighting up the slopes, and giving an offset to the Y-pixel coordinate of the objects that stand on that tile. Just calculate that offset like you would do with a 3D heightMap. Drawing a couple different tiles for each underground (grass, grass slope facing northWest, grass slope facing southWest, grass slope corner south, ...) gives the best quality probably. Though older games also may simply used another, darker, color pallette when rendering those tiles to save some memory. But on modern hardware, that shouldn't be a factor.
Using 3D can save headaches, although the initial steps to start it are a bit more difficult. Then again, heightMap terrains are relative simple, especially if you work with a fixed window, meaning you cannot rotate or zoom out and thus always have the same amount of tiles in your screen. It means you don't have to worry much about clipping, rendering on large distances, and so on. Anyway. the benefits of 3D:
- You only have to draw 1 texture per materialType (grass, sand, rocks, beach, ...). The lighting will be done dynamically
- With some shaders, you can implement "texture splatting". Draw your terrain and let the shaders smoothly mix the sand, grass, snow, or whatsoever
- Depth sorting may get easier, though if you use blending you still have to sort yourself to prevent artefacts
- With procedural shaders you can add extra detail based on the geometry (high places get snow, slopes get different foliage than flat ones, et cetera)
- You can still keep the isometric Age of Empires view (use an orthogonal camera, on a fixed height above the terrain, view fixed angle)
- You can still draw the buildings, trees and characters still as (animated) sprites, like you would do in a 2D game
BUT.... Making the 3D terrain look as good as a handdraw 2D game isn't so easy. By default, lighting sucks, neither will it generate shadows (but nor does the terrain in AoE). With a bit shader training you can quite easily create similiar lighting than AoE, and with some small extra effort you can even make a day-night cycle, change the weather, or whatever you like. What you could do for the lighting is using a pre-rendered cubeMap / texture. That sounds difficult, but it isn't. Depending on the surface normal (facing upwards, or sloped), you can pick a color from a texture. So normals that face exactly towards the sun would get a bright color. Slopes that face away from the sun would pick a darker "ambient" value. This way you don't have to calculate anything, and you get ambient lighting for "free".
Mountains won't cast shadows then though. Their backsides will be darker, but it does not "warp" a shadow over the terrain or objects behind. But as long as you keep the terrain relative flat, like in AoE, that isn't needed anyway. For the sprites you can use a cheap, dirty, but effective trick.
- First render the terrain
- Render the exact same sprite, but with black pixels
- Render the "shadow"-sprite with multiply blending, meaning it will darken the terrain it overlaps (not the objects!)
- Render the "shadow"-sprite skewed / flattened. Imagine the sprite as a quad, the bottom will be at the "feet" of the object that casts the shadow. The top will be moved downwards and to the left for example. This makes the shadow seems to be projected on the ground.
- Render the normal object sprites on top
Those are not correct shadows, but who will notice?
Dunno what your target platform is, but I would go for the 3D approach, and then just render flat traditional sprites on top.
Thanks for the detailed answer. I'm not too excited about doing it in 3D because of the following issues:
- How to achieve 1:1 pixel mapping with my 2D tiles? Basically I'd have to find the exact size and camera angle, and even then I'm sure I'll run into subtle aliasing issues due to imprecisions.
- I've next to no knowledge of shaders, and the blending of 2 different adjacent terrains looks like a lot of work, compared to doing it with SpriteBatch (I'm using XNA).
My question then becomes, how to implement the lighting of tiles facing towards the sun? Super-imposing a semi-transparent white texture?
In 2D you mean? When looking at AoE, I don't think they did any tricks with extra layers, just drawing different tiles:
- flat one
- ramp north-west (shaded)
- ramp south-east (litten)
- ramp south-east (litten)
- ramp north-east (shaded)
- ramp corner NW, SW, SE, NE
But I could be wrong. Just an idea... there were some mods for AoE, so I suppose there are tools that allow you to open their data-libraries. So you can have a look which textures they exactly made.
These days, it's so much easier to just go with a 3D solution for cases like this. All of those old 2D tricks were created as workarounds for the fact that true 3D was less readily accessible on the older hardware, as shown by the hacky complexity of those tricks.
Stronghold had an map editor built in, I think it was 3D, but all the rest of the game was 2D (pre rendered), it was awsome, I dont have a clue on how it was done thou..
You could control slope height just as in fully 3D terrain editor, (by smooth sloping up and down), but it worked on tile pieces(why? I dont get it)...Its really curious how it worked.
heres a vid that shows what Im talking about:
You can see perfectly that the game was isometric tiled, but I cant imagine it being 2D, I mean, theres perfect sloping there, but if it was 3D, why make it tiled? Its an impressive editor o.o
(That game took many hours of my life, even the editor, I remember doing a map where I could build I giant castle (from scratch, collecting resources) and them after an absurd amount of time a colossal army of enemies would appear, after beating the game I played only that level for so long, trying to get the most efficient castle <3 )
What really bites you in the ass when faking 3D with strictly 2D tiles is permutations. Regarding the Stronghold video posted above: I never played the game, don't know anything about it, but doing something like that with strictly 2D tiles would require a lot of tiny little tiles.
Here are the issues of 2D tiles:
1) Terrain transitions. Going from Grass to Dirt, Dirt to Rocky, Grass to Rocky, Dirt to Sand, Grass to Sand, Rocky to Sand, etc... Requires a lot of little transitional tiles, or a layering scheme of alpha-blended transitional boundaries.
2) Elevation transitions. Going from Level 0 to Level 1, Level 1 to Level 2, Level 0 to Level 2, etc... Requires a lot of tile sets. Many games use different shades of texture coloring to represent the elevation tiers, out of necessity. This helps the user to differentiate between grassy ground that is on Level 0 from grassy ground that is on Level 2. Provides a visual cue to help the player play the game, but it adds even more tile permutations. Because now you have to take into account the elevation slopes, the different elevation colors, and the transitions from (1).
3) Smooth elevation vs. Cliff elevation. Some terrain is smoothly sloped, some is sharp enough to be a cliff, and some terrain is transitional from smooth to cliff. You can see all of it in the Stronghold video posted above. So now, not only do you have to worry about the permutations from the previous categories, but now you have to factor in transitions from all those permutations to Cliff terrain.
Handling this kind of complexity requires either a vast amount of time spent by the artists juggling the permutations, or a set of specially-designed tools that can handle some of the grunt work. Either way, though, it requires a considerable time investment to get right. It becomes a quite bewildering mess when you try to tackle all of it, which is why so many tile-based games simplify things. If Stronghold was done using pure 2D tiles, kudos to them for being one of the more complex 2D tile schemes I've ever seen. However...
All of this is made almost absurdly easy (by comparison) if you only make the change to full 3D. All of these weird permutation problems go away. So many exploding permutations can be reduced to a simple set of primitives, with a bit of judicious blending thrown in. You don't need to make it look 3D, though. You can use an orthographic camera, keep it tile-based, etc... You can make it look just like those old school games. It's just that modern 3D graphics pipelines provide just so many additional tools that they didn't have access to in old school 2D formats, tools that vastly simplify the complexity and make it more like something that a lone wolf developer could easily handle on his own, without spending hours and hours juggling tile permutations.
There is a reason that all of those old popular 2D franchises (Age of Empires, Diablo, Starcraft, etc...) eventually ditched their 2D systems as soon as they could and went full 3D without ever looking back.
