Phaser 3中叠加添加的Scene显示在下层的问题排查

在Phaser项目中，我在MainGame场景内启动UI场景并创建了精灵，但UI的元素（如生命值条）始终被MainGame的元素遮挡，显示在下方。

相关代码 #

MainGame.js #

export default class MainGame extends Phaser.Scene
{
    constructor ()
    {
        super('MainGame');
        this.sprite;
    }
    create() {   
        this.scene.launch('UI');
        this.sprite = this.add.sprite(0, 45, 'mysprite');
        this.sprite.anims.play({key: 'idle'}, true);   
    }
}

UI.js #

export default class UI extends Phaser.Scene
{
    constructor ()
    {
        super({key: 'UI'});
    }

    init ()
    {
        this.scene.moveUp();
    }

    create ()
    {
        // UI元素创建逻辑
    }
}

main.js（场景注册代码） #

scene: [ Preloader, UI, Intro, MainGame ]

问题根源 #

Phaser默认会按照场景注册的先后顺序确定渲染层级，后注册的场景会渲染在先注册的场景之上。这里MainGame是最后注册的，所以它的元素会覆盖先注册的UI场景元素——即便在UI的init里调用了this.scene.moveUp()，也会因为MainGame启动后的渲染层级优先级更高而失效。

解决方法 #

不要依赖默认注册顺序，主动明确指定UI场景的渲染层级，确保它处于最上层：

1. 在MainGame启动UI场景后，直接将UI调到顶层：

// MainGame.js的create方法中
this.scene.launch('UI');
this.scene.bringToTop('UI'); // 强制将UI场景置于渲染顶层

2. 或者在UI场景的create方法中主动提升层级：

// UI.js的create方法中
this.scene.bringToTop(); // 将当前UI场景调到最上层

相比moveUp()，bringToTop()更直接，能确保UI场景始终处于所有场景的最上方，避免被其他场景元素遮挡。

内容的提问来源于stack exchange，提问作者Koffee