3D Modeling for 2D Games
by Mark Schmidt · in Torque Game Builder · 06/07/2005 (1:49 am) · 36 replies
I have a bad case of programmer art. So, what's a lone guy to do? How about using popular 3D packages to generate 2D art? Well, that's exactly what I'm doing. The hard part was figuring out how to do characters. So, I broke down and bought Poser 6 (I've used it before so I was familiar with what it could do). I imported a model (not created by me). I then set up the initial camera and went a rendering. There are 8 directions my guy can walk and each direction uses 13 frames of animation (yeah, I don't need that many). Poser has the ability to render movies but instead of outputting to avi, you can just output to individual image files. So let's see my first screenshot:
This is a screenshot of all the frames for my guy walking in all 8 directions. However, Poser renders each frame to individual files which means I actually ended up with 104 images that I had to splice together for T2D (or write a gazillion datablocks). So I fire up VS.NET 2005 and within 1/2 hour I created my fancy whizbang Animated Sprite Maker (catchy title huh). Here's a screenshot:
Basically, you add individual images, hit the go button and it splices them all into a single frame based image. I first had to create 8 images for each of the directions. Then I grabbed those 8 images, put them into the Animated Sprite Maker, clicked the "Tile Vertically" button and it produced the image you saw in the 1st screenshot. Which leads me to the actual game (actually it's a screensaver but for now it functions more like a game since I control the little dude). Here's the screenshot of my animated man in action (if this were a video you would see that he walks in all 8 directions depending on which keys you press):
And there you have it. Using Poser 6 for 3D modeling, I easily created a full set of sprites for my 2D game. Now, I will say that since Poser 6 does cost $249, this solution obviously isn't for everybody. I'm sharing just to spark other coders imagination who are graphically disable such as myself.
-Mark
P.S. The screensaver shown here is just 1 screensaver in my SickSavers project. There will be others to go along with the collection. I have an updated description of the project, but for some reason, I can't update the project page with the detailed text. If anyone's interested, I'll post it here.
This is a screenshot of all the frames for my guy walking in all 8 directions. However, Poser renders each frame to individual files which means I actually ended up with 104 images that I had to splice together for T2D (or write a gazillion datablocks). So I fire up VS.NET 2005 and within 1/2 hour I created my fancy whizbang Animated Sprite Maker (catchy title huh). Here's a screenshot:
Basically, you add individual images, hit the go button and it splices them all into a single frame based image. I first had to create 8 images for each of the directions. Then I grabbed those 8 images, put them into the Animated Sprite Maker, clicked the "Tile Vertically" button and it produced the image you saw in the 1st screenshot. Which leads me to the actual game (actually it's a screensaver but for now it functions more like a game since I control the little dude). Here's the screenshot of my animated man in action (if this were a video you would see that he walks in all 8 directions depending on which keys you press):
And there you have it. Using Poser 6 for 3D modeling, I easily created a full set of sprites for my 2D game. Now, I will say that since Poser 6 does cost $249, this solution obviously isn't for everybody. I'm sharing just to spark other coders imagination who are graphically disable such as myself.
-Mark
P.S. The screensaver shown here is just 1 screensaver in my SickSavers project. There will be others to go along with the collection. I have an updated description of the project, but for some reason, I can't update the project page with the detailed text. If anyone's interested, I'll post it here.
About the author
#2
06/07/2005 (2:19 am)
The tool is actually written with Whidbey (Visual Studio .NET 2005 Beta 2). This means it's using the beta .NET 2.0 framework. I'll see what I can do about porting it over to .NET 1.1 tomorrow since I'm not using any 2.0 specific objects. 
#4
06/07/2005 (5:53 am)
Ye, tool would definitely get some community love. I've heard people on IRC asking for an app that does this stuff on at least 4 separate occasions. I'd love it too, remembering how I had to put together animations sheet for couple of explosions manually.
#5
Also I am a bit of a newbee to Poser 6, did you use the Python Scripting stuff to render out the frames, or did you do it manually?
Thanks
06/09/2005 (7:43 am)
I would really love to get my hands on this app as well. I want to use Poser 6 as well to render my sprites. Also I am a bit of a newbee to Poser 6, did you use the Python Scripting stuff to render out the frames, or did you do it manually?
Thanks
#6
Once you get into the flow of it, it's not too bad. It's just putting all the images together that drives me mad!
But when you render your movie, you can choose to render it out as a series of frames which makes things like walk cycles a little easier.
06/09/2005 (8:04 am)
I did it manually, as I wanted to make changes to the positioning of the models and the lighting, and I wasn't convinced that setting it all up as an animation would put the keyframes in the right places.Once you get into the flow of it, it's not too bad. It's just putting all the images together that drives me mad!
But when you render your movie, you can choose to render it out as a series of frames which makes things like walk cycles a little easier.
#7
This gave me 104 images. I then tried to splice them together in Photoshop but quit after (and I'm not kidding) about 5 minutes when I knew what I was in for now and in the future. Well, I'm pretty well versed in GDI+ and C# (even wrote a big book about it) so it only took me about 1/2 hour to make the app. Took 13 forward facing images with the tool and made the forward animation. Repeated for all directions leaving me 8 images. Took those 8 images and used the tool again, specified vertical tiling and voila, one image with all frames for all directions.
06/09/2005 (10:55 am)
I too did it manually. It was really easy. I positioned my dude facing 0 degrees. Rendered 13 frames for walking in that direction. Instead of using the dials, I simply clicked on the Y axis (I think it was Y) value and it lets you type in a value. I did this with 45,90,135,180 degrees etc...This gave me 104 images. I then tried to splice them together in Photoshop but quit after (and I'm not kidding) about 5 minutes when I knew what I was in for now and in the future. Well, I'm pretty well versed in GDI+ and C# (even wrote a big book about it) so it only took me about 1/2 hour to make the app. Took 13 forward facing images with the tool and made the forward animation. Repeated for all directions leaving me 8 images. Took those 8 images and used the tool again, specified vertical tiling and voila, one image with all frames for all directions.
#8
06/10/2005 (11:28 pm)
Looks great. I do some work with poser and i'd be interested in this tool as well! 
#10
I wonder how easily your program can be adapted for use with Blender.
06/13/2005 (9:09 pm)
Heh, that's pretty cool... Is it a fully function screensaver?I wonder how easily your program can be adapted for use with Blender.
#11
06/13/2005 (9:13 pm)
Not a screensaver yet. I manually control where the guy goes. I won't add the AI until around the last step. The next step right now is to find some models of some critters (mole's, gopher, etc...) and use the same method in Poser and my tool to get some animations. Then I'll make them poke up out of the ground (maybe run around a little) and have the guy go on the hunt with his lawnmower (hence the name SickSavers). I'll use this thread to post periodic updates.
#12
In order to reduce the filesize, I just included the sicksavers subfolder. Unzip the content in your Torque2D\SDK\example folder. It won't overwrite anything. A batch file has been included for your convenience.
www.schmidt6.com/blogfiles/SickSavers.zip
The file size is 2800Kb
06/17/2005 (5:12 pm)
Here's an updated screenshot and a link to the pre-pre-pre-pre alpha demo (still not a screensaver). This time I included the script files if anyone wants to see the walking animation stuff. First off the screenshot:In order to reduce the filesize, I just included the sicksavers subfolder. Unzip the content in your Torque2D\SDK\example folder. It won't overwrite anything. A batch file has been included for your convenience.
www.schmidt6.com/blogfiles/SickSavers.zip
The file size is 2800Kb
#14
You can find the file at www.schmidt6.com/blogfiles/animspritemaker.zip
If you get an error when you try to launch the program, you more than likely need to install the .NET Framework. You can run Windows Update to get it or go to:
www.microsoft.com/downloads/details.aspx?FamilyID=262D25E3-F589-4842-8157-034D1E...
I will more formally release this tool as a resource but I have to fill my belly up with some lunch first.
07/07/2005 (1:13 pm)
Ok, I finally converted the program so you all don't have to run Beta2 of .NET (you will still need .NET Framework 1.1 installed though).You can find the file at www.schmidt6.com/blogfiles/animspritemaker.zip
If you get an error when you try to launch the program, you more than likely need to install the .NET Framework. You can run Windows Update to get it or go to:
www.microsoft.com/downloads/details.aspx?FamilyID=262D25E3-F589-4842-8157-034D1E...
I will more formally release this tool as a resource but I have to fill my belly up with some lunch first.
#17
07/20/2005 (12:58 pm)
Any chance of getting the source to your app, or a resource for the tool?
#18
Thanks for sharing the code
Andy
09/09/2005 (6:38 am)
Many thanks for the demo. I haven't tried it on the PC but on the Mac there is a big white square where the main character should be. Is this Mac vs PC difference? If which case what do you need to do to make the game cross-platform?Thanks for sharing the code
Andy
#19
I tested with the GGlogo from the included sprites as well as my own sprites.
----------- edit after troubleshooting testing --------------
works with 96dpi but 72dpi was cutting it off
10/28/2005 (6:14 pm)
Has anyone noticed there imagery getting offset and blown up slightly? The result is a blow up version of the sprite that gets cut off.I tested with the GGlogo from the included sprites as well as my own sprites.
----------- edit after troubleshooting testing --------------
works with 96dpi but 72dpi was cutting it off
#20
I'm going to sit down and try to render out some images this weekend and import them into T2D.
Thanks!!
03/01/2006 (6:31 pm)
Thank you very much for this thread! I didn't know Poser even existed and was looking for a way to do some animated sprites for my game. After a couple nights with Poser I love the app.I'm going to sit down and try to render out some images this weekend and import them into T2D.
Thanks!!
Torque Owner Philip Mansfield
Default Studio Name
I did render out a whole set of of the Mannequin Man animations and posted them up for people to use as free sprites in their games.
Is there any chance you'd release your "fancy whizbang Animated Sprite Maker"?
Currently I render out each frame from Poser, open it up in PSP, and draw a pink dot in the top left corner. Then I copy and paste each image into a new PSP image and go back and remove the pink dots. It's a bit of a mission when you have a load of sprites to do (typically each of my sprites so far has 20 frames or so).