Animated sprites?

#1 www.garagegames.com/uploaded/code/7298.torque2dunofficialfaq.html#6

#2 Thanks, I'm gonna take a look at that...

#3 Hey Chris,

For some reason that FAQ tutorial never worked for me. It was only a couple of days ago I finally figured out how to get animations working.

Anyway, here's a simple set of code you can plug into the bottom of your client.cs file where it says "add your custom code here". Hopefully it should work and help you understand an animation at its simplest level:

datablock fxImageMapDatablock2D(lightningImageMap)
{
    mode = cell;
    cellWidth = 25;
    cellHeight = 51;   
    textureName = "~/client/images/lightning";
};

datablock fxAnimationDatablock2D(lightningAnimation)
{
   imageMap = lightningImageMap;
   animationFrames = "0 1 2 3 1 2 3";
   animationTime = 0.5; //seconds for animation to complete 1 cycle
   animationCycle = true; //loop?
};

$myAnimation = new fxAnimatedSprite2D() { scenegraph = t2dSceneGraph; };
$myAnimation.setPosition("0 0"); //here you can set attributes of the 
                                                     //animation such as
$myAnimation.setSize( "20 40" ); //position, size, rotation, etc.  
$myAnimation.playAnimation(lightningAnimation);

#4 Wow, thanks alot Matt...

Yeah, for some reason that FAQ tut wasn't working for me either. I still have questions regarding that tut and actually this one as well (even though I got this one you posted working in 5 seconds). So, you load one .png for the lightning, which is how I would do animations in SDL. But how are you specifying the source region of the bitmap for each different lightning frame? I couldn't figure that out with the other tut as well. Does T2D assume a string of frames on one bitmap for fxAnimatedSprite2D's and just know to cycle through them? Is that what cellWidth and cellHeight are specifying?

Thanks again.

#5

mode = cell;
cellWidth = 25;
cellHeight = 51;

thats the trick (from the code above). When it is cell mode, it breaks the total image into cells that are the size you specify. once you have the animated image setup, you setup an animation:

animationFrames = "0 1 2 3 1 2 3";

that tells it what order to play the frames in. You've basically split the one image up into a matrix. Its actually very simple to setup and fun to tweak. By specifying the order frames, you could play them out of order, backwards, forwards, well, you get the idea

#6 Insane... That's exactly what I needed to know. Now on this topic, is there any way to setup animations from a string of single images (a single bitmap per frame)? If so, how is this accomplished?

Thanks Ryan. :)

#7 I don't believe you can accomplish this with the current data structures, but you can assign any imageMap to an object at any time, so you could pretty simply build a small customized animation loop using schedules to load a sequence of single-frame images for an object. You obviously lose some of the capabilities of the built-in animation functionality, so I guess it depends on what you're looking to accomplish.

#8 Well, yes, you can set the imagemap at any time, but I find it preferable to keep the same structure. Let me explain:

In my expirementation, I set up animations as seperate png files. I have a walkleft.png, walkright.png, etc. for my character. I then setup the datablocks for each image, and then animation datablocks for each animation. I might also have a player standing image, which is just one frame. However, I set it up just like an animation (even though it is just one frame). That way, you can always do a $player.playanimation(animname); or whatever. I would post some code to explain exactly what i mean, but my laptop is at home, and I am at work. For me, it basically allows single images AND the sprite strips (for some reason, i like to keep each animation in a seperate file, probably not the most efficent way of doing so).

Like luke said, just changing the images to create an animation gives up alot of the benefits of the animated sprite (controlling the rate of the playback of the animation would be my biggest concern)

#9 Just for everyone's knowledge while we're roundabouts the subject:

Here's a link to the animspritemaker utility to bind a series of still images together to make an animation strip:

http://www.garagegames.com/index.php?sec=mg&mod=resource&page=view&qid=8200

Here's a link to a resource called "GlueIt" that does the same as mentioned above, but with a preview window to see your animation before you export the file. Glueit only works with .bmp files.

http://www.garagegames.com/mg/forums/result.thread.php?qt=29418

*AND* to save Tut's face here, his example in the FAQ probably did work at one time but as revisions were made to T2D (as we're still in Beta) something broke.

#10 Actually, I copy-pasted matts code verbatium, and it works for me :) (at least it did on stock 1.0.2, its so modified now)

Thanks for the links there. Hand assembling 32x32 sprites in GIMP was getting tedious.

#11 Incase anyone's interested, I hacked up a "better" tool that merges animation images all in one go and outputs the datablocks for them. (Which only need small changes)
It's at www.gamesforinsects.com/t2ddatablocktool.zip (Written in C# using SharpDevelop)


Quick guide:
A "direction" is all the tiles in a single horizontal block. "Frames per direction" is how many frames you have in a single direction.
ie: If I had 7 frames for left and 7 for right it will arrange the final image as
[left1...left8]
[right1....right8]

So you need to set FPD to however many frames in a direction, the "width/height" are just there for decoration, don't change them.

"imagemapname" and "animname" are the name of the imagemap and the animation name, the animname has 0-x added onto the end.

So hit select and select all the images you're adding, then go. If you want to change the animname use numerical up/down about the "jpg/png" selectors (which selects what image format it will output) to scroll up and down the directions.
NOTE: You need to hit enter inside that textbox for the change to take, then hit regenerate to the datablock.
Then just copy/paste the datablock.

PPS: Exceptions arn't handled, so if you do something in the wrong order it will crash!

#12 Thanks a lot for explaining. It made me figure out how to make the player (in Basic tut) animated.

Cool!

Markus