Phaser3之 anims

anims this.anims

动画管理器。
动画由全局动画管理器管理。这是一个单例类，负责创建动画及其相应的数据并将其传递给所有游戏对象。与插件不同，它由 Game 实例拥有，而不是由 Scene 拥有。

Sprite 和其他游戏对象从 AnimationManager 获取它们需要的数据。

paused 暂停。

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

播放

play(key)play(key [, ignoreIfPlaying] [, startFrame]) 在具有动画组件的游戏对象上播放动画，例如 Sprite。image是没有play()的

this.add.sprite(...).play('cat'); // 正确
this.add.image(...).play('cat'); // 报错

playAnimation(key [, startFrame]) 为该组的所有成员播放动画。

create(config)

创建一个新动画并将其添加到动画管理器。
动画是全局性的。创建后，您可以在游戏中的任何场景中使用它们。它们不是特定于场景的。
如果给出了无效的键，则此方法将返回false。
如果您传递动画管理器中已存在的动画的键，则将返回该动画。
只有当密钥有效且尚未使用时，才会创建全新的动画。
如果您希望重新使用现有密钥，AnimationManager.remove请先调用此方法。

config Phaser.Types.Animations.Animation 动画的配置设置

  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) 获取动画。

key string 要检索的动画的键。
案例

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

toJSON() 将动画数据转换为 JSON。

// 下面的打印都是一个对象，但是frames里面的结果却是不一样的

var animdiamond = this.anims.get('playdiamond'); // 提取动画：

console.log(ruby); // frames 里面是<AnimationFrame>

console.log(JSON.stringify(ruby)); // 转成json字符串，  

console.log(ruby.toJSON()); // 或者直接调用toJSON（这将返回一个对象）  frames 里面是<frame>

// JSON.parse(JSON.stringify(ruby)) 结果等同于 ruby.toJSON()

remove(key) 根据给定的键，从此动画管理器中删除动画。

这是一项全球行动。一旦动画被移除，任何游戏对象都不能继续使用它。
参数：
key string 要移除的动画的关键。

addFrame(config) 将帧添加到动画的末尾。

config:{
key
frame
duration
visible
}

案例

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

toJSON( [key])

根据给定的键将动画数据作为 JavaScript 对象返回。或者，如果没有定义key，它将以对象数组的形式返回所有动画的数据。

console.log(this.anims); // anims数据 {...}

// 也可以调用“this.anims.toJSON”并传递所需动画的关键点   
console.log(this.anims.toJSON('ruby')); // {anims: [{…}] ,globalTimeScale: 1}
// 可以在动画管理器中转储所有动画：
console.log(JSON.parse(JSON.stringify(this.anims))); // {anims: (4) [{…}, {…}, {…}, {…}],globalTimeScale: 1}

generateFrameNames(key [, config]) 从纹理键和配置对象生成Phaser.Types.Animations.AnimationFrame对象数组。

根据给定的Phaser.Types.Animations.GenerateFrameNames配置，生成具有基于字符串的帧名称的对象。
这是一个辅助方法，旨在让您更轻松地从纹理图集中提取所有帧名称。如果您正在使用精灵表，请参阅generateFrameNumbers方法。
例子：
如果您有一个已加载的纹理图集，gems并且它包含 6 个名为ruby_0001、 等的帧ruby_0002，那么您可以使用以下方法调用此方法：this.anims.generateFrameNames(‘gems’, { prefix: ‘ruby_’, end: 6, zeroPad: 4 })。
该end值告诉它查找 6 帧，递增编号，均以前缀 开头ruby_。该zeroPad 值告诉它有多少个零填充数字。要使用此方法创建动画，您可以执行以下操作：

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 包含动画帧的纹理的键。
config:{ <可选> 动画帧名称的配置对象。
prefix 字符串 <可选> ‘’ 如果使用范围或frames.
start 数字 <可选> 0 如果frames未提供，则返回第一帧的编号。
end 数字 <可选> 0 如果frames未提供，则返回最后一帧的编号。
suffix 字符串 <可选> ‘’ 如果使用范围或frames.
zeroPad 数字 <可选> 0 每个结果帧编号的最小预期长度。数字将用零左填充直到它们这么长，然后添加并附加以创建结果帧名称。
outputArray Array.< Phaser.Types.Animations.AnimationFrame > <可选> [] 要将创建的配置对象附加到的数组。
frames 布尔值 | 数组.<编号> <可选> false 如果作为数组提供，则由start和定义的范围end将被忽略并使用这些帧号。
}

