How can I implement pre-rendered 2D sprites that can face any direction?

Question

I've been Googling how games like Clash of Clans render their troops, and it appears they are pre-rendering 3D models to 2D sprite sheets before runtime, and rendering those 2d images at runtime. However, troops in Clash of Clans can face any direction.

In my similar game, if I were to create an image for every orientation (0-360 degrees) for every troop type (there are 18 types) at each frame in their animation, they would have to produce a massive amount of images. I can't imagine this is what other developers are doing, so how can I actually accomplish this?

Answer 1

1. Typically there are less than 360 directions. Common case is 8 or 16. Animations are quite short too.

2. Automation is your friend. Write a Blender/3DMax/etc script to load a model from the list, render it in every required frame and direction to an image. Tag images according to content and address them from the game.

3. Pack everything into texture atlases (aka sprite sheets) for faster access.

In the end, you will end up with several throusands of sprites, neatly packed into just dozen of atlases. Not such a big deal ;)

I could not find an image from CoC, but here is Diablo II, which used the same approach to characters animations. E.g. Amazon melee attack:

Answer 2

Also keep in mind the low resolution of these images. There are a couple more things you can do to save space, although I don't know which of these are used by Clash of Clans:

• You can bias the positioning for troops to face standard directions (N,E,S,W,NE,SE,SW,NW) more often than not, then optimize only for standard directions.

• You can do a combined approach, where you pre-render only some directions. During the frame, you can render the troops which don't match an existing image, or use the closest image if you run out of time.

• Use left/right symmetries whenever possible to cut the number of stored frames in half.

• You can prioritize certain animations like walking and resting, storing more directions and frames for these. Then deprioritize other animations, like the swinging of a sword, where you store fewer directions and frames (I suggest keeping more directions for the first and last frame of the swing).

• You can fake the remaining directions by using the closest image then stretching it.

Overall, we might be talking about 18 units, up to 8 directions, maybe 2 seconds of animations at 20 frames per second, an average of 64x64 pixels, and about 2 bytes per pixel. That's 18x2x20x64x64x2 = 50 MB. They might also scale the number of directions, resolution, and number of frames based on the capabilities of the device and number of units used on the map.

Answer 3

In addition to @Kromster answer, note that images are often compressed significantly, and in large "atlas" images where there are many repeating elements (e.g. blank background) the compression is significant. So the final "size" of the images is not just a straight multiplication of individual image size.

Answer 4

For a classic example, I suggest you download the original Doom, which used 2D sprites in a pseudo-3D environment. The sprites had 8 facing directions (relative to the player's viewpoint), and from memory about 8 different sizes as they got closer. This was very visible, but it was acceptable enough for gameplay. In Clash or other isometric-viewing games there's no need to consider distance, of course.