Creating an isometric rig in Blender

The most time consuming aspect of creating isometric games is the artwork because almost every single sprite needs to be drawn at 4 different angles, or 8 if the sprite is of a character. Additionally, if the sprite needs animating, such as a character walk, that animation might comprise of say, 10 frames at each of those angles. For a basic character that needs to walk in all directions, that's 80 frames to draw before we even consider running, standing, jumping, and so on. To do all of this by hand as raster art would be a nightmare.

Our solution is to create all of our sprites as 3D models in Blender, a free 3D modelling software for Windows, Mac and Linux, and then render these models out to 2D sprites by rotating the model in front of an orthographic camera.

Blender can render animations out to individual frames so for something like a walking animation it's just a case of animating within Blender, then rendering, rotating, rendering, rotating, rendering, and so on. The resulting sprites can be merged together into single spritesheets later on to use as in-game animations.

For sprites that don't need animating, such as walls, we create the rotation itself as an 8 frame animation so that a render of every angle can be obtained with a single click. This approach makes it really quick to produce isometric game art, ensures the artwork looks exactly right at each angle because you're not actually painstakingly drawing 8 alternate views of the same item, and means that for every 2D graphic in your isometric game, you've got a 3D model ready to use if you ever want to turn that game into a 3D sequel.

If this sounds like the perfect solution to you, here's how to set up an isometric rig in Blender. Alternatively, skip to the end of this post and download a copy of our pre-built rig. The scope of this tutorial isn't to teach Blender, trigonometry, pythagoras, or orthagraphics but the calculations used are shown here for reference in case you need to create a slightly different rig and produce renders of a different size to ours.

Creating the base

1. First, open Blender and click anywhere in the scene to close the overlaying splash screen. Blender should have created a camera, a light, and a cube already.
   
   
2. Select the cube with a right-click, and hit delete.
   
   
3. From the panel on the left, click "Create" and then "Plane" to add a flat plane to the scene. This will become an invisible base that we attach everything else to for rotation, so from the object properties ("Object" icon within the row of icons from the panel on the right - it looks like a cube) rename this to "Base".
   
   
4. Still with the base plane selected, click the "Material" icon (a checkered sphere) from that same row and "New" to add a basic material. We don't want the base to be rendered but character sprites need something to cast a shadow on so scroll down to "Shadows" and enable "Shadows only".

Setting up an isometric camera

1. Select the camera with a right-click and then the "Data Object" icon which looks like a camcorder. For isometric graphics we want to switch to an orthographic lens, so select "Orthographic".
   
   
2. Hit "0" from the number pad to view the scene from the cameras perspective. For proper isometric renders we need to adjust the cameras viewport so that the plane touches the left, right, and bottom edges the frame, and so that it looks like a perfect diamond where the height is exactly half the width.
   
   
3. For the perfect diamond, click the "Object" icon and set the rotation to 60 degrees along the x, 0 degrees along the y, and 45 degrees along the z.
   
   
4. Next we need to decide on a canvas size to render out to. For our own graphics we decided 256px wide would be adequate, and 512px tall would be a reasonable amount of vertical space to draw tall sprites within. Click the "Render" icon (looks like a camera) and enter a resolution of 256 x, 512 y. Or adjust for your own needs. Set the render scale to 100% too. While we're here, change "Shading" -> "Alpha" to "Transparent" so that the resulting renders are given a transparent background, and disable "anti-aliasing" so that the edges remain crisp pixels that can be slotted together in a game world. Sometimes you'll want to enable this for rendering characters or other sprites that don't need slotting together, but for something like a wall where the edges need to be seamless, anti-aliasing just gets in the way.
   
   
5. Back to the "Object" properties to get the edges of the diamond in the right place, the first step is to force the camera to point exactly at the middle of the scene. For the horizontal, set the camera location to 10 x, -10 y. This combined with the 45 degree z angle puts the middle of the scene perfectly in the middle of the camera frame.
   
   
6. For the vertical position we need a bit of trigonometry and pythagoras. The camera is positioned 10 x -10 which gives us two sides of a right angled triangle, so we can calculate the hypotenuse to give us the distance it is away from the centre. √((10 * 10) + (-10 * -10)) = √200 = 14.1421356237. Next we can use this and the known 60 degree camera rotation to imagine a new right angled triangle and calculate its opposite side, i.e. the height the camera needs to be at to point down the hypotenuse towards the scene centre. (14.1421356237 / sin(60)) * sin(30) = 8.16496580926. Use this for the camera z location.
   
   
7. The diamond should now be exactly centered in the camera view, but we need to adjust the camera zoom to put the corners exactly on the left and right sides of the frame. Back over to the "Data Object" to adjust the "Orthographic scale". The width of the diamond is √((1 * 1) + (1 * 1)) = √2 = 1.41421356237 and its height is always half that, so to render a 256x512px sprite the orthographic scale needs to be 1.41421356237 * ((512 / 256) * 2) = 5.65685424948. Enter this as the "Orthographic scale", or adjust for your render resolution. At this point if you disabled the "Shadows only" property of the diamond again, and produced a render, you might notice a 1 pixel gap before the edge of the frame. This is normal behaviour just because the plane is only one face and because of how rounding works in the render process. If you create a cube and position it in the centre of the screen the render should be perfectly edge to edge.
   
   
8. Finally we need the base of the diamond to touch the bottom frame of the camera view. For this, still on the Data Object icon, adjust the "y shift". (1.41421356237 / ((512 / 256) * 2)) + (5.65685424948 / 256) = 0.3756504775. Enter this and we're there - an invisible isometric diamond aligned perfectly within the canvas, that can be used to position models over for rendering out to 256x512px sprites, or whatever size you adjusted to.

