phaser如何创建纹理图

“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第2天，点击查看活动详情”

为什么使用纹理图

使用纹理图主要有2个原因

• 由于图片只有1张，所以可以加速图片加载速度
• 可以提高帧速率，在使用WebGl时只需要渲染1次即可

怎么创建纹理数据

可以使用TexturePacker来对数据进行创建。

1. 通过添加文件夹或文件到左侧

2. 选择要输出的json文件和png图片，最后选择生成精灵图片

3. 最终生成的资源如下

怎么使用纹理类的资源

class ScenePage extends Phaser.Scene {
  constructor () {
    super()
  }
  preload () {
    // 加载单个纹理图
    // this.load.atlas('cityscene', 'chapter/c2/cityscene.png', 'chapter/c2/cityscene.json')
    // 加载过个纹理资源
    this.load.multiatlas('cityscene', 'chapter/c2/cityscene.json', 'chapter/c2')
  }
  create () {
    // 将背景图精灵添加到屏幕中
    this.add.sprite(0, 0, 'cityscene', 'background.png')
  }
}

我们先通过load加载器将纹理类的资源通过multiatlas进行添加多个纹理资源。

由于图片的轴心点默认是在中心，所以我们设置sprite(0,0)时

这时候运行后，显示如下：

我们需要在工具中，设置图片的轴心点。

1. 在左侧面板中选中背景图
2. 选择精灵设置
3. 在右侧面板中打开枢轴点
4. 在预定义中选择左上方
5. 选择重新发布

运行代码后：

添加人的动画

create () {
	......
  // 添加第一张帧图
  this.capguy = this.add.sprite(0, 400, 'cityscene', 'walk/0005.png')
  // 将图片缩小
  this.capguy.setScale(0.5, 0.5)
  // 创建一组帧
  const frameNames = this.anims.generateFrameNames('cityscene', {start: 1, end: 8, zeroPad: 4, prefix: 'walk/', suffix: '.png'})
  // 创建动画
  this.anims.create({key: 'walk', repeat: -1, frames: frameNames, frameRate: 16})
  this.capguy.anims.play('walk')
}

此时，人就会在左侧原地踏步走动

怎么才能让人向前走动呢，接下来我们使用phaser3中的update方法。

update方法是在每次帧动画改变时触发

update (time, delta) {
    // time: 时间
    // delta: 从上次更新开始的增量时间,通过delta/8 每秒增加125px (1000/16)* 16/8
    this.capguy.x += delta / 8
    if (this.capguy.x > 800) {
      this.capguy.x = -50
    }
  }

优化

在用此生成的png图片有将近400k，我们可以使用工具将此图片优化下。

在选择图片格式中，将默认的PNG-32转变成PNG-8(index)后，图片降低到100k左右。