Making Your Own Counter Sprite with Blender 3D

Hi. Not long ago I was asked to make a lifebar sprite (a health bar) for a young CS server. Unlike our version, this one had to be a digital lifebar covering 200 health points. Remember the old Worms games, where each worm's state was displayed above its head. On top of that, four sprites were needed, one color per team (red, blue, green and yellow). In total, I counted 804 frames, which would be very long and boring to render by hand. Luckily, we are surrounded by amazing technology. There are many ways to automate this process. I'll share one of them with you in this article.

What you need on board

Blender 3D (official website, Steam) to generate the images for our sprite
Blender Text Counter (official website) to animate the digital text in Blender 3D
Paint.NET (official website) and my plugin to assemble our sprite

Preparing the scene

I'm warning you right away that this article is meant for users with basic knowledge of Blender 3D. If this is the first time you've launched this wonderful editor, or you don't know the simplest things in it, you should "pump up" a bit first.

Launch Blender and enable the Blender Text Counter addon. To do that, go to File->User Preferences (ctrl+alt+u). Click the "Install from File..." button and select the downloaded addon archive (I hope you didn't rush to unpack it). Tick the "Animation: Text Counter" checkbox and click "Save User Settings".

Now delete the unneeded objects from the scene: the cube and the point lamp (if you had them). Move the camera to the center and align it so that it looks straight ahead. It's more convenient for us to look straight ahead rather than off to the side from some arbitrary angle, right?

In the camera properties, switch it to orthographic mode. If we stayed in perspective mode, our counter would look three-dimensional.

Preparing the text

Create a text object and rotate it 90 degrees around the X axis. In its properties, set the horizontal alignment to center. Our camera should face our text. In the same place, enable Text Counter and set the Counter value to 0 (or to 1 if you want to count from one). You can also load your own font in the Font section.

On the timeline, set the start frame to match the start value of Text Counter (mine is 0). Do the same for the last frame.

Now go to the very first frame, hover the cursor over the Counter value in Text Counter and press I. The field should turn yellow. That sets the first keyframe. Move to the last frame, enter the Counter you need and press I as well.

Now when you move between frames, the value of the text will change.

However, the text doesn't change quite correctly. To fix that, go to the Graph Editor.

Select all nodes (A) and press T. In the context menu that appears, choose Linear.

This way the Counter increments steadily, without any unneeded easing. Go back to 3D View and check how smoothly and cleanly the animation works.

Select the text and create a material for it. Choose the color you want and tick Shadeless so that lighting doesn't affect our text.

I was happy with this look of the counter, so I'll skip the finer material setup, including Cycles mode with its own nodes - the article is a bit about something else)

Preparing the render

In the Render properties, set a transparent background and a resolution of 128x64 (or another convenient one). In the Input section, specify the directory where the frame images will be saved.

By pressing Num 0, you'll see the scene from the active camera's point of view. It immediately seemed to me that the text was very small, so I decreased Orthographic Scale right away. I also raised the camera a little (you could raise the text itself) so that the text sits exactly in the center.

Check that we'll be producing images in PNG format and not something else. Finally, click Animation and watch our images being generated.

Preparing the sprite

Launch Paint.NET and install the plugin for working with sprites. Set the canvas resolution you need. In the file explorer, select all the generated images and drag them into the graphics editor window. Agree to adding new layers. Make sure the layer order matches their names. Delete the default white background if you still have it.

Save the sprite.

Done)

Conclusion

The sprite is ready and you can already add it to your plugin. I don't deny that there are faster ways. Also, the article itself doesn't pretend to be a good tutorial. Still, I hope you got the gist of this technique, since it can be applied to more than just a lifebar. If something doesn't work out, or you have questions, don't hesitate to leave your comments. I'll be glad to answer everyone.