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?

  • 2
    \$\begingroup\$ The technique you're referring to is called "Billboarding", by the way. \$\endgroup\$ – Weckar E. Mar 15 '17 at 12:47
  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:

enter image description here

  • 4
    \$\begingroup\$ The balance of rendering power/time versus storage space and download time. \$\endgroup\$ – M. Mimpen Mar 14 '17 at 10:29
  • 3
    \$\begingroup\$ What is an "atlas"? Any link? \$\endgroup\$ – BЈовић Mar 14 '17 at 12:27
  • 7
    \$\begingroup\$ @BЈовић Look for "Texture Atlas". It's very common concept. \$\endgroup\$ – Kromster Mar 14 '17 at 12:40
  • 2
    \$\begingroup\$ It may be worth noting that in discussions of this technique by developers of Blizzard North, they basically came to the conclusion that it was a weird stop-gap measure to handle an awkward moment in PC graphics capabilities, and even then it didn’t really end up being worth it. There was an interview about it, and in the end it took so much time to re-render everything that the general conclusion was that it was not a great approach (and their next game would definitely be 3D). \$\endgroup\$ – KRyan Mar 15 '17 at 12:11
  • 1
    \$\begingroup\$ @KRyan good addition! I'd guess it was due to VAST amount of NPCs and gear in the D2. For CoC and mobile platforms that's a different balance. \$\endgroup\$ – Kromster Mar 15 '17 at 12:16

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.

  • 2
    \$\begingroup\$ You can also switch from billboards to 3d models if you zoom in close to a certain object - so it's 3d close by and then use the faster 2d when you just have lots running around in the background. Handling the transition smoothly can be tricky though. \$\endgroup\$ – Tim B Mar 15 '17 at 16:16
  • \$\begingroup\$ @TimB Which is especially good because you end up rendering high resolutions and using images for low resolutions. \$\endgroup\$ – Peter Mar 15 '17 at 16:21

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.

  • 5
    \$\begingroup\$ Compression works differently for GPUs than it does for jpegs, especially mobile GPUs in the devices Clash of Clans was written for. en.wikipedia.org/wiki/S3_Texture_Compression In other words: the blank background is 100% irrelevant to texture compression. \$\endgroup\$ – Peter Mar 14 '17 at 12:31

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.

  • \$\begingroup\$ There were no different sizes. The rendering just did naive nearest-neighbor scaling up/down as needed. \$\endgroup\$ – R.. GitHub STOP HELPING ICE Mar 15 '17 at 12:32
  • \$\begingroup\$ @R.. Thanks for the correction. It's been a few years since I played it! :) \$\endgroup\$ – Graham Mar 15 '17 at 13:58
  • 1
    \$\begingroup\$ Sorry, but this does not answers the question "How can I implement .." at all. \$\endgroup\$ – Kromster Mar 15 '17 at 15:58
  • \$\begingroup\$ @Kromster So for a question asking "how do I implement this?", I'm not answering the question with a quick overview of a classic game implemented it (8 angles instead of 360), and mentioning that how they did it is particularly easy to see when you play it, since the OP apparently couldn't tell in Clash? And noting the differences between that general case and the specific case of an isometric view? I'll freely admit it's not nearly as good as your answer, but there's a difference between a lower-quality answer and not answering the question. \$\endgroup\$ – Graham Mar 15 '17 at 16:22

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