Phaser.js 的性能答案

【问题标题】：Performance on Phaser.jsPhaser.js 的性能
【发布时间】：2019-09-20 10:05:51
【问题描述】：

function preload() {
  this.load.image('background', 'images/table_en.png.webp');
  this.load.image('wheel', 'images/UpperWheel.png.webp');
  this.load.image('ball', 'images/ball.png.webp');

  roulette.circle.array.forEach(i => {
    this.load.image(`${i.index}`, i.src);
  });
  roulette.lever.array.forEach(i => {
    this.load.image(`${i.index}`, i.src)
  });
}

function update() {
  if (roulette.circle.previousCircle) {
    roulette.circle.previousCircle.destroy()
  }

  if (roulette.circle.previousLever) {
    roulette.circle.previousLever.destroy();
  }

  if (roulette.circle.currentStep === 100 && run) {
    ball.run = true;
  }

  let circle = this.add.image(108, 110, `circle${roulette.circle.currentStep}`).setOrigin(0, 0).setScale(0.7);
  let lever = this.add.image(200, 150, `lever${roulette.lever.currentStep}`).setOrigin(0, 0).setScale(0.7);

  roulette.circle.method();
  roulette.lever.method();
  roulette.circle.previousCircle = circle;
  roulette.circle.previousLever = lever;
}

我正在写轮盘赌，359 张图片落在一个轮子上（考虑到它的所有条件）。我在预加载功能中上传了所有这些图片，在更新功能中我只是创建了下载的图片并删除了之前的图片。 所有这些都会影响生产力（因为更改图像的速度可能不同）。如何解决这个问题？

如果我降低换图片的速度，问题就解决了，但我不知道怎么做

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

update() 方法每帧调用一次。 Phaser 游戏中的默认目标每秒帧数 (fps) 为 60 - API Reference。

游戏中的许多因素都会影响您将看到的实际fps。如果您将其保留为默认值，您的 update() 方法将被调用大约每秒 60 次。如果您希望用户真正能够看到每张图片，这可能不是您想要的行为。

您可以像这样在游戏配置中降低目标fps 数字：

{ 
  type: Phaser.AUTO,
  ...,
  fps: {
    target: 30 // 30x per second
  }
}

...但这可能是不完美的。这是对游戏更新速度的全局更改，您可能希望以每秒 60 倍的速度发生其他事情（例如检查输入等）。

要在不修改游戏的fps 的情况下更改图像的更改频率，请考虑创建一个单独的方法来处理图像的销毁/创建，并在update() 中引用该方法。

function update() {
  if (!changingImage) {
    changingImage = true;
    changeImage();
  }
}

function changeImage() {
  if (roulette.circle.previousCircle) {
    roulette.circle.previousCircle.destroy()
  }

  if (roulette.circle.previousLever) {
    roulette.circle.previousLever.destroy();
  }

  if (roulette.circle.currentStep === 100 && run) {
    ball.run = true;
  }

  let circle = this.add.image(108, 110, `circle${roulette.circle.currentStep}`).setOrigin(0, 0).setScale(0.7);
  let lever = this.add.image(200, 150, `lever${roulette.lever.currentStep}`).setOrigin(0, 0).setScale(0.7);

  roulette.circle.method();
  roulette.lever.method();
  roulette.circle.previousCircle = circle;
  roulette.circle.previousLever = lever;

  changeImage = true;
}

如果它仍然发生得太快，请考虑将 changeImage 布尔值包含在超时中，以进一步延迟图像更新的频率。

  setTimeout(() => {
    changingImage = true;
  }, 1000);

【讨论】：