Pre-rendered sprites

A pre-rendered sprite is a 2D image made by rendering a 3D model ahead of time. The game draws the picture, not the model.

A spider walking, rendered by Pixor
A chest opening, rendered by Pixor
A spinning crown, rendered by Pixor

What it is

A sprite is a 2D image the game draws on screen. Usually an artist draws it. A pre-rendered sprite is instead produced by rendering a 3D model from a fixed camera, one frame at a time, before the game is ever played. The game only ships the images.

For a character, that means rendering every animation from every direction the game needs, and packing the frames into a sprite sheet.

A little history

Donkey Kong Country (1994) is the famous early example: Rare rendered its models on Silicon Graphics workstations and reduced them to Super Nintendo sprites. In the late nineties, PC games such as Diablo, Fallout, StarCraft and Age of Empires used pre-rendered units and characters, which made many directions practical. Dead Cells (2018) brought the idea to pixel art, animating characters in 3D and rendering them as small pixel-art frames.

Why games use them

  • Directions. A model can be turned to any angle. Eight directions cost no more drawing than one.
  • Consistency. Proportions and volumes stay the same across hundreds of frames.
  • Iteration. Change a colour or a size and re-render, instead of repainting.
  • Animation reuse. One walk cycle can be applied to many characters with the same rig.

Common problems

A plain render does not look like pixel art. The usual problems are:

  • soft, blurry edges from anti-aliasing,
  • hundreds of similar colours instead of clear ramps,
  • smooth gradients instead of flat light bands,
  • stray single pixels and noisy detail,
  • flicker, where pixels and lines change every frame though the model barely moves,
  • a pivot that shifts between frames, so the sprite jitters in game,
  • sprites at different scales, so pixels do not match (mixels).

Doing it by hand

With a general 3D package the usual steps are: set up an orthographic camera per direction; render small without anti-aliasing; reduce to a palette; draw or fix outlines; remove stray pixels frame by frame; and pack the sheet. The last few steps are where most of the time goes, and where most of the look is decided.

How Pixor does it

Pixor is built for this job. It reads glTF and GLB, FBX (including Mixamo), OBJ and MagicaVoxel files. Every side is a camera, in rings of 4, 8 or 16 or at any angle. It renders a G-buffer of colour, normals, depth and part id, then shades in light bands held steady against flicker, maps them to hue-shifted ramps, draws one-pixel selective outlines, and cleans up stray pixels and one-frame lines. One pixels-per-metre scale and a pivot locked to one pixel keep every sprite consistent. It exports sheets, Aseprite files, Godot SpriteFrames, GIF and APNG.

The result is a clean, consistent base. Most artists still finish important frames by hand.

Questions

Which games used pre-rendered sprites?

Donkey Kong Country (1994), Diablo (1996), Fallout, StarCraft and Age of Empires are well-known examples. Dead Cells (2018) rendered 3D animation as pixel-art frames.

Are pre-rendered sprites cheating?

No. It is a production method, like drawing over photo reference. Many artists render a base and finish key frames by hand.

Read next

Try it on your own model, free in your browser, or get the full version.

Try in browser Get Pixor