9 Phaser3-多场景切换_phaser3 场景切换-CSDN博客

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

本文介绍了如何在Phaser3游戏开发中使用`start`和`setVisible`方法管理场景的显示与切换，通过实例展示了BootScene、PlayScene以及它们之间的交互，包括在用户点击事件中隐藏当前场景并跳转到下一个。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果展示

在这里插入图片描述

关键技术点

使用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);
  }
}