javascript - Phaser.js 上的性能

Question

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 张图片落在一个轮子上(考虑到它的所有条件)。我在preload 函数 中上传了所有这些图片，在update 函数 中我只是创建下载的图片并删除之前的图片。 所有这些都会影响生产力(因为更改图像的速度可能不同)。如何解决这个问题？

也许如果我降低图片的变化速度，问题就会解决，但我不知道该怎么做

Answer 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 bool 值包装在超时中以进一步延迟图像更新的频率。

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