Anims of phaser3

anims this.anims

Animation Manager .
Animation is managed by the global animation manager . This is a singleton class , Responsible for creating animation and its corresponding data and passing it to all game objects . Unlike plug-ins , It consists of Game Instance has , Rather than by Scene Have .

Sprite And other game objects from AnimationManager Get the data they need .

paused Pause .

this.anims.get('playsquare').paused  = !this.anims.get('playsquare').paused; 

Play

play(key)play(key [, ignoreIfPlaying] [, startFrame]) Play animation on a GameObject with animation components , for example Sprite.image It's not play() Of

this.add.sprite(...).play('cat'); //  correct 
this.add.image(...).play('cat'); //  Report errors 

playAnimation(key [, startFrame]) Play animation for all members of the group .

create(config)

Create a new animation and add it to the animation Manager .
Animation is global . After creation , You can use them in any scene in the game . They are not scene specific .
If an invalid key is given , This method will return false.
If you pass a key for an animation that already exists in the animation Manager , The animation will be returned .
Only if the key is valid and not yet used , To create a new animation .
If you want to reuse your existing key ,AnimationManager.remove Please call this method first .

config Phaser.Types.Animations.Animation Animation configuration settings

  var config = {
    
        key: 'explodeAnimation',
        frames: this.anims.generateFrameNumbers('balls', {
     start: 0, end: 4, first: 4 }),
        frameRate: 20,
        repeat: -1
    };

    this.anims.create(config);

get(key) Get animation .

key string The key of the animation to retrieve .
Case study

this.anims.create({
    key: 'playdiamond', frames: ... })
var animdiamond = this.anims.get('playdiamond');

toJSON() Convert animation data to JSON.

//  The following print is an object , however frames The result is different 

var animdiamond = this.anims.get('playdiamond'); //  Extract animation ：

console.log(ruby); // frames  Inside is <AnimationFrame>

console.log(JSON.stringify(ruby)); //  Turn into json character string , 

console.log(ruby.toJSON()); //  Or call directly toJSON（ This will return an object ） frames  Inside is <frame>

// JSON.parse(JSON.stringify(ruby))  The result is equivalent to  ruby.toJSON()

remove(key) According to the given key , Delete animation from this animation Manager .

This is a global initiative . Once the animation is removed , No GameObject can continue to use it .
Parameters ：
key string The key to the animation to be removed .

addFrame(config) Add a frame to the end of the animation .

config:{
key
frame
duration
visible
}

Case study

var animdiamond = this.anims.get('playdiamond');
var animret = this.anims.generateFrameNames('game', {
     prefix: 'square_', start: 0, end: 14, zeroPad: 4 });//  four 0 fill 
animdiamond.addFrame(animret)

toJSON( [key])

According to the given key, the animation data is regarded as JavaScript Object returns . perhaps , If there is no definition key, It will return all animation data in the form of an array of objects .

console.log(this.anims); // anims data  {...}

//  You can also call “this.anims.toJSON” And pass the key points of the required animation  
console.log(this.anims.toJSON('ruby')); // {anims: [{…}] ,globalTimeScale: 1}
//  You can dump all animation in the animation manager ：
console.log(JSON.parse(JSON.stringify(this.anims))); // {anims: (4) [{…}, {…}, {…}, {…}],globalTimeScale: 1}

generateFrameNames(key [, config]) Generate... From texture keys and configuration objects Phaser.Types.Animations.AnimationFrame An array of objects .

According to the given Phaser.Types.Animations.GenerateFrameNames To configure , Generate an object with a string based frame name .
This is an auxiliary method , Designed to make it easier for you to extract all frame names from the texture map set . If you are using the sprite table , see also generateFrameNumbers Method .
Example ：
If you have a loaded texture atlas ,gems And it contains 6 One is called ruby_0001、 Etc ruby_0002, Then you can call this method using the following method ：this.anims.generateFrameNames(‘gems’, { prefix: ‘ruby_’, end: 6, zeroPad: 4 }).
The end Value tells it to find 6 frame , Increment number , Are prefixed with start ruby_. The zeroPad Value tells it how many zero padding numbers there are . To create an animation using this method , You can do the following ：

this.anims.create({
    
  key: 'ruby',
  repeat: -1,
  frames: this.anims.generateFrameNames('gems', {
    
    prefix: 'ruby_',
    end: 6,
    zeroPad: 4 // ruby_0000, ruby_0001, ruby_0002
  })
});

key string The key that contains the texture of the animation frame .
config:{ < Optional > Configuration object of animation frame name .
prefix character string < Optional > ‘’ If the scope of use or frames.
start Numbers < Optional > 0 If frames Did not provide a , Returns the number of the first frame .
end Numbers < Optional > 0 If frames Did not provide a , The number of the last frame is returned .
suffix character string < Optional > ‘’ If the scope of use or frames.
zeroPad Numbers < Optional > 0 The minimum expected length of each resulting frame number . Numbers will be left filled with zeros until they are this long , Then add and append to create the resulting frame name .
outputArray Array.< Phaser.Types.Animations.AnimationFrame > < Optional > [] Array to attach the created configuration object to .
frames Boolean value | Array .< Number > < Optional > false If provided as an array , By start And the scope of the definition end These frame numbers will be ignored and used .
}

