Black Pillow

How to export an animated, skinned 3D model and get it to work in XNA posted 20 March 2008 - 13:29 updated 27 March 2008 - 06:27

After about a year of silence, I decided to finally post something new over here ;)

Lately I've been programming a game in XNA. And one thing which took me a long while to figure out, was how to get the nice animated 3D models to display on the screen in a XNA game. And since it took a long while to figure this out, I decided to post it here, because other people might have the same problems as I did.

Ok, let's go.
First of all, I use Autodesk 3ds Max as my 3D software packet, but it might also work with Maya (not tested though).

What's very important to start with, is that there is only 1 mesh in your scene. So if you use meshes for your helpers, you have to replace them by dummies, otherwise it won't work.
Most off the other complicated stuff works over here, so stuff like bones, skinning, IK's, ... won't cause any problem.

Next, the export itself, well, we have to export twice in fact.
Export number one:
We'll need the free exporter from Feeling Software, called ColladaMax.
You can download it, but you'll need to create an account before you can do so.
At the time of writing, I'm using version 3.05B.

Now, once installed you can open up your 3D Studio Max and open your model.
Now, click your model, make sure you've only selected your model, and choose File => Export Selected...
Pick the Collada (*.DAE) format, give the file a name, and press Save. Next, you have to check some checkboxes, the most important one is the "sample animations". Make sure you have that one selected, and have the correct frame numbers inserted in the two textfields.
Now press OK.

Alrighty, now we have an DAE file, but XNA doesn't know how to process a DAE file out of the box.
So we have to make an FBX file out of this DAE file.
We'll use 3DS Max to do this again.

So, Reset your stage in Max and choose File => Import, and pick your DAE file. It's very important you import the file with the Collada (*.DAE, *.XML) importer and not the Autodesk (*.FBX, *.DAE) importer, because he will mess it up.

Ok, once imported, you can go to File => Export again.
And now pick the Autodesk (*.FBX, *.DAE) exporter. Make sure you explicitly export your file with the extension .fbx and not .dae!
In the next dialog, make sure you have checked: Geometry, skins and animation.
Press OK, and you're ready to use the file in XNA.

The best library I found to use this file is the XNA Animation Component Library.
At the time of writing, there isn't an official XNA 2.0 build out of that library, but when you search the forums, you can find one over here: Xclna conversion to XNA 2.0

There you go, I hope some of you might find this usefull.

Update
We found out that when you are using the XNA Animation Component Library, you have to make sure that on frame 0, you set the model in it's startingpose, like you modelled it. And you have to start animating on frame 1 and not on frame 0!
Otherwise you will see some very strange things happening.

CSS Naked Day posted 04 April 2007 - 19:05

It's been a while since I posted here, but today is a special day.
It's CSS Naked Day and I'm participating because I highly support the CSS and the other webstandards.

Well that's about it. See you on my next post (hopefully soon ;))

Transturner launched posted 09 December 2006 - 08:56

For our programming course at school, we have to make little games in C++. And to spice the games a bit up, we have to use bitmaps instead of simple DrawLines, DrawRects and DrawOvals.

Alright, so If you have found a nice bitmap for your game, you want it to move probably, and it may also be necessary to rotate the image in the game.

That's the point where Transturner comes in. It's an web page that lets you turn your images automagically into one long bitmap over a certain degree and with a specific transparent color.

I wrote this thingy in about two days. It's made in Ruby on Rails (offcourse :p) with the help of the rMagick library to process the images.

After that was done, a friend (the designer of my site) came complaining about the bad layout of my webapp, so he designed a very sleek design for it. And I put it into a nice simple css file.

So how does this app works. Well let's see...

First you have to make an image with the transparency color already in it, for example:

Then if you put the transparency color to #ff00ff and set an degree of 60, you get this result:

Ow, I almost forgot the link, here it is:
http://pieterhoste.be/Transturner/