How to make a 2D isometric spritesheet from a 3D model using Blender
Figure I might as well share this since it's something I spent a while figuring out.
2D renders of 3D models is a bit of a lost art, utilized beautifully in games like Diablo 2.
The programs I use are Blender and Gimp. I've also heard you can substitute Gimp for Photoshop. I don't know how, but you might like to know it's possible.
If you run in to another problems (and you probably will cause I've never written a tutorial or guide before) I'll put additional resources at the bottom that helped me learn how to do this to begin with.
So! You've got your 3D model with all its animations.
In Object mode add a circle mesh and center it. Raise it on the Z-axis so it's above the model's head.
Select the camera, hold shift and select the circle. Hold ctrl+P and select set parent.
Add a small cube and position it roughly around the model's torso, then restrict the cubes rendering view, viewport visibility and viewport selection so you can't click or see the cube.
Select the camera and in the cameras constraints property add a Track To constraint and set the cube as its target. Specify To: -Z
Select the (bezier) circle then enter edit mode.
In edit mode, left-click (select) a vertex on belonging to the circle, then hold ctrl+S, select cursor to selected. For context, see the gif below.
Return to Object Mode and select your camera. Again hold ctrl+S and click selected to cursor. This will move the camera to the circle.
Hopefully you have something that looks like this.
Select your Bezier circle and go to its Data property. Scroll down to Path Animation and set its Frames to 1, this will stop the camera circling around the circle when we don't want it to.
Finally we should be ready to render. Change your screen layout to Scripting and paste the following:
import bpy
from math import radians
from os.path import join
S = bpy.context.scene
renderFolder = "C:/Users/Retri/Desktop/BlenderFiles/Renders/New/Running/"
camParent = bpy.data.objects['BezierCircle']
startFrame = 0
endFrame = 16
numAngles = 8
rotAngle = 360 / numAngles
for i in range(numAngles):
# Set camera angle via parent
angle = i * rotAngle
camParent.rotation_euler.z = radians( angle )
# Render animation
for f in range(startFrame,endFrame + 1):
S.frame_set( f ) # Set frame
frmNum = str( f-startFrame ).zfill(3) # Formats 5 --> 005
fileName = "{a}.{f}".format( a = i, f = frmNum)
fileName += S.render.file_extension
bpy.context.scene.render.filepath = join( renderFolder, fileName )
bpy.ops.render.render(write_still = True)
At the top where it reads "bpy.data.objects["BezierCircle"], you may want to change the object name string to the name of your circle object.
You'll also want to change the render folder path. If the path / folder hirarchy does not exist it'll make it.
Anyhoo.
Select your Armature and change the screen layout to animation. This should open up your dope sheet editor.
At the bottom of the window select the animation you want to render.
Return to the scriping screen layout and change the start and end frame to reflect the range of frames you want to render.
Hopefully you'll end up with something like this...
Right-o, now to open up Gimp and merge them to make a spritesheet.
But first we'll need to import a few addons.
https://www.gimp-forum.net/attachment.php?aid=1991
http://gimper.net/resources/sort-layers.618/download?version=618
Drop those files into C:\Program Files\GIMP 2\lib\gimp\2.0\plug-ins\
Awesome.
Now just load up Gimp, Select File > Open as Layers and open all your animation frames. This'll take a while.
Select Layers at the very top, a few to the right of File, and at the very bottom of Layer menu there'll be Sort. Sort by name. Simply hit OK.
Finally! Click Filters, click Combine and click FuseLayers.
Enter the number of frames in your animation. This will mean that each row will have a collumn for each frames.
Hit OK. It'll open a new window with your sprite sheet. Just hit File and Export as, save it and you're done.
Hope it helped. Feel free to butcher me if it didn't.
No comments on this? Surprising.
Thank you so much for this tutorial. I was totally stuck on this. I followed your instructions to the letter and everything worked great!
For anyone else reading this, you can set your camera properties to the resolution you want the final image to be (say 512x512), then change the height of the circle and scale of it to line up your mesh correctly.
VenetianBears, you rock. Thanks again for taking the time to write this up. Really helpful!
EDIT: Note I am on Blender 2.9. The only change is the modifier key is usually SHIFT now, not CTRL.
Thankss
Natural Habitat : Bed
Species : homo Sapien, Primate
Notice : Approach With Cation This Creature Is Known To Be Introverted Annoying
I created an account just to say thanks! I already had my scene ready so I only had to tweak the names to make it spin by itself and well, use opengl render.
I never knew you could write stuff on blender :P
-Very good tutorial, good job.
Thanks for posting this! Great stuff!
Thanks a lot for this guide. I was completely at a loss. By following your instructions, everything turned out perfectly!