Skip to main content

User login

What is OpenID?
  • Log in using OpenID
  • Cancel OpenID login
  • Create new account
  • Request new password
Register
  • Home
  • Browse
    • 2D Art
    • 3D Art
    • Concept Art
    • Textures
    • Music
    • Sound Effects
    • Documents
    • Featured Tutorials
  • Submit Art
  • Collect
    • My Collections
    • Art Collections
  • Forums
  • FAQ
  • Leaderboards
    • All Time
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
    • Weekly
      • Total Points
      • Comments
      • Favorites (All)
      • Favorites (2D)
      • Favorites (3D)
      • Favorites (Concept Art)
      • Favorites (Music)
      • Favorites (Sound)
      • Favorites (Textures)
  • ❤ Donate
Tutorials

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

VenetianBears
Wednesday, June 5, 2019 - 10:49

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 [51 download(s)]
  • Log in or register to post comments
Alwaysusa
joined 2 years 5 months ago
Sunday, October 18, 2020 - 15:25

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.

  • Log in or register to post comments
Crafty Dragon Ghost
joined 2 years 5 months ago
Saturday, October 31, 2020 - 05:52
Crafty Dragon Ghost's picture

Thankss

Natural Habitat : Bed
Species : homo Sapien, Primate
Notice : Approach With Cation This Creature Is Known To Be Introverted Annoying

  • Log in or register to post comments
Khyze
joined 10 months 1 week ago
Monday, May 23, 2022 - 08:47
Khyze's picture

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

  • Log in or register to post comments
Commander
joined 3 years 3 months ago
Wednesday, May 25, 2022 - 08:37
Commander's picture

-Very good tutorial, good job.

  • Log in or register to post comments
threadsoft
joined 3 years 1 month ago
Friday, March 17, 2023 - 20:21
threadsoft's picture

Thanks for posting this! Great stuff!

  • Log in or register to post comments