Animation

Introduction

Animation and animations manager.

  • Author: Richard Davey

Usage

Animation manager

Add animation

scene.anims.create({
    key: '',
    frames: [],
    defaultTextureKey: null,

    // time
    delay: 0,
    frameRate: null,
    duration: null,
    skipMissedFrames: true,

    // repeat
    repeat: 0,              // set to (-1) to repeat forever
    repeatDelay: 0,
    yoyo: false,

    // visible
    showOnStart: false,
    hideOnComplete: false
});
  • frames : An array of {key, frame}
    • Properties
      {
          key: '',
          frame: '', // string, or number
          duration: 0,
          visible: true
      }
      
    • Every frame in the atlas
      scene.anims.generateFrameNames(key);
      
    • Frame sequence indexing from start to end
      var config = ;
      scene.anims.generateFrameNames(key, 
      {
          prefix: '',
          start: 0,
          end: 0,
          suffix: '',
          zeroPad: 0,
          // outputArray: [], // Append frames into this array
      });
      
      • prefix + Pad(i, zeroPad, '0', 1) + suffix, i: start ~ end
    • Custom frame sequence
      var config = ;
      scene.anims.generateFrameNames(key, 
      {
          prefix: '',
          suffix: '',
          zeroPad: 0,
          frames: [ ... ]
          // outputArray: [], // Append frames into this array            
      });
      
      • prefix + Pad(frames[i], zeroPad, '0', 1) + suffix

Remove animation

scene.anims.remove(key);

Play animation

  • Play
    scene.anims.play(key, children);
    
  • Stagger play (delay play)
    scene.anims.staggerPlay(key, children, stagger);
    
    • children : An array of Game Objects to play the animation on
    • stagger : The amount of time, in milliseconds, to offset each play time by

Pause all animations

scene.anims.pauseAll();

Resume all animations

scene.anims.resumeAll();

Reverse animation

scene.anims.reverse(key);

Has animation

var exists = scene.anims.exists(key);

Export/load

  • Export JSON
    var json = scene.anims.toJSON();
    
  • Load from JSON
    scene.anims.fromJSON(json);
    
    • Load JSON in preload stage javascript scene.load.json(key, url);
    • Load animation in preload stage
      scene.load.animation(key, url);
      

Events

  • On add animation
    scene.anims.on('add', function(key, anim) {});
    
  • On remove animation
    scene.anims.on('remove', function(key, anim) {});
    
  • On pause all animations
    scene.anims.on('pauseall', function() {});
    
  • On resume all animations
    scene.anims.on('resumeall', function() {});
    

Animation object

var anim = scene.anims.get(key);

Add frame

  • Append frames
    anim.addFrame(frame);
    
    • frame : scene.anims.generateFrameNames(key, config)
  • Insert frames at index
    anim.addFrameAt(index, frame);
    
    • frame : scene.anims.generateFrameNames(key, config)

Remove frame

  • Remove frame at
    anim.removeFrameAt(index);
    
  • Remove frame
    anim.removeFrame(frame);
    

Get frame

  • Has frame index
    var HasFrameAt = anim.checkFrame(index);
    
  • Get frame at index
    var frame = anim.getFrameAt(index);
    
  • Get last frame
    var frame = anim.getLastFrame();
    

Export

  • Export JSON
    var json = anim.toJSON();
    
    or
    var jsonString = JSON.stringify(anim);
    

Events

  • On start
    anim.on('start', function(currentAnim, currentFrame, sprite){});
    
  • On restart
    anim.on('restart', function(currentAnim, currentFrame, sprite){});
    
  • On complete
    anim.on('complete', function(currentAnim, currentFrame, sprite){});
    
  • On repeat
    anim.on('repeat', function(currentAnim, currentFrame, sprite){});