我需要正确更新Phaser 3文本

问题描述

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

我想要的场景@H_502_3@

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',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',repeat: -1
    });

    const wheel1 = this.add.sprite(430,450,repeat: -1
    });

    const wheel2 = this.add.sprite(375,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

解决方法

您需要将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.
    }
}