Phaser计时器控制的文本问题

huangapple go评论59阅读模式
英文:

Phaser timer controlled text trouble

问题

我正在尝试显示一行文本,然后通过事件更改场景,但我遇到了问题。以下是我正在使用的代码:

```javascript
this.query.setText('他以前是做什么工作的?');
var unemployed = this.add.sprite(600, 600, 'unemployedButton').setInteractive();
var cop = this.add.sprite(1080, 600, 'copButton').setInteractive();

unemployed.on('pointerdown', function (pointer) {

    this.query.setText('那是一个谎言。他以前有工作。');
    this.time.addEvent({
        delay: 2500,
        callback: () => this.query.setText('他是一名警察。他从未是保安。'),
        callbackScope: this,
    });
    // 其他时间事件...
    
}, this);

cop.on('pointerdown', function (pointer) {

    this.query.setText('是的,他以前是一名警察。');
    this.time.addEvent({
        delay: 2500,
        callback: () => this.query.setText('他从未失去工作,也从未是保安。'),
        callbackScope: this,
    });
    // 其他时间事件...
    
}, this);

这段代码应该根据玩家点击的按钮显示两种不同的一系列文本。但是目前的情况是,当玩家点击按钮时,它只显示最初的问题(即this.query首次设置的内容)一段时间,然后转到菜单场景。

我不确定我做错了什么。我发誓在我添加布尔值和场景更改部分之前它是有效的。有人能告诉我我哪里出错了以及如何修复吗?

如果有帮助的话,我在VSCode中使用的是Phaser 3。

英文:

I'm trying to have some text that shows one line at a time then change scenes, using events. I'm having trouble though. Here is the code I'm using:

<!-- language: lang-js -->

this.query.setText(&#39;What was his job?&#39;);
var unemployed = this.add.sprite(600, 600, &#39;unemployedButton&#39;).setInteractive();
var cop = this.add.sprite(1080, 600, &#39;copButton&#39;).setInteractive();

unemployed.on(&#39;pointerdown&#39;, function (pointer) {

    this.query.setText(&#39;Thats a lie. He did have a job.&#39;);
    this.time.addEvent({
        delay: 2500,
        callback: () =&gt; this.query.setText(&#39;He was a police officer. He never was a security guard.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 5000,
        callback: () =&gt; this.query.setText(&#39;He never lost his job or struggled with money.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 7500,
        callback: () =&gt; this.query.setText(&#39;He had gone to visit a fellow officer that day.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 10000,
        callback: () =&gt; this.query.setText(&#39;He was shocked to find the window smashed and his friend dead.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12500,
        callback: () =&gt; jobQuestion = false,
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12501,
        callback: () =&gt; this.scene.start(&#39;menu&#39;),
        callbackScope: this,
    });

}, this);

cop.on(&#39;pointerdown&#39;, function (pointer) {

    this.query.setText(&#39;Yes, hes was a police officer.&#39;);
    this.time.addEvent({
        delay: 2500,
        callback: () =&gt; this.query.setText(&#39;He never lost his job, nor was he ever security guard.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 5000,
        callback: () =&gt; this.query.setText(&#39;That part was a lie to make him look like a criminal.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 7500,
        callback: () =&gt; this.query.setText(&#39;He had gone to visit a fellow officer that day.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 10000,
        callback: () =&gt; this.query.setText(&#39;He was shocked to find the window smashed and his friend dead.&#39;),
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12500,
        callback: () =&gt; jobQuestion = false,
        callbackScope: this,
    });
    this.time.addEvent({
        delay: 12501,
        callback: () =&gt; this.scene.start(&#39;menu&#39;),
        callbackScope: this,
    });
}, this);

The code is supposed to show one of two series of lines based on a button that the player clicked on. But as it is now, when the player clicks a button, it just shows, the first the initial question (the first thing this.query is set to) for a while and then goes to the menu scene.

I'm not sure what I did wrong. I swear it was working earlier, before I added the parts with the boolean and the scene change. Can someone tell me where I messed up and how do I fix it?

If it helps, I'm using Phaser 3 in VSCode.

答案1

得分: 0

>更新:
如果代码确实位于update函数中,这可能是错误的原因,因为事件侦听器将在每次调用update函数时都被调用(每分钟大约60次)。将其移到create函数中,就像我的演示代码中一样,问题应该就会解决。

问题必须在其他地方,或者您可能点击了多次,因为代码应该可以正常工作。

这是一个演示:

document.body.style = 'margin:0;';

var boolVariable = false

class FirstScene extends Phaser.Scene {
    constructor() {
        super('FirstScene')
    }

    create() {
        this.label1 = this.add.text(50, 80, '')
            .setScale(2)
            .setOrigin(0)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });

        let button = this.add.rectangle(10, 10, 200, 50, 0xffffff)
            .setOrigin(0)
            .setInteractive();

        let buttonText = this.add.text(0, 0, 'Press me')
            .setScale(1.5)
            .setColor('#000000')
            .setOrigin(0.5)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });

        Phaser.Display.Align.In.Center(buttonText, button);

        button.on('pointerdown', function (pointer) {
            console.info(1)
            this.label1.setText('Initial Text');
            this.time.addEvent({
                delay: 1000,
                callback: () => this.label1.setText(`Text 1 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 2000,
                callback: () => this.label1.setText(`Text 2 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 2500,
                callback: () => boolVariable = true,
                callbackScope: this,
            });

            this.time.addEvent({
                delay: 3000,
                callback: () => this.label1.setText(`Text 3 boolVariable: ${boolVariable}`),
                callbackScope: this,
            });


            this.time.addEvent({
                delay: 4000,
                callback: () => this.scene.start('menu'),
                callbackScope: this,
            });

        }, this);
    }
}


class SecondScene extends Phaser.Scene {
    constructor() {
        super('menu')
    }

    create() {
        this.label1 = this.add.text(50, 50, 'MENU SCENE')
            .setScale(2.5)
            .setOrigin(0)
            .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });
    }
}

var config = {
    type: Phaser.AUTO,
    width: 536,
    height: 183,
    scene: [FirstScene, SecondScene]
};

new Phaser.Game(config);
<script src="//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js"></script>
英文:

>Update:
If the code is really in the update functio, this is the cause of the error, since eventlisteners will be call on each update function is call (~ 60 times per minute). Move this to the create function, as in my demo code, and the problem should be fixed.

The problem must be somewhere else, or you are clicking multiple times, because the code should work.

Here a demo:

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

document.body.style = &#39;margin:0;&#39;;
var boolVariable = false
class FirstScene extends Phaser.Scene {
constructor() {
super(&#39;FirstScene&#39;)
}
create() {
this.label1 = this.add.text(50, 80, &#39;&#39;)
.setScale(2)
.setOrigin(0)
.setStyle({ fontStyle: &#39;bold&#39;, fontFamily: &#39;Arial&#39; });
let button = this.add.rectangle(10, 10, 200, 50, 0xffffff)
.setOrigin(0)
.setInteractive();
let buttonText = this.add.text(0, 0, &#39;Press me&#39;)
.setScale(1.5)
.setColor(&#39;#000000&#39;)
.setOrigin(0.5)
.setStyle({ fontStyle: &#39;bold&#39;, fontFamily: &#39;Arial&#39; });
Phaser.Display.Align.In.Center(buttonText, button);
button.on(&#39;pointerdown&#39;, function (pointer) {
console.info(1)
this.label1.setText(&#39;Initial Text&#39;);
this.time.addEvent({
delay: 1000,
callback: () =&gt; this.label1.setText(`Text 1 boolVariable: ${boolVariable}`),
callbackScope: this,
});
this.time.addEvent({
delay: 2000,
callback: () =&gt; this.label1.setText(`Text 2 boolVariable: ${boolVariable}`),
callbackScope: this,
});
this.time.addEvent({
delay: 2500,
callback: () =&gt; boolVariable = true,
callbackScope: this,
});
this.time.addEvent({
delay: 3000,
callback: () =&gt; this.label1.setText(`Text 3 boolVariable: ${boolVariable}`),
callbackScope: this,
});
this.time.addEvent({
delay: 4000,
callback: () =&gt; this.scene.start(&#39;menu&#39;),
callbackScope: this,
});
}, this);
}
}
class SecondScene extends Phaser.Scene {
constructor() {
super(&#39;menu&#39;)
}
create() {
this.label1 = this.add.text(50, 50, &#39;MENU SCENE&#39;)
.setScale(2.5)
.setOrigin(0)
.setStyle({ fontStyle: &#39;bold&#39;, fontFamily: &#39;Arial&#39; });
}
}
var config = {
type: Phaser.AUTO,
width: 536,
height: 183,
scene: [FirstScene, SecondScene]
};
new Phaser.Game(config);

<!-- language: lang-html -->

&lt;script src=&quot;//cdn.jsdelivr.net/npm/phaser/dist/phaser.min.js&quot;&gt;&lt;/script&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月6日 14:36:14
  • 转载请务必保留本文链接:https://go.coder-hub.com/76412005.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定