Varcade Dev Blog

3D to 2.5D with Sprite Sheets

by on Mar.02, 2010, under Games

Having gone thru the 2D Turorial, I learned how to load, draw, move, and rotate a sprite using the XNA framework.  Then I had a look at some sprite sheet tutorials, such as Sprite Sheets in Xna: The Basics

Now I wanted to get my own graphics in play, and simulate some 2.5D.  Specifically, a 3D rendered object that would show a different angle depending on the direction it is moving, roughly like so:

moving left: moving up: moving right: moving down: 

Now if we were doing a straight top down view, we could use a single overhead image in our sprite, and just rotate it in XNA.  But since we are showing a little bit of perspective ( note how you can see the near side of the tank slightly in the left and right views ), we will need some pre-rendered images of all ( or most ) of the possible angles the object can be seen at.

I grabbed a free model from TurboSquid.

I found several scripts for 3D Studio, that would help automate the process:

Sprite Render Script – did not try this one yet, but looks good
Sprite Render Tool – used this one, it’s old and had a bug I had to fix when doing more then the default 8 views

Other utilities used to finish the process:

Smart Cropper V2 – batch image cropper that finds the smallest size across multiple images
GlueIt 1.06 – joins multiple bitmaps into a single sprite sheet

Here is what my first attempt resulted in (rough version with bad shadows):

 

I was able to render these to PNG format so the transparency mask was built in, and worked perfectly to blend them to the background in XNA.  I created a new class for my game objects, that would automatically display the correct panel based on the object’s current direction of movement. And then I tweaked it one step further, that if the rotation in the image wasn’t an exact match to what was happening in game, it would compenstate by adding a a slight amount of rotation to the sprite as well.  After a bit of tweaking, this came out very nice.


3 Comments for this entry

Leave a Reply

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Blogroll

A few highly recommended websites...