Animation

Introduction

Animation and animations manager.

  • Author: Richard Davey

Usage

Animation manager

Add animation

scene.anims.create({
    key: '',
    frames: [],
    skipMissedFrames: true,
    defaultTextureKey: null,
    startFrame: 0,

    // time
    delay: 0,
    frameRate: null,
    duration: null,
    timeScale: 1,

    // 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
Add from Aseprite

Aseprite

scene.anims.createFromAseprite(key);
// scene.anims.createFromAseprite(key, tags);
  • key : The key of the loaded Aseprite atlas.
  • tags :
    • undefined : Load all tags.
    • Array of string tag : Load these tags.

Remove animation

scene.anims.remove(key);

Delay between two animations

  • Add
    scene.anims.addMix(animA, animB, delay);
    
    • animA, animB : String key of an animation, or an instance of animation.
  • Remove
    scene.anims.removeMix(animA, animB);
    // scene.anims.removeMix(animA);
    
  • Get
    var delay = scene.anims.getMix(animA, animB);
    

Play animation

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

Pause all animations

scene.anims.pauseAll();

Resume all animations

scene.anims.resumeAll();

Has animation

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

Export/load

  • Export JSON
    var json = scene.anims.toJSON();
    
  • Load from JSON
    scene.anims.fromJSON(json);
    // scene.anims.fromJSON(json, clearCurrentAnimations);
    
    • 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);