9 Phaser3-多场景切换

纵横驰骋的小野马

于 2023-10-13 15:41:43 发布

阅读量194

点赞数

分类专栏： Phaser 3 文章标签：动画 javascript

本文链接：https://blog.csdn.net/qiqi123j/article/details/133812067

版权

Phaser 3 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

效果展示

在这里插入图片描述

关键技术点

使用this.scene.start打开新场景
打开新场景之前要先设置场景不可见，使用this.scene.setVisible(false)
打开新场景后要设置场景可见，使用this.scene.setVisible(true)

部分主要文件代码

BootScene.js

import { Scene } from 'phaser'

export default class BootScene extends Scene {
  constructor () {
    super({ key: 'BootScene' });
  }
  showMsg = null

  create () {
    this.scene.start('PlayScene')
  }
}

PlayScene.js

import { Scene } from 'phaser'

export default class PlayScene extends Scene {
  constructor () {
    super({ key: 'PlayScene' })
  }

  create () {
    // 添加文字
    this.showMsg = this.add.text(16, 16, 'Play Scene!',
        { fontSize: '32px', fill: '#fff' });

    this.input.on("pointerdown",function(){
      this.scene.setVisible(false)
      this.scene.start('OneScene')
      this.scene.setVisible(true);
    },this);
  }
}

OneScene.js

import { Scene } from 'phaser'
export default class PlayScene extends Scene {
  constructor () {
    super({ key: 'OneScene' })
  }

  create () {
    // 添加文字
    this.showMsg = this.add.text(16, 16, 'One Scene!',
        { fontSize: '32px', fill: '#fff' });

    this.input.on("pointerdown",function(){
      this.scene.setVisible(false)
      this.scene.start('TwoScene')
      this.scene.setVisible(true);
    },this);
  }
}

TwoScene.js

import { Scene } from 'phaser'

export default class PlayScene extends Scene {
  constructor () {
    super({ key: 'TwoScene' })
  }

  create () {
    // 添加文字
    this.showMsg = this.add.text(16, 16, 'Two Scene!',
        { fontSize: '32px', fill: '#fff' });

    this.input.on("pointerdown",function(){
      this.showMsg.setVisible(false)
      this.over = this.add.text(16, 16, 'Over!',
          { fontSize: '32px', fill: '#fff' });
    },this);
  }
}