Case study :

    function preload() {
    
      this.load.setPath('http://labs.phaser.io')
      this.load.atlas('game', 'assets/tests/columns/gems.png', "assets/tests/columns/gems.json")
    }

    function create() {
    
      this.anims.create({
    
        key: 'playdiamond',
        frames: this.anims.generateFrameNames('game', {
     prefix: 'diamond_', start: 0, end: 15, zeroPad: 4 }),, //  four 0 fill 
        repeat: -1
      })
      var sprite1 = this.add.sprite(400, 300, 'game', 'diamond_0000')
      sprite1.play('playdiamond')
    }

generateFrameNumbers(key, config)

Generate... From texture keys and configuration objects Phaser.Types.Animations.AnimationFrame An array of objects .
According to the given Phaser.Types.Animations.GenerateFrameNumbers To configure , Generate objects with numbered frame names .

If you have a wizard table loaded after calling explosion, It contains 12 frame , Then you can use to call this method ： this.anims.generateFrameNumbers(‘explosion’, { start: 0, end: 12 }).
The end The value tells it in 12 Stop after frame . To create an animation using this method , You can do the following ：

this.anims.create({
    
  key: 'boom',
  frames: this.anims.generateFrameNames('explosion', {
    
    start: 0,
    end: 12
  })
});

Please note that , this start It's optional , If the animation starts from 0 Frame start , You do not need to include it .
To specify the animation in reverse , Please exchange start and end value .
If the frames are not continuous , You can pass an array of frame numbers , for example ：
this.anims.generateFrameNumbers(‘explosion’, { frames: [ 0, 1, 2, 1, 2, 3, 4, 0, 1, 2 ] })
Parameters ：
key string The key that contains the texture of the animation frame .
config Phaser.Types.Animations.GenerateFrameNumbers Configuration object of animation frame .

return ：
Phaser.Types.Animations.AnimationFrame An array of objects .
type
Array.< Phaser.Types.Animations.AnimationFrame >

Case study :

this.load.spritesheet('walker', '/assets/animations/walker.png',{
    frameWidth:220,frameHeight:163});
this.anims.create({
    
  key: 'playwalker',
  frames:  this.anims.generateFrameNumbers('walker',{
    start:0,end:14}),
  repeat: -1
})
this.add.sprite(400, 480, 'walker', 0).play('playwalker')

createFromAseprite(key [, tags])

Loaded from Aseprite JSON File to create one or more animations .

Aseprite Is a powerful animation wizard editor and pixel art tool .

You can go to https://www.aseprite.org/ Find more details on

To be in Aseprite Export compatible JSON file , Do the following ：

go to “ file - Export sprite table ”

On the Layout tab ： 2a. take “ Worksheet type ” Set to “ pack ”2b. take “ constraint ” Set to “ nothing ”2c. Choose “ Merge duplicates ” Check box

stay Sprite On the tab ： 3a. take “ Layers ” Set to “ Visible layer ”3b. take “ frame ” Set to “ All frames ”, Unless you only want to export a subset of the tags

On the borders tab ：4a. Check “ Pruning wizard ” and “ Trim cells ” Options 4b. Make sure “Border Padding”、“Spacing” and “Inner Padding” all > 0（1 Usually enough ）

On the output tab ：5a. Check “ The output file ”, Name your image and make sure you select “png file ” As a file type 5b. Check “JSON data ” And for your json The file is named 5c.JSON The data type can be hash or array ,Phaser Don't you mind? .5 God . Make sure that the meta options 5e Choose “ label ”. stay “ Project file name ” In the input box , Make sure it only shows “{frame}”, That's it .

Click export

This is the use of Aseprite 1.2.25 Tested .

This will export a png and json file , You can use Aseprite Loader Load them , namely ：

function preload ()
{
    
    this.load.path = 'assets/animations/aseprite/';
    this.load.aseprite('paladin', 'paladin.png', 'paladin.json');
}

After loading , You can use “atlas” Key to call this method from the scene ：

this.anims.createFromAseprite(‘paladin’);
JSON Any animation defined in can now be in Phaser Use in , You can play them by their tag names . for example , If your Aseprite There is a time line called “War Cry” Animation , You can use this tag name in Phaser Play it in ：

this.add.sprite(400, 300).play(‘War Cry’);
When this method is called , You can optionally provide a set of tag names , And will only create those animations . for example ：

this.anims.createFromAseprite(‘paladin’, [ ‘step’, ‘War Cry’, ‘Magnum Break’ ]);
This will only create defined 3 An animation . Please note that , Tag names are case sensitive .

Parameters ：
key string Loaded Aseprite The key of the atlas . It must have been loaded before calling this method .
tags Array .< character string > < Optional > Tag name array . Provided , Only the animations found in this array will be created .

Case study

this.load.setPath('http://labs.phaser.io/assets/animations/aseprite/')
this.load.aseprite('paladin', 'paladin.png', 'paladin.json');
this.aseprite = this.anims.createFromAseprite('paladin');
this.add.sprite(100,100).play({
    key:'Magnum Break',repeat:-1})

staggerPlay(key, children [, stagger]) Play all the animations in the group

Get a set of game objects with animation components , Then start playing the given animation on them , The offset of each animated object stagger Quantities are provided by this method Quantity determination

key string The key to playing animation on game objects .
children Phaser.GameObjects.GameObject | Array.< Phaser.GameObjects.GameObject > A set of game objects for playing animation . They must have an animation component .
stagger Numbers < Optional >0 The amount of time offset per playback （ In Milliseconds ）.

this.anims.staggerPlay('playcube', group.getChildren(), 0.03);
//  Equivalent to the following code 
// group.getChildren().forEach(item => {
    
// item.play('playcube')
// })

pauseAll() Pause all animation .

 this.anims.pauseAll(); 

resumeAll() Resume all paused animation .

 this.anims.resumeAll();