8 – Adding Animation

The “animate” behavior in GameSalad allows you to specify a sequence of images (or “frames”) to play.  They can be played in a loop for a repeating animation, like if an actor is running, or a single time to show an action, such as jumping.  With creative use, animation can be a powerful tool to add polish and vibrancy to your game.
In this simple example, we can see an actor swinging his sword.
In the game, these images will loop at 10 frames per second to make it look like the actor is actually moving.  With creative use of rules, it’s possible to have unique animation sequences for actors when they are running, jumping, falling, and even standing still.

Animating your actors can add life and visual interest to your game.  In “Angry Birds”, the birds awaiting their turn in the slingshot don’t just sit there – they bounce, hop, and tweet their excitement.  This energy is contagious to your players!  Consider making your live creatures move around, even when they’re standing still; make the clouds drift by, and make the gold sparkle.

Placing animate behaviors into rules lets us choose how and when the animations play.  For instance:

In this image, you can see we’ve brought in an actor attribute – specifically, the attribute motion.linear velocity.x.  Our X-axis is horizontal, so what we’re checking here is whether the actor has “positive movement” along the horizontal plane.  In other words, it is moving right!  As a result, this animation will play whenever the actor moves to the right.  We can easily add additional conditions –for instance, checking if the actor is touching the ground, or that the actor has 0 Y-axis velocity (not falling or moving upwards).

Adjusting this for a “standing still” animation or a “falling” animation is simply a matter of changing out the rule conditions.  For instance, a “falling” animation might check if the Y-axis linear motion is less than 0 (more than 0 would be moving upward), and that the actor isn’t touching the ground.  Of course, we’d also want to change out the individual animation images to for ones that simulate falling.

Other interesting things we might do with animations could include explosions, menu flair, changes to a projectile mid-flight, and much more.  Experiment and see what you can come up with!  A few keys to keep in mind are to always use the same-size image for each frame of your animation, and use a naming convention that will help you keep them in the right order.