Techniques for Fancy and Lightweight 2D Graphics

So you are going to use lots of 2D graphics on your next game project, targeting lower-end machines. It’s a casual-oriented game project, or maybe just a 2D indie game that should run on the most number of PCs possible (which is a smart move). You need:

  • Beauty
  • Performance
  • Fast download

Hardware-accelerated and software-rendered 2D graphics can be both fancy and lightweight. Even if your hardware-acceleration is an old one, like DirectX 7 or 8. You can make lots of effects (“Beauty”), use few video memory (“Performance”) and consume less disk space on the game final size (“Fast download”).

The three main techniques you use to accomplish that are:

  1. Tilemaps;
  2. Real-time draw deformations;
  3. Particles.

Tilemaps

Tilemaps will allow you to have a large amount of 2D sprites on a single 512×512 or 1024×1024 texture. Perhaps even all the graphics you need for the game! :). You load a small amount of tilemapped textures on your video memory and “mount” game graphics drawing pieces of it in the screen. Check this basic tutorial.

Some tools, like Torque Game Builder, generate tilemaps by slicing a texture on a matrix of equally squared tiles, mainly for frame-by-frame animations. But tilemaps can be more powerful. With a custom tool, you can optimize every single pixel of a texture for a different game assets, not space-wasters equally-sized squares! Consider, for example, what Bookworm Adventures did:

http://www.igda.org/casual/quarterly/2_2/index.php?id=2

With a very small set of textures, hundreds of different monsters could be generated with “pieces” of those textures! The outcome was a very small-sized game download (20 MB), but with lots of aggregated values and a tag price of 29 bucks at the time of its launch.

For Lex Venture, we used tilemaps for user interface and in-game sprites taking advantage of every possible available pixel. Loading times got faster than previous projects that used one texture file for each sprite, and disk space and memory usage got smaller.

Tilemap LexVenture

Real-time draw deformation

On hardware-accelerated 2D drawings, engines render sprites by creating a 2-triangle, 4-vertexes primitive rectangle mesh textured with the sprite image, right into the frame buffer. Think it like a 3D plane right in front of the camera (actually, thats exactly how Blitz Basic do it).

Draw deformation is the ability to modify sprite draw by manipulating this primitive mesh. With a good tool-set, you shall be able to change colors of vertexes, deform, scale and rotate the sprite.

For example: you have a white butterfly sprite. Before rendering you could modify the color of the vertexes of the primitive mesh to green, purple or anything else. You will then be able to draw the butterfly with a different color on the white tones using conventional vertex-color technique. Now draw the same sprite many times and you have lots of colorful butterflies in your game with just one single image file!

Deformations on scale, rotation and overall alpha transparency are quite good for GUI transitions. Almost all casual games today use them, and so should you. Pick tools and engines that allow you the vastest range of real-time draw deformations.

2D Draw Deformation 1Draw Deformation 2

Scale + alpha transition

For software-rendered graphics, draw deformations are more limited. For example, you can’t scale with bilinear filters without making the graphics look badly crispy. So plan ahead what the game will and will not be able to do considering the software-render technology you picked.

Dynamic applied alpha masks

Dynamic applied alpha (transparency) masks is a technique to make 2D graphics even lighter on disk space, extensively used by PopCap Framework. You use web-image formats without alpha – JPG and GIF – for your game graphics. For each image that requires alpha, there is an equivalent gray-scale image with the alpha mask needed. The engine loads the GIF or JPG image, and then modify the texture on the video memory applying an alpha channel based on the gray-scale information.

The sum of those two files is smaller and loads faster on software rendering than an image with the same content on a format with native alpha, like PNG. Works best for GIF images. (Note: you should study the differences between GIF and JPG to pick a format that fits into your game graphic style)

Particles

Particles are a important part of any game, but key ingredient to for casual / light 2D titles. You only need a handful of 16×16 textures to create amazing effects on screen! Don’t you dare not considering the particle system on your decision of the which framework to use!

You need a powerful particle system. It would be better if it could draw 2D particles, where particles will be drawn as regular sprites. Most 3D engines features however only features particles using 3D elements like PointSprite, Billboards and Meshes. They are beautiful, but they are also, well, 3D elements! They will consume more CPU with culling / render ordering calculations, and are not as precise for a 2D-based game.

For casual games, aimed on lower-end machines, I advise you to try engines that supports 2D particles. Specially if you are going to support software rendering. If they ain’t available go with PointSprite particles, which are 3D but optimized for 2D drawing at the DirectX device. Billboard and Mesh particles are heavy on rendering if the user don’t have a good video card.

If you can only choose between Billboard and Mesh, go with Billboard. But maybe you picked the wrong framework/engine!

As the last advice, don’t you get too heavy with particles! Low-end machines suffer if you push too hard. Emitters should not emit more than 20-40 particles at a time. I would say 50 on a very particular case, but try to keep the particle count under control . Remember that each particle is still something to be drawn.

Comments are closed.