在 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 的情况下更改图像的更改频率，请考虑创建一个单独的方法来处理图像 destroy/create 并在 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);

在 Phaser.js 上的表现

Performance on Phaser.js

javascript

phaser-framework