Creating a game sprite: Rendering

 

We come to the end of our time with Blender!  Its finally time to turn our 3D model into pixels.  We are going to render our animation out to a series of images with transparent backgrounds.

 

You have one final decision to make.  Perspective or Orthographic projection.  So, what exactly is the difference?  Well in a nutshell, something viewed with perspective changes in size as it changes in depth.  So the further away something gets, the smaller it will be.  This is essentially how we see the world, well, unless of course you have poor depth perception that is…  In Orthographic, things are drawn at the size they are.

 

Here for example is the same frame rendered each way:

Perspective:

PerspectiveProjection

Orthographic:

OrthographicProjection

 

Generally perspective is the defacto format you would use, but when working with sprites, orthographic makes a ton of sense.  If you decide to go with Orthographic, there are a few things you need to know.

 

As you may recall, you swap between different lens modes in the camera tab:

image

 

Once you switch to Orthographic, you can no longer zoom or pan the camera.  You instead tweak it using Orthographic Scale in place of zoom, and Shift X and Y in place of panning.

image

 

Now before you render you want to make sure your lighting is set and your camera is properly framed.  We obviously want to contain our entire sprite in every frame, so that means we need to make sure our sprite is entirely within the camera shot at it’s biggest point during rotation.  In this case, that would be frames 5 or 15 in our animation.  Play to one of those two frames, then make sure the jet is entirely within the camera’s shot:

image

 

Now bring up the Render panel in the Property window.  Of key importance are the resolution and animation frame start and end.

image

 

I want my final sprite to be 192×128 in size and I want to render all 20 frames in the animation.  Be careful of the percentage value, as it will be 50% initially ( which would result in your sprite being 96×64 instead ).  If you change the ratio between the X and Y resolution, be aware the camera target rectangle will change as well.

 

Since we want our background to not render, there are a few more settings we have to make.  Scroll down and locate Shading, and set Alpha to transparent.

image

 

 

Then scroll down to Output, select a path you want to save frames to ( yes, the results can end up looking a bit strange, like mine has here, don’t worry, it will still work ) and you want to make sure whatever graphic format you go with ( like PNG here ) supports an Alpha channel, so select RGBA.

image

 

And now we are finally ready to render!  Since we want to render all the frames in our animation, click Animation.

image

 

Then navigate to the output directory and…

image

 

Wahoo!  Our animated sprites are finally done.  Now if you were to use it in a game, at the current resolution it would look like:

jetAnimated

 

Congratulations, you just modelled, textured and rendered your first game sprite in Blender!  I hope you’ve enjoyed the series!

 

I will be covered a few more topics in appendix form but that concludes the Blender portions required to make the game sprite.

 

I was going to cover creating a sprite sheet, then I realized I already had… oops.  This tutorial shows how you can create a sprite sheet from a series of images using GIMP.  This tutorial as well as this one show how to use a sprite sheet in Haxe/NME.  This one shows how to use TexturePacker to assemble your many sprites into a single sheet, as well as how to use a sprite sheet in PlayStation Mobile.  Finally this tutorial shows how to use a sprite sheet in Cocos2D HTML5.

 

So I guess I’ve already got the whole sprite sheet process covered! Winking smile

Art


Scroll to Top