Animated sprites, image map. Gifs possible?
by John Slater · in Torque Game Builder · 12/04/2009 (1:41 pm) · 12 replies
Okay this makes me rage a little. I am trying to learn TGB, and I followed the platformer tutorial. It has this sprite sheet: http://tdn.garagegames.com/wiki/images/0/0c/Player.png
However, I already have a 9 frame player walk animation made. I have it saved as .gif, and as png sequence. I tried to create a similar sprite sheet in photoshop. Even if I put all the frames aligned to a line, so the feet of the character always touch the ground, it is always messed up when I create the cell imagemap.
Why can't I just load my ready and working gif animation, or png sequence? I can't align it. And even if I load a sprite sheet with transparent background, png with alpha channel, it just gives my sprites a white background, making it non-transparent.
I've fiddled around with it for over an hour now and I can't get this to work. Is there a proper way to create these sprite sheets so TGB picks them up correctly? In one tutorial about sprite creation such a tutorial is hinted, but I can't find it anywhere on the site or on google. All the sprite creation tutorials don't help me anything if what I want to make comes out messed up.
Can somebody explain me how to use it right? Or how to create celled sprite sheets that work with TGB.
However, I already have a 9 frame player walk animation made. I have it saved as .gif, and as png sequence. I tried to create a similar sprite sheet in photoshop. Even if I put all the frames aligned to a line, so the feet of the character always touch the ground, it is always messed up when I create the cell imagemap.
Why can't I just load my ready and working gif animation, or png sequence? I can't align it. And even if I load a sprite sheet with transparent background, png with alpha channel, it just gives my sprites a white background, making it non-transparent.
I've fiddled around with it for over an hour now and I can't get this to work. Is there a proper way to create these sprite sheets so TGB picks them up correctly? In one tutorial about sprite creation such a tutorial is hinted, but I can't find it anywhere on the site or on google. All the sprite creation tutorials don't help me anything if what I want to make comes out messed up.
Can somebody explain me how to use it right? Or how to create celled sprite sheets that work with TGB.
About the author
#2
Do you align them with a grid in photoshop?
I will try the tip with the power-of-two size, maybe thats what I did wrong. Thank you Mike.
Edit: Okay now the cells work, but it still isn't aligned. I have a walking cycle and every picture just skips around, I can't define a center or anything. The frames are also of a different size because the character is wielding a sword.
It just doesn't work at all. If I make the boxes smaller, the sword sticks through sometimes.
12/04/2009 (2:22 pm)
Yes I got so far that I tried around with the cells width and height. The problem then was that the character was not properly aligned, jumping around in the animation.Do you align them with a grid in photoshop?
I will try the tip with the power-of-two size, maybe thats what I did wrong. Thank you Mike.
Edit: Okay now the cells work, but it still isn't aligned. I have a walking cycle and every picture just skips around, I can't define a center or anything. The frames are also of a different size because the character is wielding a sword.
It just doesn't work at all. If I make the boxes smaller, the sword sticks through sometimes.
#3
So if you know each cell frame in the sprite sheet is going to be 128x128, for example, then yeah I would use the grid in photoshop or gimp to properly center a fixed point on the character. Going back to that ninja example, it seems like the body of the ninja is static and only the arms and legs are moving. So if the body is properly centered within each frame it would prevent the animation from jumping around within the cell.
12/04/2009 (2:34 pm)
Well, I'm not much of an artist so I don't really recall ever making my own sprite sheet. But I think I understand your issue.So if you know each cell frame in the sprite sheet is going to be 128x128, for example, then yeah I would use the grid in photoshop or gimp to properly center a fixed point on the character. Going back to that ninja example, it seems like the body of the ninja is static and only the arms and legs are moving. So if the body is properly centered within each frame it would prevent the animation from jumping around within the cell.
#4
12/04/2009 (2:42 pm)
Just saw your edit. I think the key is to make sure each frame is of the same size. So if your character with the sword takes up the largest amount of space, base the frame size of all the cells around that.
#5
And when I always align the picture to the center, they don't stay in rows but stick through the boxes. If I would align it to the hands or feet, or any other moving part, it would skip around again.
I have it already ready in my gif animation exported from flash, why doesn't it just work with this. :(
Edit: Saw your second post now. well that would be a possibility, but how do I find out which size every frame needs to have, since I have to put it on equal numbers like 512 x 512?
12/04/2009 (2:43 pm)
I'm trying to use the grid, but I don't know how I should do this. Of course the head moves up and down, and the body moves when walking, so I can't just use that as a fix point.And when I always align the picture to the center, they don't stay in rows but stick through the boxes. If I would align it to the hands or feet, or any other moving part, it would skip around again.
I have it already ready in my gif animation exported from flash, why doesn't it just work with this. :(
Edit: Saw your second post now. well that would be a possibility, but how do I find out which size every frame needs to have, since I have to put it on equal numbers like 512 x 512?
#6
If there is no point on the character that isn't static within each possible frame, what about aligning it to an imaginary ground since you mentioned it is a walking animation.
Found this thread with a program that makes sprite sheets. Never tried it myself but maybe it could be of some help to you. www.torquepowered.com/community/forums/viewthread/72539
12/04/2009 (2:57 pm)
Measure the size of your character. Find the frame where the character the widest and the tallest (can be in separate frames). So if at the widest point it is 146 pixels and at the tallest 206, for example, then you would have each frame be 256x256. Depending on the amount of frames you need, then have a sprite sheet that is 1024x1024 if you need up to 16 frames.If there is no point on the character that isn't static within each possible frame, what about aligning it to an imaginary ground since you mentioned it is a walking animation.
Found this thread with a program that makes sprite sheets. Never tried it myself but maybe it could be of some help to you. www.torquepowered.com/community/forums/viewthread/72539
#7
12/04/2009 (6:26 pm)
This is such a pain in the butt. It takes me so long to complete it. It was way faster for me to make an animated gif out of it. I hope they include the import of already animated sprites in the new T2D. 
#8
The cell size is entirely up to you and your animation, but must be the same for ALL cells.
There are many technical reasons for using a sprite sheet to speed up the frame rate of your game. Another technical detail is to keep the cell width in power of 8 pixels (8,16,32,64 etc...)
Nothing is free, sometimes you actually need to put some effort into your work ;)
Good luck.
PS. I do agree that an import function of various animation formats would be nice DS.
12/04/2009 (6:52 pm)
In photo shop I usually create a second layer containing the cell grid. Then it is easy to positioning each picture in it's own cell and see how it is aligned within the cell. This is a quite fast way to generate sprite sheets and gives you control over each individual cell.The cell size is entirely up to you and your animation, but must be the same for ALL cells.
There are many technical reasons for using a sprite sheet to speed up the frame rate of your game. Another technical detail is to keep the cell width in power of 8 pixels (8,16,32,64 etc...)
Nothing is free, sometimes you actually need to put some effort into your work ;)
Good luck.
PS. I do agree that an import function of various animation formats would be nice DS.
#9
What is the reason that you need to keep the width in power of 8 pixels?
Before I read your post, before I stopped for today, I tried it like this:
I aligned all my sprites in the cell, they all had the same width and height (I doubt it was in power of 8 pixels) and the whole walking animation was fine when you skipped through the pictures. However, when I imported it to TGB and set the cell to the same width and height, it STILL was messed up. The character was jumping back and forth while walking, and even up and down sometimes although it was basically perfectly aligned before. :( Any thought of why this could be? Could this be because the width is not like you said?
By the way, how can you actually change the grid of photoshop? I would like to have it in the size of my cells. In Flash you can just set its height and width, but in Photoshop I didn't find it.
Thanks for helping.
12/04/2009 (7:46 pm)
Oh believe me I do put effort into my work, I was trying all day to get it to work. So don't think I'm just complaining. ;)What is the reason that you need to keep the width in power of 8 pixels?
Before I read your post, before I stopped for today, I tried it like this:
I aligned all my sprites in the cell, they all had the same width and height (I doubt it was in power of 8 pixels) and the whole walking animation was fine when you skipped through the pictures. However, when I imported it to TGB and set the cell to the same width and height, it STILL was messed up. The character was jumping back and forth while walking, and even up and down sometimes although it was basically perfectly aligned before. :( Any thought of why this could be? Could this be because the width is not like you said?
By the way, how can you actually change the grid of photoshop? I would like to have it in the size of my cells. In Flash you can just set its height and width, but in Photoshop I didn't find it.
Thanks for helping.
#10
Could you link the sprite sheet in question here? Maybe someone here can mold it into shape.
12/04/2009 (10:20 pm)
Powers of two (256x256, 512x512 etc.) are necessary for optimal VRAM usage. TGB will "optimise" your image to the next size that fits, so if your image is 280x300, you'll get a 512x512 image anyway (1MB).Could you link the sprite sheet in question here? Maybe someone here can mold it into shape.
#11
I imported all my images saved from Flash into Gamemaker. Now what the image editor in there does is, once you have cropped every image, it creates the animation and places all the images in a cell that is exactly the size as the biggest one, and for some reason every sprite is just at the right place. When I export it to single images, and combine them into a sprite sheet in GlueIt, it works like a charm. When I did the same basically in Photoshop, just manually, it didn't work. Even though the frames were all looking right, it was messed up when I created the animation in TGB.
Does anyone know another program that does it that easily? Because Gamemaker saves to .bmp
Another thing I don't get is, how to make your animations background transparent in TGB. I can't choose a color to make transparent. Do I have to save it was a transparent .png?
12/05/2009 (8:11 am)
Alright I got it to work although not in the best way, maybe somebody can tell me a better solution:I imported all my images saved from Flash into Gamemaker. Now what the image editor in there does is, once you have cropped every image, it creates the animation and places all the images in a cell that is exactly the size as the biggest one, and for some reason every sprite is just at the right place. When I export it to single images, and combine them into a sprite sheet in GlueIt, it works like a charm. When I did the same basically in Photoshop, just manually, it didn't work. Even though the frames were all looking right, it was messed up when I created the animation in TGB.
Does anyone know another program that does it that easily? Because Gamemaker saves to .bmp
Another thing I don't get is, how to make your animations background transparent in TGB. I can't choose a color to make transparent. Do I have to save it was a transparent .png?
#12
12/05/2009 (8:21 am)
right, you need to use png and real transparency as well as using the corresponding blend setup 
Associate Mike Lilligreen
Retired T2Der