Game Development Community

dev|Pro Game Development Curriculum

[Updated] Creating Animated Sprite Sheets from 3D Models

by John Kanalakis · 01/06/2009 (4:10 am) · 26 comments

Creating Animated Sprite Sheets from 3D Models


Rather than Spam the forums with an update blog... See the new images posted with the comments below. Now featuring new alpha correction and anti-aliasing enabled.

Here's a little side project that I put together over the holiday break, while Torque X 3.0 is in testing. SpriteWorks is a flexible application that takes 3D models in .X, .FBX, .XSI, and of course .DTS and turns them into 2D sprite textures. This can be used to produce very realistic sprites from well lit and normal mapped 3D models. You can also select any animation sequence attached to a DTS shape to create an animated sprite sheet.

www.envygames.com/share/sample_animation.jpg

SpriteWorks is based on XNA and, of course a running instance of the Torque X Engine - yet another tribute to the flexability of the engine. However, the images that are produced are translucent .png files that will work with any 2D graphics engine, including Torque X 2D and TGB. The sample sprite sheet here is a web-friendly, but non-transucent .jpg file. In the video above, SpriteWorks is used to take the Boombot sample DTS model that comes with Torque X, select an animation (in this case "run"), generate the animated sprite sheet, then import it into Torque X Builder 2D. But it will work with just about any DTS file, from Kork the sample player to the many buildings and vehicles sold as content packs. And with support for .X and .FBX, you can even look to resources, including TurboSquid.com for even more models that can become textures for your 2D game... and some of them are free ;)

www.envygames.com/share/spriteworks_cam.jpgSpriteWorks also features complete camera control so you can get the camera angle you want. It also has an auto-aiming feature that always points the camera to the model, regardless of the camera's position. You can also pick from a list of preset camera positions or define your own for quick and consistent rendering. The whole goal is to balance flexibility with ease of use. If you're planning an isometric game, or any 2D game that would benefit from some 3D graphics, this might be useful. Even though Torque X 2D supports 3D shapes within a 2D scene (with the help of the T2DShape3D), a sprite sheet is likely to take much less memory and have less performance impact on your game.

It's pretty close to completion, I just need to finish off a few core features. A few of the features that are not likely to make it for the initial release include surface shadowing, pathed camera, and custom lighting - but they probably wont be too much later. I'm really hoping to get this in some sort of beta version within the next couple of weeks. In the meantime, please check out the video and let me know what kind of suggestions or ideas for improvement you might have.

Best Regards,

John K.

About the author

John Kanalakis is the owner of EnvyGames, an independent game development studio in Silicon Valley that produces games and tools for Xbox 360, Windows, and the Web.

Page «Previous 1 2
#1
01/06/2009 (4:37 am)
Heh, that is very cool. As a matter of fact we are waiting on a 3d model to be completed so that we can do that very thing. Will this come built in Tx3 or is this something I will have to buy later?
#2
01/06/2009 (5:33 am)
Fantastic tool John! really great idea.
#3
01/06/2009 (5:42 am)
John this is something that I've needed quite a bit! One tremendously useful feature would be some command line support so that some of the work could be automated. I'm thinking of all the various DTS shapes that I have had to manually take into showtool, take screenshots of, trim and crop in another program, etc etc. Very nasty business!
#4
01/06/2009 (5:42 am)
Most impressive.
#5
01/06/2009 (6:50 am)
Pretty cool
#6
01/06/2009 (7:58 am)
That is seriously freakin' cool.
#7
01/06/2009 (8:00 am)
OOH! I'd like to second Dave Young's suggestion of command-line support. I know there are gotchas like where to place the camera for maximum effect, but still... That would be quite handy indeed!
#8
01/06/2009 (8:06 am)
Very, very cool. We used rough internal application like this at Sickhead Games to create all the character sprites in The Adventure Kit. I'm very happy to see such a slick and useful app like this available to the people. Excellent work, John!
#9
01/06/2009 (9:37 am)
Thank you for the feedback. This is a separate tool from the 3D Builder with a completely different code base. It's also more of a tool for 2D game creators and doesn't really fit into the 3D builder solution. I really like the command line support, I'll think about how to work that in (with a second release, not to hold up the initial release). But at least the first version has the ability to set camera presets, so that everything is consistent between sessions. If there are more feature ideas, keep them coming. I think it makes a great companion to Sickhead's TGB Adventure Kit since the kit has a lot of great code and artwork to work with. Thank you for the note, Russell.

