Sprite

Introduction

Display of both static and animated images, built-in game object of phaser.

  • Author: Richard Davey

Usage

Load texture

Texture for static image

scene.load.image(key, url);

Reference: load image

Load atlas

Atlas for animation images

scene.load.atlas(key, textureURL, atlasURL);

Reference: load atlas

Add sprite object

var sprite = scene.add.sprite(x, y, key);

Add sprite from JSON

var sprite = scene.make.sprite({
    x: 0,
    y: 0,
    key: '',

    // angle: 0,
    // alpha: 1
    // flipX: true,
    // flipY: true,
    // scale : {
    //    x: 1,
    //    y: 1
    //},

    // anims: {
        // key: ,
        // repeat: ,
        // ...
    // },

    add: true
});
  • key :
    • A string
    • An array of string to pick one element at random
  • x, y, scale.x, scale.y :
    • A number
    • A callback to get return value
      function() { return 0; }
      
    • Random integer between min and max
      { randInt: [min, max] }
      
    • Random float between min and max
      { randFloat: [min, max] }
      

Custom class

  • Define class
    class MySprite extends Phaser.GameObjects.Sprite {
        constructor(scene, x, y, texture, frame) {
            super(scene, x, y, texture, frame);
            // ...
            scene.add.existing(this);
        }
        // ...
    
        // preUpdate(time, delta) {
        //     super.preUpdate(time, delta);
        // }
    }
    
    • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
      • If the Game Object renders, it will be added to the Display List.
      • If it has a preUpdate method, it will be added to the Update List.
  • Create instance
    var sprite = new MySprite(scene, x, y, key);
    

Other properties

See game object

Animation

Create animation

See Add animation section.

Load animation

sprite.anims.load(key);
// sprite.anims.load(key, startFrame);

Play animation

  • Play
    sprite.play(key);
    // sprite.play(key, ignoreIfPlaying, startFrame);
    
    or
    sprite.anims.play(key);
    // sprite.anims.play(key, ignoreIfPlaying, startFrame);
    
    • Set current frame
      sprite.anims.setCurrentFrame(frame);
      
    • Set playback progress
      sprite.anims.setProgress(t); // t: 0~1
      
  • Play in reverse
    sprite.anims.playReverse(key);
    // sprite.playReverse(key, ignoreIfPlaying, startFrame);
    
    • Reverse the Animation that is already playing
      sprite.anims.reverse(key);
      
  • Chain next animation
    sprite.anims.chain(key);
    
    • Reset
      sprite.anims.chain();
      
  • Set to next frame
    sprite.anims.nextFrame();
    
  • Set to previous frame
    sprite.anims.previousFrame();
    
  • Time scale
    sprite.anims.setTimeScale(value);
    

Pause

sprite.anims.pause();
// sprite.anims.pause(atFrame);

Resume

sprite.anims.resume();
// sprite.anims.resume(fromFrame);

Stop

sprite.anims.stop();
or
sprite.anims.stopAfterDelay(delay);
or
sprite.anims.stopOnFrame(frame);

Restart

sprite.anims.restart();
// sprite.anims.restart(includeDelay);

Repeat

  • Set repeat
    sprite.anims.setRepeat(value);
    
  • Set yoyo
    sprite.anims.setYoyo(value);
    
  • Stop repeat
    sprite.anims.stopOnRepeat();
    
  • Set repeat delay
    sprite.anims.setRepeatDelay();
    

Properties

  • Is playing
    var isPlaying = sprite.anims.isPlaying;
    
  • Is paused
    var isPaused = sprite.anims.isPaused;
    
  • Total frames count
    var frameCount = sprite.anims.getTotalFrames();
    
  • Time scale
    var timescale = sprite.anims.getTimeScale();
    
  • Progress
    • Progress ignoring repeats and yoyos
      var progress = sprite.anims.getProgress();
      
  • Repeat
    • Repeat count
      var repeatCount = sprite.anims.getRepeat();
      
    • Yoyo
      var repeatDelay = sprite.anims.getYoyo();
      
    • Repeat delay
      var repeatDelay = sprite.anims.getRepeatDelay();
      
  • Current animation
    var currentAnim = sprite.anims.currentAnim;
    
  • Current frame
    var currentAnim = sprite.anims.currentFrame;
    

Events

  • On start
    sprite.on('animationstart', function(currentAnim, currentFrame, sprite){});
    
    sprite.on('animationstart-' + key, function(currentAnim, currentFrame, sprite){});
    
  • On restart
    sprite.on('animationrestart', function(currentAnim, currentFrame, sprite){});
    
    sprite.on('animationrestart-' + key, function(currentAnim, currentFrame, sprite){});
    
  • On complete
    sprite.on('animationcomplete', function(currentAnim, currentFramee, sprite){});
    
    sprite.on('animationcomplete-' + key, function(currentAnim, currentFramee, sprite){});
    
  • On update
    sprite.on('animationupdate', function(currentAnim, currentFrame, sprite){});
    
    sprite.on('animationupdate-' + key, function(currentAnim, currentFrame, sprite){});
    
  • On repeat
    sprite.on('animationrepeat', function(currentAnim, currentFrame, sprite){});
    
    sprite.on('animationrepeat-' + key, function(currentAnim, currentFrame, sprite){});