案例:

    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 }),, // 四个0填充
        repeat: -1
      })
      var sprite1 = this.add.sprite(400, 300, 'game', 'diamond_0000')
      sprite1.play('playdiamond')
    }

generateFrameNumbers(key, config)

从纹理键和配置对象生成Phaser.Types.Animations.AnimationFrame对象数组。
根据给定的Phaser.Types.Animations.GenerateFrameNumbers配置，生成具有编号帧名称的对象。

如果你有一个精灵表中加载之后调用explosion，它包含12帧，那么你可以使用调用这个方法： this.anims.generateFrameNumbers(‘explosion’, { start: 0, end: 12 })。
该end值告诉它在 12 帧后停止。要使用此方法创建动画，您可以执行以下操作：

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

请注意，这start是可选的，如果动画从第 0 帧开始，则不需要包含它。
要反向指定动画，请交换start和end值。
如果帧不是连续的，你可以传递一个帧号数组，例如：
this.anims.generateFrameNumbers(‘explosion’, { frames: [ 0, 1, 2, 1, 2, 3, 4, 0, 1, 2 ] })
参数：
key string 包含动画帧的纹理的键。
config Phaser.Types.Animations.GenerateFrameNumbers 动画帧的配置对象。

返回：
Phaser.Types.Animations.AnimationFrame对象的数组。
类型
Array.< Phaser.Types.Animations.AnimationFrame >

案例:

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])

从加载的 Aseprite JSON 文件创建一个或多个动画。

Aseprite 是一个强大的动画精灵编辑器和像素艺术工具。

您可以在 https://www.aseprite.org/ 上找到更多详细信息

要在 Aseprite 中导出兼容的 JSON 文件，请执行以下操作：

转到“文件 - 导出精灵表”

在布局选项卡上： 2a。将“工作表类型”设置为“打包”2b。将“约束”设置为“无”2c。选中“合并重复项”复选框

在Sprite选项卡上： 3a。将“图层”设置为“可见图层”3b。将“框架”设置为“所有框架”，除非您只想导出标签的子集

在边框选项卡上：4a。检查“修剪精灵”和“修剪单元格”选项 4b。确保“Border Padding”、“Spacing”和“Inner Padding”都> 0（1通常就足够了）

在输出选项卡上：5a。检查“输出文件”，为您的图像命名并确保选择“png 文件”作为文件类型 5b。检查“JSON 数据”并为您的 json 文件命名为 5c。JSON 数据类型可以是散列或数组，Phaser 不介意。5天。确保在元选项 5e 中选中“标签”。在“项目文件名”输入框中，确保它只显示“{frame}”，仅此而已。

点击导出

这是用 Aseprite 1.2.25 测试过的。

这将导出一个 png 和 json 文件，您可以使用 Aseprite Loader 加载它们，即：

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

加载后，您可以使用“atlas”键从场景中调用此方法：

this.anims.createFromAseprite(‘paladin’);
JSON 中定义的任何动画现在都可以在 Phaser 中使用，您可以通过它们的标签名称播放它们。例如，如果您的 Aseprite 时间线上有一个名为“War Cry”的动画，您可以使用该标签名称在 Phaser 中播放它：

this.add.sprite(400, 300).play(‘War Cry’);
调用此方法时，您可以选择提供一组标签名称，并且只会创建那些动画。例如：

this.anims.createFromAseprite(‘paladin’, [ ‘step’, ‘War Cry’, ‘Magnum Break’ ]);
这只会创建定义的 3 个动画。请注意，标记名称区分大小写。

参数：
key string 加载的 Aseprite 图集的密钥。它必须在调用此方法之前已加载。
tags 数组。<字符串> <可选> 标签名称数组。如果提供，则只会创建在此数组中找到的动画。

案例

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]) 播放组里面的所有动画

获取一组具有动画组件的游戏对象，然后开始在它们上播放给定的动画，每个动画对象的偏移stagger量都由此方法提供的 数量决定

key string 在游戏对象上播放的动画的关键。
children Phaser.GameObjects.GameObject | Array.< Phaser.GameObjects.GameObject > 用于播放动画的一组游戏对象。他们必须有一个动画组件。
stagger 数字 <可选>0 每次播放时间偏移的时间量（以毫秒为单位）。

this.anims.staggerPlay('playcube', group.getChildren(), 0.03);
// 等价于下面的代码
// group.getChildren().forEach(item => {
//   item.play('playcube')
// })

pauseAll() 暂停所有动画。

 this.anims.pauseAll(); 

resumeAll() 恢复所有暂停的动画。

 this.anims.resumeAll();