Phaser计时器激活的事件。如何？

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

Phaser timer activated events. How?

问题

我正在尝试制作一个游戏，其中某些事情是基于不断增加的计时器而发生的。例如，在特定屏幕上经过一定时间后，某些文本、图像或可点击按钮才会出现。或者当计时器等于某些数字时，可能会在屏幕上短暂地闪现一张图片。

不幸的是，我不知道如何实现这个功能。有人可以给我展示一个解决方案吗？最好有示例。

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

英文:

I'm trying to make a game where certain things happen based on a timer that keeps going up. For example, certain text, images, or clickable buttons only appear after a certain amount of time has passed on a specific screen. Or maybe an image briefly flashes onto the screen when the timer equals certain numbers.

Unfortunately, I have got no clue how to make this happen. Can anyone show me a solution? Examples are perfered.

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

答案1

得分: 0

我建议查看时间文档或官方主页上的时间示例。

基本上，你只需要使用this.time.addEvent( ... );。

更新：这里是一个简短的演示：

  1. document.body.style = 'margin:0;';
  3. var config = {
  4.     type: Phaser.AUTO,
  5.     width: 536,
  6.     height: 183,
  7.     scene: {
  8.         create,
  9.         update
  10.     }
  11. };
  13. function create() {
  14.     this.label1 = this.add.text(50, 50, '计时器: 0')
  15.         .setScale(2.5)
  16.         .setOrigin(0)
  17.         .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });
  19.     this.label2 = this.add.text(50, 100, '更新计时器: 0')
  20.         .setScale(2.5)
  21.         .setOrigin(0)
  22.         .setStyle({ fontStyle: 'bold', fontFamily: 'Arial' });
  24.     this.currentAppTime = 0;
  26.     let counter = 1;
  28.     this.time.addEvent({
  29.         delay: 1500,
  30.         callback: () => this.label1.setText(`计时器: ${counter++}`),
  31.         callbackScope: this,
  32.         loop: true
  33.     });
  34. }
  36. function update(time, delta) {
  37.     let helperTime = Math.floor(time / 1000);
  38.     if (helperTime > this.currentAppTime) {
  39.         this.currentAppTime = helperTime;
  40.         this.label2.setText(`更新计时器: ${this.currentAppTime}`)
  41.     }
  42. }
  44. new Phaser.Game(config);
英文:

I sugest checking out the time documentation, or the time examples on the official homepage.

Basically you just need to use this.time.addEvent( ... );

UPDATED Herer a short demo:

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

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

  1. document.body.style = &#39;margin:0;&#39;;
  3. var config = {
  4.     type: Phaser.AUTO,
  5.     width: 536,
  6.     height: 183,
  7.     scene: {
  8.         create,
  9.         update
  10.     }
  11. }; 
  13. function create () {
  14.     this.label1 = this.add.text(50, 50, &#39;Timer: 0&#39;)
  15.         .setScale(2.5)
  16.         .setOrigin(0)
  17.         .setStyle({fontStyle: &#39;bold&#39;, fontFamily: &#39;Arial&#39;});
  18.         
  19.     this.label2 = this.add.text(50, 100, &#39;Update Timer: 0&#39;)
  20.         .setScale(2.5)
  21.         .setOrigin(0)
  22.         .setStyle({fontStyle: &#39;bold&#39;, fontFamily: &#39;Arial&#39;});
  23.     
  24.     this.currentAppTime = 0;
  25.   
  26.     let counter = 1;
  27.   
  28.     this.time.addEvent({
  29.         delay: 1500, 
  30.         callback: () =&gt; this.label1.setText(`Timer: ${counter++}` ),
  31.         callbackScope: this, 
  32.         loop: true 
  33.     });
  34. }
  36. function update(time, delta){
  37.     let helperTime = Math.floor(time / 1000);
  38.     if(helperTime &gt; this.currentAppTime){
  39.         this.currentAppTime = helperTime;
  40.         this.label2.setText(`Update Timer: ${this.currentAppTime}` )
  41.     }
  42. }
  44. new Phaser.Game(config);

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

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

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月2日 06:24:56
  • 转载请务必保留本文链接：https://go.coder-hub.com/76386086.html
  • phaser-framework
  • phaserjs
  • timer
匿名

发表评论

匿名网友

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

确定