John K.
#10
01/06/2009 (11:04 am)
Good idea!
Here are my humble suggestions:

-add support for padding an image by n pixels
-add option that captures current camera and programmatically pan/zoom to fit entire character, once, to encase largest "offending" frame, to ensure no clipping and maximize resolution
-add check boxes to rotate imported models, +90 - 90 in all axes (so camera presets can be reused amongst models coming from different format spaces)
-a button for centering camera on centroid of model's bbox, while keeping entire mesh visible on screen
-supporting batching (I guess command line would take care of this, as others suggested?)

Cheers
Jim G
#11
01/06/2009 (11:04 am)
Nice work, John. What are you doing for AA? What sort of lighting are you planning on having? Like Sickhead, we have our own flow for this sort of work... but it'd be cool to have a nice tool do it for us. :)
#12
01/06/2009 (11:08 am)
Also, how do you deal with pixels that border on the background?
#13
01/06/2009 (11:28 am)
Excellent suggestions, Jim. They all sound pretty straightforward to do, too. Your suggestion to auto-fit the model sounds really interesting since this can be used to capture both a player model and a building model. It already has an "auto camera centering" ability, so that's set. Great Ideas!

The anti-aliasing has been a big pain. The problem is at least touched in a couple of low-tech ways. First, you can choose a mask color (other than magenta) that blends better over the anti-aliased pixels. Then, while building the sprite sheet, I'm addding some weighting to the ImageAttributes color key for the 'low-color key' value. I'm still finding better ways to improve this - maybe a negative mask. As for lighting, it uses Torque X lighting effects, so you can add a few lights to the light list, set their positions and colors, and call out a normal map for the model. I just need to implement a proper shadow solution to replace Torque X's blob shadow caster.

John K.
#14
01/06/2009 (11:51 am)
What I would recommend for the anti-aliasing is the following.

First, turn on AA to as high a quality as you can (or better yet make it a user option). Second, render the sprites twice, once to a black background and once to a white background. You can then do a little math to determine the alpha of each point and get the true color. The TS imposter code used to do this, don't think it does anymore.

For the border pixels, you want to make sure that the stored color is the "true" color of that pixel, not taking into account any blending/AA with the background color. This way you get nice crisp sprites that look good on any background. Because they have AA internally they also look nice. Of course, some people may want a matte color for some circumstances, too, but that requires careful coordination of your art to work well.
#15
01/06/2009 (12:07 pm)
Awesome - thanks, Ben! As usual, you rock! I'll make those changes and try them out. This is going to be especially helpful when the shadowing code is added in. Thank you!

John K.
#16
01/06/2009 (12:59 pm)
That's very cool John, I wish I had this three weeks ago!
#17
01/06/2009 (4:47 pm)
John,
the technique Ben outlines for getting both AA and HQ translucency is talked about and demonstrated w/ imageMagick command-line ops in this thread.
#18
01/06/2009 (10:05 pm)
I missed where I can get this? :):)

I had a demo to create and this would have helped tremendously.
#19
01/07/2009 (5:37 pm)
Fantastic! Thank you guys, the results are much better. Here's a couple of examples just taken...

First, a really really close up (about 400x) of the original image with just a black mask - see the black outlining to the right?
www.envygames.com/share/sample1.jpg
Next, with the improvements, the same 400x close up using the black/white color subtraction method. It's nicely blurred with proper alpha value instead.
www.envygames.com/share/sample2.jpg
The resulting image (again as web-friendly JPG) looks like this...
www.envygames.com/share/result.jpg
What a difference! Thank you guys, this is truly a great online community! I think I'm just about finished with this application. Just a few more days of bug fixing, then... any Beta testers out there?

John K.
#20
01/07/2009 (6:20 pm)
Sure why not.... I will give it a going over if you like...err or try to:)
Page «Previous 1 2