Fun with XNA and 2.5D

This weekend I had a little fun in XNA playing with the concept of 2.5D.  There are a number of things games use that can be called 2.5D - I choose to build a test project where all draw calls were in 2D, but it is also common to use 2D sprites in 3D space as well.  These sprites are referred to as billboards, and there is an example project for using them in XNA at the App Hub site.

For my project, I wanted to photograph an object from multiple sides, convert this to a sprite sheet, and then render the correct side based on the direction the object was facing.  I talked about this idea with my two oldest daughters, and asked for suggestions on the object I should use.  I fully expected a debate to involve Legos or stuffed animals, but they both wanted to use themselves!  Using the green screen I have for GameMarx, and a set of swords I have from this thing I used to do, we setup the shoot.  I had the girls stand on an ottoman so I could rotate them p/4 each shot (all game devs think in radians eventually):


Next I took these shots and converted them into a sprite sheet, making sure to keep them in order so it will be easier later in code to manage:


In code, I created an array to hold the location of each sprite on the sheet.  For simplicity, I'm only going to post the code for Hannah - Rachel's code is pretty much the same with the only difference being the start locations.  I found it easier to have the first direction facing up, so I listed the second row for Hannah first:

Rectangle[] hannah = new Rectangle[] {
    new Rectangle(0, 128, 128, 128),
    new Rectangle(128, 128, 128, 128),
    new Rectangle(256, 128, 128, 128),
    new Rectangle(384, 128, 128, 128),
    new Rectangle(0, 0, 128, 128),
    new Rectangle(128, 0, 128, 128),
    new Rectangle(256, 0, 128, 128),
    new Rectangle(384, 0, 128, 128),

In the game loop update, I need to figure out from the player's thumbstick what direction to move Hannah, and also which sprite to display.   Movement is pretty straight forward, I just take the X and Y of the thumbstick as is. 

To calculate the sprite, I first need to calculate the angle of the thumbstick, using the Atan2 method.  Atan2 will return a value from -p to p, so to make it easier on myself I add p so that I have a range from 0 to 2p.  I then scale this result to the number of sprites for Hannah and offset it slightly by p/8.  Why do the offset?  Well, if I didn't straight up would be zero, but slightly to the right would be just under 7 (we have 8 values, 0 through 7).  We want the have an even +/- p/8 to the direction on the stick so that Hannah heads in the direction players expect.

The final step is to check an see if we need to wrap the high end back to zero, or undo our previous adjustment since it cuts off a few values for zero.  The end result looks like:

if (controller.ThumbSticks.Left.Length() > .2) {
    hannahLoc.X += Convert.ToInt32(controller.ThumbSticks.Left.X * speed * gameTime.ElapsedGameTime.TotalSeconds);
    hannahLoc.Y -= Convert.ToInt32(controller.ThumbSticks.Left.Y * speed * gameTime.ElapsedGameTime.TotalSeconds);
    hannahAgl = Math.Atan2(controller.ThumbSticks.Left.X, -1 * controller.ThumbSticks.Left.Y) + MathHelper.Pi;
    double face = (hannahAgl + MathHelper.PiOver4 / 2) * (hannah.Length - 1) / MathHelper.TwoPi;
    hannahFace = Convert.ToInt32(face > 7.25 || face < .75 ? 0 : Math.Round(face));

And the draw call is simply:

spriteBatch.Draw(spriteSheet, hannahLoc, hannah[hannahFace], Color.White);

To see all this in action, I made a quick youtube video:

Posted By Mike On Monday, December 20, 2010
Filed under xna | No Comments

Submit this story to DotNetKicks   

Leave a comment

All comments are moderated manually.

Your name:

Your email (not shown):
Will display your Gravatar image.

Your website (optional):

About Michael

Michael C. Neel, born 1976 in Houston, TX and now live in Knoxvile, TN. Software developer, currently .Net focused. Board member of ETNUG and organizes CodeStock, East Tennessee's annual developers conference. .Net speaker, a Microsoft ASP.NET MVP and ASPInsider. Co-Founder of FuncWorks, LLC and GameMarx.

Proud father of two amazing girls, Rachel and Hannah, and loving husband to Cicelie who inflates and pops his ego as necessary.

 Subscribe to |  Comments

Follow me on Twitter | Contact Me

Related Posts

"Quest" Post Mortem - Ludum Dare #26

This past weekend I took part in my first ever Ludum Dare, a competition to complete a game in 48 hours.  There is no prize for first place, there ... Read more

Yes Virginia, XNA is Really Dead

If you're not up on the latest XNA news, Microsoft has confirmed (though via leaked email) that XNA and the XNA Game Studio is no longer in active development.  ... Read more

Announcing XTiled - XNA Library for Tiled (TMX) Map

A few moments ago I posted the first binary release of XTiled, making it officially ready for use! XTiled is an XNA library reading and rendering TMX maps ... Read more

XNA 3D Primer Examples Updated, XNA 2D Example Added, Talks on Both at DevLINK

Almost two years ago now I was working on a short ebook XNA 3D Primer (now in Kindle flavor).  A year after the book came out XNA 4.0 was released, ... Read more

Creating the Parallax and Scrolling Background

This article is cross-posted from  Draco Wing is a new XNA based game for the Xbox 360 I am working on, and I will be keeping a “diary” ... Read more

XNA 3D Primer by Michael C. Neel

XNA 3D Primer by Michael C. Neel
Buy Now: [ Amazon ] [ Wrox ]



ASPInsiders Member

ETNUG Member