How to make a 2D isometric spritesheet from a 3D model using Blender

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.

Attachments: 
Preview
Legjerk2.gif Legjerk2.gif 1.8 Mb [64 download(s)]