(Updated November 2021 for Blender version 2.8 and later)
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.
We need to set up a rotation animation so that all 8 isometric views of a sprite can be rendered out in one click.
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. A downward pointing light for a perfectly centered shadow below the sprite tends to work best, even if the sprite is ambiently lit from an angle. Suspension of disbelief kicks in when playing games and shadows not following the logical rays of a sun light in isometric renders just doesn't matter.
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.
This is an excellent technique, thank you for sharing. I'm a Blender beginner and the current version is very different. I could not do certain steps you described. I could open your pre-made rig but it doesn't appear to cast any shadows, and it also shows the base. At any rate, I was wondering if you could update the article and the pre-made rig to the latest version, seeing how different it is? Thank you!
Blender has indeed changed a lot since I wrote this post. It looks like the problem is that the material of the plane created just to catch shadows now has a mandatory base colour which is being included in the render, and shadows-only doesn't seem to be an option any more. Shadow catching in the Cycles rendering engine was always problematic and I'm wondering if Cycles is now the only engine in newer builds.
I'll try to figure out a solution and update this post asap.
Alright - now that I've had time to look at this properly again, it seems the internal Blender renderer was indeed removed in Blender 2.8 but it's not Cycles that's replaced it - instead, a new Eevee engine seems to be the default and has some limitations. Most notably for this rig, creating spot lights that cast shadows but don't actually emit light doesn't appear to be possible, and creating planes that catch shadows but don't render a surface material also doesn't seem to be possible.
A little Googling suggests that shadow catching is now possible in Cycles though, which wasn't the case when I built this rig, so I'm going to recompile my Blender install with Cycles support, (Gentoo Linux user here), and see if this can be reworked for that.
In the meantime, if you pull a pre 2.8 version of Blender you should be able to follow the above or use the provided rig properly.
Ric, thank you so much for sparing time looking into this. I've made big headway learning about Blender and the new version in particular. I found Cycles to give me better results than Eevee in general, and in particular when following your tutorial, although pretty much everything is in a different spot now.
As you said, there is no way to set up a light that ONLY casts a shadow. It will always illuminate the object. There are techniques out there using composition and render layers that make this possible, but IMO this is way too heavy and manual because every object has to be duplicated into another scene. Now multiply this by 100 assets and there is no way I can do that.
I ended up using 2 sun lights, one for the top of the object (that casts a shadow onto a shadow catcher plane), one for the front (no shadow), and an ambient light to lift up the shaded areas. Now that was another can of worms, because you can't stop the background object from casting shadows, so it was contaminating the plane with faint shadows up to its edge. So I ended up forming a light box with area lights arranged in a cube and placed it around my scene, then turned off shadow casting from this object.
Mind you I've only started using Blender for the first time of my life this week, so it might not be the best way to do this. I would be curious to hear your own take on this.
Again thank you for this article, and especially for breaking down the mathematical formulas, something no other 3D to iso article has done (there are at least 3 other articles on the web about this).
Well, I'm still having light issues when rendering tiles (which need to be perfectly even across). Whatever light source I use, the lighting of the tile isn't even. There is a brighter area at the center of the tiles. This is with specularity turned off. I have no idea why.
I'm no designer myself - a developer by trade really and our actual designers aren't experienced in Blender - but it does sound to me like your approach is a tad convoluted. On the one hand there's always more than one way to achieve these things and no working method is ever wrong, but the simpler you can get it, the easier it'll be to work with moving forwards.
My Blender install is recompiled with Cycles support now and I did get chance earlier today to have a quick fiddle. It seems Cycles now has a shadow catcher mask option which actually works well - just select the base in my original rig and from the object properties panel, scroll down to the visibility tab and tick "Shadow catcher". That seems to be enough to get the ground shadow working, (just remember to first switch to Cycles from the render options panel), but as you've already discovered, spot lights can't be set to cast shadows without emitting light in Cycles.
I do actually have a vague memory of making a Cycles version of my original rig at some point, using layers so that basically the spot light and shadow rendered to one layer and the object and sun light rendered to another layer, and then the renderer merged the two into a single image. I don't remember how well this worked but I might be able to dig that old rig back out of our archives, or recreate it again as long as layers still work the same in current Blender versions. This might be what Blender is now calling "Collections" in the scene list actually.
Again, I'll have another proper look asap and post back.
Pleased to confirm I've gotten a working rig now, using Cycles and Blender 2.93. I've taken a layers approach with Composite nodes but in a way that's not too different to my original method and each step is explained in the same detail as I had before. I've written everything down and will be updating this post tomorrow if not this evening. I'll provide a replacement download too for the rig itself, of course.
Post now updated, and the rig file replaced. Let me know how you get on.
This is awesome Ric, thank you so much for updating the post!! You're a good man. Cheers!
Oh and it's working well for me with a few deviations here and there, which I gleaned from learning Blender over the past couple of weeks!
No problem. It wasn't an entirely selfless effort if I'm honest - we'll need this rig again at some point too so would have needed to revise it anyway. Glad it can be useful to others in the meantime.
Your email address is used to notify you of new comments to this thread, and also to pull your Gravatar image. Your name, email address, and message are stored as encrypted text and you won't be added to any mailing list and your details won't be shared with any third party.