Rotations

We need to set up a rotation animation so that all 8 isometric views of a sprite can be rendered out at the click of a button.

1. Click the "Render" icon and change the "End frame" to 8 and within the timeline editor at the bottom of the screen, hit "View" -> "View All". Then with frame 1 selected, right-click the plane, switch to the "Object" icon, hover over the z rotation property and hit the letter "i" on your keyboard. The rotation properties should turn yellow. Switch to frame 2, change the z rotation to 45, and hit "i" again. Repeat for the remaining frames, increasing the rotation by 45 each time until all 8 frames are set.
   
   
2. Back to the "Render" icon, scroll down to "Output" and pick a folder to render animations out to. Renders will produce a separate file for each frame and by default will overwrite any renders already at that location, so it's best to pick somewhere that's specifically only used for Blender rendering.
   
   
3. Now to render a model out at all 8 angles just means setting the models parent object to be our Base plane and hitting the "Animation" button within the "Render" icon. 8 images will be created within the chosen output folder, each as a 45 degree rotation of your model at an isometric projection.

Lighting

To finish off, we want to make sure all of the resulting sprites are rendered with the same lighting so it's a good idea to set that up now within the rig. Your optimal settings are somewhat dependant on what you're making, but as a general rule of thumb with isometrics we find it's a good idea to aim for very bright with a really small shadow that doesn't extend beyond a single tile. Most importantly, lighting needs to be an even spread so that tiles can fit together without weird gradient effects.

1. Before trying to set the lights, you'll want a model to render so that we can actually see the results. Click "Create" -> "Monkey" to add a reasonably complex mesh to the scene, then change its position to 0 x, 0 y, 0.6 z, and its scale to 0.6 x, 0.6 y, 0.6 z. While on frame 1, from the "Object" icon set the parent to be the Base plane of the rig. The mesh now fits within the isometric tile and will rotate with the animation.
   
   
3. Right-click on the existing light and from the "Data Object" icon change it to a Sun type and change the Shadow to "No shadow". This will be for our even brightness. You might also want to rename to "Sun" so that we can differentiate easily from other lights.
   
   
4. The position of Sun lights doesn't matter to the render process, but it's easier to imagine the lighting that they cast if they're positioned near to the scene objects, so from the "Object" icon change the position to 4 x, -4 y, 4 z, and set the rotation to 0 x, 45 y, -40 z. Note that we're not pointing the light at a perfect 45 degrees towards the object because then both faces of a cube would be lit the same shade.
   
   
5. Some sprites, such as characters, need a ground shadow that doesn't extend beyond the size of the tile. Click "Create" -> "Lamp" -> "Spot", position it at 0 x, 0 y, 20 z, and from the "Data Object" icon enable "Only shadow" and set the "Spot Shape" "Size" to 3.
   
   
6. Click render to see the result and once you're happy, delete the monkey object. Save your rig and whenever you need to make isometric renders, simply import models in, position above the plane, and hit "Animate". Remember to turn off the spot light if rendering something that doesn't want to cast a shadow, and enable anti-aliasing if rendering something that doesn't need to slot together seamlessly with other tiles.

If you like our set-up but don't want to go through the whole process yourself, download our complete isometric rig for Blender. You should at least read through the above though to understand how this rig works before trying to use it.

Blog posts written by former QWeb employees are not necessarily an accurate indication of the current opinions of QWeb Ltd and the information provided in tutorials might be biased or subjective, or might become out of date.

Discuss this post