Experimental Animation Technique

#1 Looks good. For a side scroller type game though, you'd probably have to render it a lot smaller so it didn't occupy so much of the screen. Of course that means you're going to start losing a lot of detail and might have to rethink the skin on the character.

But that's just my comments, it's still more than I've done trying to import a 3d character into TGB.

#2 Hey Mark, thanks for the comment. Yeah, I did shrink it down smaller, but it looked very messy in that graphical style. However, it looks great in its original form (before I applied a filter, as seen above) when reduced in size! You're right, I'm planning to make a side-scroller but at the moment I am experimenting with various graphical techniques before I even touch TGB. I'm glad to see that there are so many free 3D character models and assorted prefabs available, I could use this technique on all 3D objects which would both save me alot of time (I aint great at art) and also provide me with lots of content for my levels. Just thought that people may be interested in this technique!

Regards,
Niall.

#3 @Niall, I think it's a great technique -- I've been toying with the idea of trying to convert 3d models to 2d for TGB and was wondering how best to do it ...

For an RPG or RTS, you could do this, focusing the camera on all four sides of the character to show Up, Down, Left and Right movement along the tile map ... for example.

It also looks like it allows for much cleaner animations, rather then the generic 4 sprite animations you see on alot of these RPG websites that have 'Sprite Character Sets' ... and, depending on the game, and what not ... you can have alot or a little detail ...

Very nice -- thank you --

#4 What filters have you been using on the model? Did you add any to the texture?
I really like the result you have there and a game in that style would be pretty cool.

#5 This is essentially the technique we used in the Adventure Kit. It does work well even with detailed characters.

#6 Naill it's a greate job I like your idea but I wont to ask you 2 question:

1- colud you explain or at least point us to a site that explain how to collect the images inside photoshop and constract the animation in imageReady.

2- colud you please tell us where can we found free 3d models.

thanks in advance.

and Best Regards

#7 @David - thanks, hope it comes in handy for you. If you need any help or have any questions, just get in touch.

@Brian - I only used one Photoshop filter, Poster Edges, I even left it on its default settings!
For gameplay purposes I'll be using characters alot smaller than this and as I said, the sprite tends to turn into mush when using that filter. I'll play around with it later today and see if I can come up with something more suitable, but I definately want a "style."

@Tom - Care to share any tips? Taking screenshots of the character in the model viewer and then cutting it out and to size can be time consuming!

Regards,
Niall.

#8 @Niall - To capture the screens we wrote a quick and dirty tool in TSE. It would load a DTS and set it up for each animation, step thru the animation, and capture the right amount of frames for each. After that we had some nice high resolution frames to work from. The rest was a bit more manual, but our artist here is a Photoshop master and automated alot of it.

#9 @Firas - Sorry I didn't respond to your post earlier, I was reading this thread on a Windows Mobile device and missed your post.

Firas, I just took screenshots of the 3D model after I had him positioned within the 3D model viewer application, simply by using the "print-screen" key found on your keyboard, or if you're on a Mac, there's a built in application that can capture your screen. Once you press the "print-screen' button, the screen is stored in memory, open Photoshop, File->New (accept file dimensions, they will match the size of the screenshot in memory) then Edit->Paste. Next use the rectangular selection tool to cut out your character. I also used the magic wand to clean up other areas. I did this for all images in the animation, saving each image as I go along as a PSD file. ImageReady can then import an entire folder which will construct the animation, Import->Folder (or something similar). If you want, apply a Photoshop filter prior to moving over to ImageReady, I created a Photoshop action, then batch processed all of the images into a new directory (thus keeping the original images intact).
These are basic image editing techniques, therefore I recommend you consult your application's documention to perform these tasks.

TIP: I turned on the grid view within the model viewer, therefore everytime I chopped up the image I had a reference for every frame.

For 3D models, there are plenty of resources on the Internet, don't forget that there are free resources on the GarageGames site too!
Milkshape (Windows) is a popular model and animation tool, bring a 3D model into this application, rig it for animation and use the process I described above.
I am also currently researching possibly using Poser for character creation and animation if I were to continue using my technique for a full game.

