我需要正确更新我的 Phaser 3 文本

Question

所以我希望我的 phaser 文本每秒自动更新，我该怎么做？

我想要的场景

import Phaser from '../lib/phaser.js'

export default class Game extends Phaser.Scene {
  constructor() {
    super('game')
  }

  init() {
    this.energy = 0;
  }

  preload() {
    this.load.spritesheet('wheel', 'assets/imgs/game/wheel.png', {
      frameWidth: 64,
      frameHeight: 64
    });
    this.load.image('islands', 'assets/imgs/game/the islands.png');
    this.load.image('backdrop', 'assets/imgs/game/backdrop.png');
    this.load.spritesheet('waterfall', 'assets/imgs/game/waterfall sprite sheet.png', {
      frameWidth: 128,
      frameHeight: 256
    });
    this.load.spritesheet('sea', 'assets/imgs/game/sea.png', {
      frameWidth: 800,
      frameHeight: 50
    });
  }

  create() {
    this.add.image(400, 300, 'backdrop')

    const Waterfall = this.add.sprite(400, 510, 'waterfall');
    this.anims.create({
      key: 'falldown',
      frames: this.anims.generateFrameNumbers('waterfall', {
        start: 0,
        end: 8
      }),
      frameRate: 10,
      repeat: -1
    });

    Waterfall.anims.play('falldown');

    const sea = this.add.sprite(400, 575, 'sea');
    this.anims.create({
      key: 'move',
      frames: this.anims.generateFrameNumbers('sea', {
        start: 0,
        end: 6
      }),
      frameRate: 6,
      repeat: -1
    });

    sea.anims.play('move');

    this.add.image(400, 500, 'islands')

    const wheel = this.add.sprite(375, 400, 'wheel');
    this.anims.create({
      key: 'turn',
      frames: this.anims.generateFrameNumbers('wheel', {
        start: 0,
        end: 6
      }),
      frameRate: 6,
      repeat: -1
    });

    const wheel1 = this.add.sprite(430, 450, 'wheel');
    this.anims.create({
      key: 'turn',
      frames: this.anims.generateFrameNumbers('wheel', {
        start: 0,
        end: 6
      }),
      frameRate: 6,
      repeat: -1
    });

    const wheel2 = this.add.sprite(375, 500, 'wheel');
    this.anims.create({
      key: 'turn',
      frames: this.anims.generateFrameNumbers('wheel', {
        start: 0,
        end: 6
      }),
      frameRate: 6,
      repeat: -1
    });

    this.energy = this.add.text(25, 50, 'Energy (MW): 0', {
        color: '#000',
        fontSize: 24
      })
      .setInteractive()
      .on('pointerdown', () => {
        this.energy++
          this.energy = `Energy (MW): ${this.energy}`
      })

    wheel2.anims.play('turn');
    wheel1.anims.play('turn');
    wheel.anims.play('turn');


  }

  update() {
    this.energy++
      this.energy = `Energy (MW): ${this.energy}`
  }
}

can some please help me.


this text is very problematic with the text and it stays energy 0 and doesn't change and there is also nothing in console
everything is working but the text update and I'm doing this as a functional script for a school project

Answer 1

你需要将Text变量和能量值分开。

另外，您应该像这样在constructor 之前创建变量：

energyText: Phaser.GameObjects.Text;
energy: number;

constructor(){
    super('game')
}

init(){
    this.energy = 0;
}

create(){
    this.energyText = this.add.text(25, 50, 'Energy (MW): 0', {
        color: '#000',
        fontSize: 24
    });
}

update(){
    this.energy++;
    this.energyText.setText("Energy (MW): " + this.energy.toString());
}

注意：update 函数被称为 every frame 而不是 every second， 所以如果你想每秒更新一次变量，你也可以写一些逻辑脚本。

timeElapsed: number;
maxTime: number;

init(){
    this.energy = 0;
    this.timeElapsed = 0;
    this.maxTime = 1;
}

update(time: number, delta: number) // note this parameter, 'delta' is in ms.
{
    let deltaInSecond = delta/1000; // convert it to second
    this.timeElapsed = this.timeElapsed + deltaInSecond;
    
    if(this.timeElapsed >= this.maxTime) // if the time elapsed already more than 1 second, update the energy variable
    {
        this.energy++;
        this.energyText.setText("Energy (MW): " + this.energy.toString());
        this.timeElapsed = 0; // don't forget to reset it to zero again.
    }
}