CAAT.Actor

Sprites Animation

CAAT offers fine grained sprite animation control with the methods:

  • addAnimation( name, images_array, time, onAnimationEndCallback )
  • playAnimation( name )
  • For example, the following code:

            var reset= function(spriteImage, time) {
                spriteImage.playAnimation("stand");
            };
    
            var si= new CAAT.Foundation.SpriteImage().initialize( image, 21, 7).
                    addAnimation("stand",   [123,124,125, 126,127,128,129,130,131,132], 100).
                    addAnimation("fall",    [0,1,2,3,4,5,6,7], 100, reset).
                    addAnimation("wall_ud", [74,75,76, 77,78,79,80,81], 100).
                    addAnimation("wall_lr", [82,83, 84,85,86,87,88,89], 100).
                    addAnimation("tidy",    [42,43,44,45,46,47,48, 49,50], 100, reset).
                    addAnimation("die",     [68,69, 70,71,72,73], 100, reset).
                    addAnimation("jump",    [95,94,93,92,91, 90], 100, reset).
                    addAnimation("run_b",   [96,97, 98,99,100,101,102,103,104, 105,106], 30).
                    addAnimation("run_f",   [122,121,120,119, 118,117,116,115], 30).
                    addAnimation("sad",     [26,27, 28,29,30,31,32,33], 100);
    
            actor.setBackgroundImage(si).playAnimation("fall");
            

    will create an spriteImage instance with several animations. The animations are defined in this case as indexes into an array of 21x7 elements over the image supplied as parameter. For example, the "fall" animation uses the following animation [0,1,2,3,4,5,6,7] and will rotate among these images every 100 milliseconds. Additionally, when it has ended playing the sequence, the callback function "reset" will be invoked.

    It is safe to change an animation in the callback function, and should be the preferred way to go.

    In the sample, we're using addAnimation directly on the SpriteImage instance. This is valid since an actor's addAnimation and playAnimation methods simply delegate the call to their background image SpriteImage instance.

    It is important to note that a shared SpriteImage object instance via a call to its getRef() method, shares the sprite's animations definition with the original SpriteImage object. This means that changing a animation duration or the sprite sequence for an SpriteImage will be changed for all actors sharing that SpriteImage.

    Click here for a complete sprite management example.