Hope this info helps.
@Tom - Nice trick, is there any chance you'd care to share this tool with the community (free?!) It's save me a considerable amount of effort. I'm sure it'd be appreciated by not just me, but by the community.


Regards,
Niall.

#10 Hmmmm... great idead Niall. I too was trying to convert some of my 3D characters to 2D being as "painless" as possible. I'll have to try the "print screen" method.. although I want to add some diagonal movement to my 2D peeps which only requires a few more screen shots. Not sure but can you render a character in some 3D apps and save that image as a .png or similar type????... just wondering... since I don't know the quality, if it matters much, of the "print screen" shot.

thanks,
Jaipee

#11 I can't model or draw to save my life, so use Poser for everything I render. It can make a movie where it exports every frame as a PNG (complete with transparency). I stitch those together using GlueIT and then presto. If any tweaks are needed, I can do it PaintShop Pro.

Takes a lot of the pain out of creating art assets :)

#12 @ T.J. - I think Philip answered your question! :) Although if I come across any free applications that do it, I'll be sure to let you know.

@ Philip - Yeah, I was considering Poser myself, so I left for work this morning with my machine downloading the demo to check if it's a viable option.

But what's great about doing all of these kind of techniques, is that you can apply it to anything! Need a good looking car for your game but can't draw or can't find any suitable free sprites? Download a free model and work away using these techniques until you're happy with your results! I'm definately considering adapting these techniques for my project. I might go for a hand drawn / cell shaded look simply by Photoshopping all of the artwork, maybe even some particle effects and loading them in as animations instead, just to achieve a certain look (without having to purchase the source and write my own renderer).

Regards,
Niall.

#13 Sounds cool !!! I hear a lot of good things about Poser... think I'll check out a demo also and see how it feels... thanks guys!!!

... by the way Niall your "soldier guy" looks great!!!

#14 That's cool. I'm pretty sure that how Rare did the Donkey Kong Country series of games. :)

depending on the app you use to get the model to images, you could probley even do the cell shaded look right in the app. That might even look better.

You might even be able to speed this up by saving the animation as an uncompressed avi/tga sequence then loading it in to a video app (vegas, premiere, etc), chromakeying out the background & exporting png's with alpha channels. You could even resize it in there. And apply your FX. would probley go faster (and be a LOT easier) then doing each frame in p-shop (in vegas you could make a script that batch processes all this too).

Poser 5 is free for the next 4 days too. Check out the software forum.

#15 @ T.J. - Thanks, but I didn't model it or anything! Just experimenting as I said.

@ Stephen - Thank for the tips, I'll be sure to look into everything!

In the meantime, I brought the animation into Flash and converted it from raster to vector based - instantly gives it a kind of cell shaded look - with some minor colour correction it'd look pretty cool!

Here's the original animation:

And here's the vector based animation:

Let me know what you guys think - I'm definately looking for input here, thanks again.

Regards,
Niall.

#16 Whoa!! this is a great example of a raster vs vector animation. I like the "vector" man cause for me the cell shaded look seems to project more action potential for this character.... like "vector" man will kick "raster" mans butt... even without the colour correction because you can almost imagine how cool he will be with any colour corrections. cool stuff. BTW - your experimenting looks great :) Also - Poser5 free download!!! woohoo!! Free software is always cool...

#17 Very nice! :) Love the vector graphics.

I ran your origional through Vegas. Here's two variations of what I came up with:

know what would be cool? You dress up as the character you want, record it & then toon look that. :)

I upped th red's a little bit so they would stand out more.

#18 @Niall, I think Adobe Illustrator has a slightly better Vectorization system that Flash, though I'm not sure -- I haven't played with either in over a year so I'm unsure of what CS2 brought to the table over the latest version of Flash.

I definately like the vectorized looked -- I toyed around with it in Illustrator for quite some time.

@Stephen, the 'dress up and play picture time' comment is actually quite amusing, I've done that before -- as stated above, I would throw on old halloween customs and take photos and vectorize them just to see what I could accomplish -- wish I still had those images, some of them were actually quite nice.