Phaser3中使用纹理集创建动画

前几天才开始学习phaser，看完教程后第一件事就是想做个动画效果，但是这才刚踏出第一步就踩了坑，就此记录一下。

创建纹理集

这里我使用TexturePacker把事先准备好的素材生成Phaser3支持的纹理集，TexturePacker使用非常简单，官网有教程，这里不多赘述

json文件中记录的都是关于纹理集中每一帧的位置、大小等信息，看不懂没关系，所幸Phaser会帮我们解析

绘制火焰

先在preload方法加载资源

// 读取assets/sprites/fire.json文件，并命名为fire，第三个参数则是图片的路径
this.load.multiatlas('fire', 'assets/sprites/fire.json', 'assets/sprites')

然后在create方法中把已经加载完成的纹理添加到场景中

// 三个参数分别是精灵(sprite)的x坐标、y坐标和纹理的key值，对应上方multiatlas()的第一个参数
const fire = this.add.sprite(400, 100, 'fire')

这样就把纹理集的第一帧绘制到屏幕上了，非常轻松。但是一团火焰不会燃烧可不行，接下来就得让它燃烧起来。

创建动画

创建动画也很简单，在create方法中加入以下代码

const frames = this.anims.generateFrameNames('fire', {
  start: 0,
  end: 14
})
console.log(frames)
this.anims.create({
  key: 'burn',
  frames,
  repeat: -1
})

回到浏览器发现火焰还是纹丝不动，不急，先看看这些个参数是什么

• key: 作为这个动画的名称
• frames: 生成动画帧的数据
• repeat: 动画播放次数，-1为无限循环

这里可以看到frames参数比较特别，它是用this.anims的另一个方法生成的，这就是我踩坑的点。
根据API文档，这个方法的两个参数分别是纹理的key和动画帧名称的配置，于是点开继续查看第二个参数的配置属性，可以看到有7个属性。

• start: 开始
• end: 结束
• prefix: 前缀
• suffix: 后缀
• zeroPad: 补0
• outputArray: 输出数组，可以把生成的动画帧数据push到这个数组当中
• frames: 帧编号数组

这是我刚看到的理解，根据文档，start、end跟frames是互斥的，如果传入frames，start和end就会失效。
由于文档中描述得比较模糊(英语渣)，并且都是可选参数，我图省事儿只写了start和end参数，并从0写到14，于是浏览器给我无情地报了个错误

我代码中并没有引用frame属性的，看来是Phaser的运行时错误没有很好地处理，并且这时候打印frames是一个空数组。由于国内的Phaser资源较少，经过好一番搜索也没有发现相关的解决方法，那咋办呢，看源码呗。
我在phaser/src/animations/AnimationManager.js路径下找到了generateFrameNames方法

generateFrameNames: function (key, config)
{
    var prefix = GetValue(config, 'prefix', '');
    var start = GetValue(config, 'start', 0);
    var end = GetValue(config, 'end', 0);
    var suffix = GetValue(config, 'suffix', '');
    var zeroPad = GetValue(config, 'zeroPad', 0);
    var out = GetValue(config, 'outputArray', []);
    var frames = GetValue(config, 'frames', false);

    var texture = this.textureManager.get(key);

    if (!texture)
    {
        return out;
    }

    var diff = (start < end) ? 1 : -1;

    //  Adjust because we use i !== end in the for loop
    end += diff;

    var i;
    var frame;

    if (!config)
    {
        //  Use every frame in the atlas?
        frames = texture.getFrameNames();

        for (i = 0; i < frames.length; i++)
        {
            out.push({ key: key, frame: frames[i] });
        }
    }
    else if (Array.isArray(frames))
    {
        //  Have they provided their own custom frame sequence array?
        for (i = 0; i < frames.length; i++)
        {
            frame = prefix + Pad(frames[i], zeroPad, '0', 1) + suffix;

            if (texture.has(frame))
            {
                out.push({ key: key, frame: frame });
            }
        }
    }
    else
    {
        for (i = start; i !== end; i += diff)
        {
            frame = prefix + Pad(i, zeroPad, '0', 1) + suffix;

            if (texture.has(frame))
            {
                out.push({ key: key, frame: frame });
            }
        }
    }

    return out;
}

这段代码其实不难懂，仔细揣摩一下就能看懂，返回值out是一个数组，就是前边说的“生成动画帧的数据”，经过一系列的判断之后，可以看到out中的对象的frame属性总是prefix + xxx + suffix，原来参数中的start,end,prefix,suffix,frames,zeroPad都是用来生成拼接的字符串的，而我们需要通过这些参数让它生成纹理集数据中的帧名

于是将代码修改

const frames = this.anims.generateFrameNames('fire', {
  start: 1,
  end: 15,
  prefix: 'fire',
  suffix: '.png'
})

这样一来生成的frame分别是fire1.png ~ fire15.png，这时候打印的frames就会是一个15项的数组

完整代码

new Phaser.Game({
  type: Phaser.AUTO,
  width: 750,
  height: window.innerHeight,
  scene: [
    {
      preload() {
        this.load.multiatlas('fire', 'assets/sprites/fire.json', 'assets/sprites')
      },
      create() {
        const fire = this.add.sprite(400, 100, 'fire')
        const frames = this.anims.generateFrameNames('fire', {
          start: 1,
          end: 15,
          prefix: 'fire',
          suffix: '.png'
        })
        console.log(frames)
        this.anims.create({
          key: 'burn',
          frames,
          repeat: -1
        })
        fire.play('burn')
      }
    }
  ]
})

小结

此次踩坑是因为理解错generateFrameNames()方法中的配置，一开始以为start和end是每一帧对应的index，所以才会写成0和14，但这其实是跟每一帧的filename对应，通过结合配置参数的前缀、后缀、补0生成，所以根据filename的不同传入不同配置才是正解。