About Animation

SwinGame allows you to create complex animations very easily, To get started here are a few things you need to know about Animations.

Level

Beginner

Read these first

About Images | About Resources

Details

Animation

Animations in SwinGame are similar to a flip book, each image in the flip book is displayed for a short amount of time before the next image is displayed.

Animations are made up of frames, frames are created and used in an animation script. They are linked together to create an animation. Animation scripts are powerful because they are not linked to a particular image, that is, an animation script can be applied to any number of bitmaps. This means it's possible to write an animation to make a character walk and apply it to all your characters in a game.

Animations are usually applied to a sprite, however you can create and play an animation without using a sprite by interacting with the animation directly, a full list of functions and procedures can be found in the API.

Frame Vs Cell

Frames are used in SwinGame to control the speed and order of an animation, each frame has it's own cell that it draws to the screen.

Cells are part of a bitmap image and are defined when the image is loaded (either through a bundle or in your code). Each cell is numbered from the top left to bottom right. These are used in frames to tell SwinGame what to draw to screen during the duration of the frame.  

As you can see this one image is actually a series of smaller images, each smaller image is a cell. For example, the first row show the character walking towards the viewer, while the last row show the character walking away from the viewer. To make an animation we need to link these images together in a meaningful way, this is done using an animation script.

 Frog Animation Bitmap


All About Animation Frames and Cells

Animation Frames


Frames have an identifier, cell number, duration, and a link to the next frame. They are incredibly powerful and can be linked together in any order to create different animations from the same frames.

The identifier of a frame is used by SwinGame to connect frames together into a sequence. The cell number is used by SwinGame to get the image that is displayed when the animation is playing that frame. The duration is the number of times the animation needs to be updated before the next frame will be played. The next frame is the next frame that is played in the animation. If this field is omitted then the animation ends after the current frame has finished.


The time taken for each frame will vary from system to system unless it is controlled by Timers


The following code section is an example of a basic animation script that begins from frame 0 and ends after frame 3 is finished. 

//f: identifier, cell number, duration, next frame) 
 
    f: 0, 4, 5, 1 
    f: 1, 5, 5, 2 
    f: 2, 6, 5, 3 
    f: 3, 7, 5, 
    //It can also be written using set-notation, as in the following example: 
    f: [0-3], [4-7], 5, 
    // or 
    f: [0, 1, 2, 3], [4, 5, 6, 7], 5, 

This code example shows how to create a looping animations using SwinGame in two different ways.


All About Animation Frames and Cells


Animation With Sound


Animations can be played with sound as well, when sound is played in an animation it is played as soon as the frame starts playing and only plays once for that frames duration. SwinGame will manage the loading of the sound for you (like it does in a bundle).


An example of this is written below, it plays footsteps.wav whenever the frame with the identifier 0 is played.

  
    //s: Identifier, SoundName, Filename 
    s: 0, 'FootStep', 'footsteps.wav' 


All About Animation with sound

Animation with Vectors


Vectors allow you to apply a velocity vector to an animation or sprites when they're updated. This vector is applied to the current position of the sprite, it is applied every UpdateSprite call, and can be applied manually to an animation. Vectors can be applied to a set of frames using set notation ([low – high]).


The following animation script snippet will move the sprite +5 pixels in the x and y direction every SpriteUpdate while the animation is on the 0 frame.

  
    //v: identifier, change in x velocity, change in y velocity 
    v: 0, 5, 5  


All About Animation with Vectors