How to Make Animations in Gamesalad
jblb2424
Member Posts: 65
Hey Guys 
I'm new to Gamesalad and I'm well on my way to creating my first game, except i have one problem. I am up to the point where i have to start making animations. I have no experience with making animations at all and there are nearly no tutorials or forum threads I've found that were helpful. Would anyone tell me the proper steps in making a quality animation or post a link to a tutorial online that would help me make one? Thanks! By the way the animations i need are run, jump, and shooting arrows with a bow 
I'm new to Gamesalad and I'm well on my way to creating my first game, except i have one problem. I am up to the point where i have to start making animations. I have no experience with making animations at all and there are nearly no tutorials or forum threads I've found that were helpful. Would anyone tell me the proper steps in making a quality animation or post a link to a tutorial online that would help me make one? Thanks! By the way the animations i need are run, jump, and shooting arrows with a bow
Comments
cheers
Cinema4D
Photoshop
Gimp
Shake
Softimage
Motion
LightWave3D
3DS
DAZ
Poseur
Swift 3D
Illustrator
Adobe Flash
Kinemac
Blender
Adobe After Effects
Bryce
Houdini
Maya
Pen & paper + scanner
. . . . etc etc
My advice would be to start with inkscape - free and rather versatile http://inkscape.org/ - read the tutorial posted here or in my blog
http://2dgameartforprogrammers.blogspot.com/
(this post covers animation)
http://2dgameartforprogrammers.blogspot.com/2011/11/character-animation.html
I would advice to start with the first tutorial covering the basics and work from there.
Using inkscape in conjunction with gimp is a free and good alternative to illustrator and photoshop. It will take some time and parctice to learn but if you stick to it it's time well spend.
Good luck!
"wow, i didn't know there were so many programs to choose from, thanks so much
Yep, there are hundreds of applications that you can produce animation in, everything from complex CG to flat 2D stuff, from flat graphic to sketchy hand drawn stuff, check out SpriteAttacks tutorials (above) and inkscape . . . . a brilliant starting point.
this is as brief as I could make it: 5 Steps to Sprite Animation
and, for your own sake, learn from: SpriteAttack's Character Animation … and ease your learning curve!
MH
Hello. I'm building my first game (second if you count the Basic Shoot Em Up). I'm working on an animation for my main character. I want him to change from a ship to robot by hitting a given key (I'm using TAB for the moment). I've created a Rule, added the Key Condition, made TAB the key when pressing down, and added the Animate Behavior. I successfully loaded in my .png files into the Animate Window (in the proper order, it would seem
) and the animation works. Now, I noticed that the individual sprites for the transforming animation are a bit wonky in size when I play the scene out and hit TAB. I couldn't find a way to alter the size of each individual sprite for this particular animation. How do I manipulate the size of each individual sprite during a given animation?
I'm also trying to figure out how to treat the robot form of this actor as a separate actor from the ship one. Or at least give different parameters to the robot version of the actor versus the ship. For example, I'd like the ship version to be a little faster but have a lower defense than the robot. I want the robot to be a little more sluggish in maneuverability but be able to take more hits than the ship. How do I go about doing that?
Lastly (for now), I want to be able to have the robot be able to change back into ship mode. Do I create a new Animate Behavior to do this? Or is there a way to simply reverse the current Animate Behavior..? I think the answer to this last question will depend on whether or not I have to create a new actor for the robot version of this character, or if it's simply a set of Rules. Thanks, all!
Oh, one other thing. I noticed in order to get the animation to complete its cycle I have to keep the TAB button pressed for the duration of the animation cycle or else it cuts off as soon as you release TAB. I just want to be able to press and release TAB and the animation cycle goes through to completion. How do I do that? Thanks.
I'd try and stick to standard GS terms, it helps remove any ambiguity from the question . . . by 'sprite' do you mean 'actor' or do you mean 'image' ? GameSalad has actors, onto which you can apply images, but it has no 'sprites' ?
Interchangeable terms for GS concepts just add confusion (for me at least !
), I once read a post once by someone who was using 'actor', 'image', 'sprite', 'character' and 'hero' interchangeably throughout his question, it made a simple issue a lot of hard work to understand, the question went unanswered if I remember correctly.
Also I think if you jettison non standard terms, questions can often start to answer themselves, or at least start to become clearer.
Personally I'd make your animation image sequence a consistent size, instead of each image in the sequence being a different size (which I suspect is what's going on at the moment), the other option is to change your actor's size for every frame of the animation sequence to match the image size, this is a fairly insane way of working as not only will you need to change the actor's size anything up to 30 times a second you will also need to be constantly changing the actor's X and Y position to compensate for the changing size !
Thanks, Socks. By "sprite" I meant image in the Actor.
And as far as making the animation images a consistent size, that's completely impossible due to the shape of the before and after images. Again, this animation is a transformation from ship to robot and back again. The ship is wide (x axis) and short (y axis), where the robot is tall (y axis) and thin (x axis). The very nature of the animation cycle changes the size and overall shape of the actor. So are you suggesting the only way to correct this problem is to resize the actor with each frame of the animation? I find this to be difficult to believe as it seems incredibly inefficient on Gamesalad's end.
I may have just figured out a work around here. Please let me know if my logic is sound:
After re-watching the Gamesalad Cookbook video on importing an image, I was reminded that there are certain parameters that an image falls into, regardless of its actual size. For example, if one of my images is 170 pixels by 102 pixels, the software will automatically acknowledge the overall image as 256x256 because that's the larger size that the image dimensions fit into. So if I were to create a document that's 256x256 (I'm using this dimension for simple example's sake), and fit all of my animation images into that document and keep them all centered, would this then fix my problem?
Socks, when you mentioned before a "consistent size," is this what you were referring to?
BTW, I'm using Photoshop for my sizing, hence the term "document."
OK! The animation cycle works perfectly. Now the problem is trying to figure out how to press the tab key and getting the animation to complete even if the key is released. I just want to be able to press and release the key and have the animation play through. Plus I want to have slightly different parameters (attributes?) for the robot mode vs. jet mode. Any ideas on how to do these things? Do I need to make a separate actor for the robot? Or is there a way to manipulate the current actor after the animation is done with its cycle?
Yet it's true.
If you think about it, what other way could there be, you either need to keep the image sequence frame size consistent or change the actor size (and position) to match each frame.
Yes, make your animation image sequence a consistent size, instead of each image in the sequence being a different size.
I'm not sure why you'd want to centre each image within this 256 x 256 pixel canvas size, generally speaking I'd leave each image where it needs to be rather than moving it to the centre of the canvas.
Imagine your animation is a small red ball that moves around the edge of a square, this fits perfectly within a 256 x 256 pixel canvas as the animation moves across the top edge left to right, then down the righthand side, across the bottom right to left and then up the lefthand side . . . . . but if you were to centre each image you would be effectively cancelling out the movement of the ball as each frame would now be a red ball in the centre of the screen and the animation would be static.
Basically each image needs to be left exactly where it is in the frame.
Make a boolean attribute for the actor - and then set up a rule that switches this attribute to true when the tab key is pressed - then set up another rule that says when this attribute is true then play the animation.
You want 'slightly different parameters (attributes?)' ? Not too sure what this means, you are stuck with the kinds of attributes currently available within GameSalad (integer, boolean, index etc etc).
You can do whatever you wish, either way should work just fine.
Thank you for all of your help here, Socks. I really appreciate it. I'm going to try your Boolean attribute suggestion for the Tab button animation dilemma tomorrow. I've been working on stage 1 designs and staring at a computer for way too long now. I'm afraid my brain's been turned to mush right now. lol.
I should have been more specific about the "slightly different parameters/attributes" comment I made. What I meant is (I think) different behaviors. For example, I want the ship to be a bit quicker in movement than the robot form. I want the robot form to be able to take more damage before being destroyed than the ship. That kind of stuff.
slightly different parameters/attributes
Ah! I see what you mean now, well like I say you can do that whichever way you like, personally I'd spawn a new actor (and destroy the old one) with all the new behaviours when you change between the different forms - but you could also set up the different behaviours all in one actor and trigger them when needed with a simple rule . . . . .
Example:
when attribute WhichForm? = Ship (then all the ship behaviours)
when attribute WhichForm? = Robot (then all the robot behaviours)
etc
You can do it also with CS5 / CS6 Flash and than exporting in png's Files :-)
I now know to never sit to read a thread without a very big mug of coffee at my side!! I animate with Photoshop as I love Photoshop, but lots of people would point me in other directions!!
James
i see a Ton of responses here and they are all great.
I would suggest using Gimp simply because its a nice image editing software that is free. If you see yourself using this type of thing for profit or just feel like it's worth it you can never go wrong with paying for Photoshop. However it's pretty expensive. I myself am paying for it on a monthly use for $20/month. This is nice because it allows me to use it when I need to instead of paying for the hefty full licence.
That's exactly what I did.
hey I'm using Piskel but it won't work and I tried to make a GIF but it won't work
@WMS_GS117, animation in Gamesalad is frame based so you need to create individual images for each frame of your animation and import those separately into Gamesalad for use. For example if you have an animated GIF, you'll need to save each frame of that gif as an image, import those into GS and put them back-together using an Animate Behavior.
Also keep in mind GS works best with the PNG image format.
http://jamie-cross.net/posts/ ✮ Udemy: Introduction to Mobile Games Development ✮ Learn Mobile Game Development in One Day Using Gamesalad ✮ My Patreon Page