MOSSBACK STUDIO

How to turn a Blockbench model into a sprite sheet

Model and animate once in 3D, then use it as sprites in a 2D game: one row per direction, one column per frame.

Open Turnsprite (free, in the browser) A Blockbench boar model rendered from eight directions as sprites

Drawing a walk cycle for four or eight directions is a lot of frames, and every change to the character means drawing them again. With a 3D model you animate it once and render the frames. Blockbench can export screenshots and GIFs, but not a sheet with all directions on one grid, so I made a small tool for it: Turnsprite. It runs in the browser and the model never leaves your computer.

1. Get the model ready in Blockbench

2. Open it in Turnsprite

Go to mossbackstudio.com/tools/turnsprite, press Open model or drop the .bbmodel on the page. The sheet is drawn right away with the first animation. If you have no model at hand, Sample loads a boar with five animations.

Turnsprite with a model loaded: options on the left, the sprite sheet on the right

The picture shows the full version with 8 directions and all animations ticked. The free page looks the same with fewer options.

3. Pick the settings

The same sprite with pixel edges, smooth edges, an outline and a colour limit

Then press Sheet PNG. The status line tells you the sheet size and the number of frames. You need the number of columns for the next step: sheet width divided by cell width.

4. Load the sheet in your engine

Phaser 3

// in preload: 64 is the cell size you set
this.load.spritesheet('boar', 'bramble_boar_sheet.png', { frameWidth: 64, frameHeight: 64 });

// in create: one animation per row
const cols = 36;                       // sheet width / cell width
['S', 'W', 'N', 'E'].forEach((dir, row) => {
  this.anims.create({
    key: 'idle_' + dir,
    frames: this.anims.generateFrameNumbers('boar', { start: row * cols, end: row * cols + cols - 1 }),
    frameRate: 12,                     // the frames per second you set
    repeat: -1
  });
});
this.add.sprite(200, 200, 'boar').play('idle_S');

Godot 4

Add an AnimatedSprite2D, create a new SpriteFrames resource and open it. Press the grid icon, Add frames from sprite sheet, pick the PNG and set Horizontal and Vertical to the number of columns and rows. Select the frames of one row, add them, and repeat for each direction as its own animation. For pixel sprites set the texture filter of the node to Nearest.

Unity

Select the PNG, set Sprite Mode to Multiple, Filter Mode to Point and Compression to None for pixel sprites. Open the Sprite Editor, Slice > Grid By Cell Size with your cell size. Then drag the frames of one row into the scene to make an animation clip.

Anything else

The sheet is a plain grid: frame column of direction row sits at x = column * cell width, y = row * cell height.

What gets read from the model

Cubes with per-face UV and box UV, meshes, bones, any number of textures, and bone animations with linear, step, smooth and bezier keyframes, Molang maths included. I checked the poses and the texture mapping against Blockbench 5.2 itself. Not read: particle and sound keyframes and animated textures (the first frame is used).

When you need more

The free version does 1 or 4 directions and one animation per sheet. The full version ($5) does 8 and 16 directions, puts all animations into one sheet, writes a JSON atlas that Phaser and PixiJS load as it is, exports a ZIP with every frame as its own PNG, adds an outline and a colour limit, and also opens glTF / GLB models, for example from Blender. It is one HTML file that works offline.

Open Turnsprite

Something not working with your model? Tell me what you see, I fix what I can reproduce.