How to Make Animations in Gamesalad

jblb2424jblb2424 Member Posts: 65
Hey Guys :D 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! :D By the way the animations i need are run, jump, and shooting arrows with a bow :)

Comments

  • JohnPapiomitisJohnPapiomitis Member Posts: 6,256
    you make the animations in whatever art program you want, export each frame of the animation as a seperate png, then put them in a animate behavior

    cheers



  • jblb2424jblb2424 Member Posts: 65
    Thanks, would you know any of the art programs out there that i can use?
  • CloudsClouds Member Posts: 1,599
    "Thanks, would you know any of the art programs out there that i can use?"

    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

  • jblb2424jblb2424 Member Posts: 65
    wow, i didn't know there were so many programs to choose from, thanks so much :D
  • SpriteAttackSpriteAttack Member Posts: 524
    edited January 2012
    I would suggest going with something a little easier and less expensive than 3DS, Houdini, Maya, Cinema4D or AfterEffects - unless you are in for a steep learning curve and deep pockets.

    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!
  • CloudsClouds Member Posts: 1,599
    @ jblb2424

    "wow, i didn't know there were so many programs to choose from, thanks so much :D"

    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.
  • MotherHooseMotherHoose Member Posts: 2,456
    @jblb2424

    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
  • angelineliewangelineliew Member, PRO Posts: 1
    Hi there! I am new to GameSalad. I am not sure how to use the template to create a game.Is there any link where there are videos or manual to teach new members step by step how to create games using the template in GameSalad? Thank you.
  • kaye1989kaye1989 Member Posts: 1
    I would suggest going with something a little easier and less expensive than 3DS, Houdini, Maya, Cinema4D or AfterEffects - unless you are in for a steep learning curve and deep pockets.

    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!
    I checked on your blog and it's really awesome! Thank you for being helpful :)
  • JayReiterJayReiter TexasMember Posts: 88

    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 :smile: ) 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!

  • JayReiterJayReiter TexasMember Posts: 88

    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.

  • SocksSocks London, UK.Member Posts: 12,822
    edited March 2014

    @Jay Reiter said:
    . . . . How do I manipulate the size of each individual sprite during a given animation?

    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 ! :smile: ), 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 !

  • JayReiterJayReiter TexasMember Posts: 88

    Thanks, Socks. By "sprite" I meant image in the Actor.

  • JayReiterJayReiter TexasMember Posts: 88

    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.

  • JayReiterJayReiter TexasMember Posts: 88

    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."

  • JayReiterJayReiter TexasMember Posts: 88

    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?

  • SocksSocks London, UK.Member Posts: 12,822
    edited March 2014

    @Jay Reiter said:
    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.

    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.

  • SocksSocks London, UK.Member Posts: 12,822
    edited March 2014

    @Jay Reiter said:
    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?

    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.

  • SocksSocks London, UK.Member Posts: 12,822

    @Jay Reiter said:
    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.

    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.

    @Jay Reiter said:
    Plus I want to have slightly different parameters (attributes?) for the robot mode vs. jet mode. Any ideas on how to do these things?

    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).

    @Jay Reiter said:
    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?

    You can do whatever you wish, either way should work just fine.

  • JayReiterJayReiter TexasMember Posts: 88

    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.

  • SocksSocks London, UK.Member Posts: 12,822

    @Jay Reiter said:
    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

  • PhilipppuusPhilipppuus Member Posts: 62

    You can do it also with CS5 / CS6 Flash and than exporting in png's Files :-)

  • james courtneyjames courtney Member Posts: 13

    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

  • JiggleboxJigglebox Member Posts: 63

    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.

  • JayReiterJayReiter TexasMember Posts: 88

    @Philipppuus said:
    You can do it also with CS5 / CS6 Flash and than exporting in png's Files :-)

    That's exactly what I did. :smile:

  • WMS_GS117WMS_GS117 Member, PRO Posts: 8

    hey I'm using Piskel but it won't work and I tried to make a GIF but it won't work

  • jamie_cjamie_c ImagineLabs.rocks Member, PRO Posts: 5,772

    @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.

Sign In or Register to comment.