Phaser 3鼠标交互问题：悬停精灵时无法显示文本求助

原代码的核心问题 #

• 事件绑定代码在精灵创建逻辑之外，当this.pack[0]不为"key"时，this.key未定义会直接报错，导致交互逻辑完全失效
• 未使用正确的悬停事件（pointerover），也没有处理鼠标离开时的文本隐藏逻辑
• 销毁精灵的逻辑位置错误，可能在精灵未创建时执行，引发错误

修正后的完整代码 #

// 先确保line1和line2已提前在create方法中初始化（示例）
// this.line1 = this.add.text(10, 300, '', { fontSize: '16px', fill: '#fff' });
// this.line2 = this.add.text(10, 330, '', { fontSize: '16px', fill: '#fff' });

// 库存物品创建逻辑
if (this.pack[0] !== null && this.pack[0] === "key") {
    this.key = this.physics.add.sprite(180, 150, 'key').setInteractive();
    this.key.body.immovable = true;
    this.key.body.allowGravity = false;
    this.key.setScale(4);
    this.key.texture.setFilter(Phaser.Textures.FilterMode.NEAREST);

    // 绑定鼠标悬停显示文本事件
    this.key.on('pointerover', () => {
        this.line1.setText('Peef: 这是卧室门的钥匙。');
        this.line2.setText('Bandit不知为啥把它藏在床底下，可能只是在玩。');
    }, this);

    // 绑定鼠标离开清空文本事件（可选）
    this.key.on('pointerout', () => {
        this.line1.setText('');
        this.line2.setText('');
    }, this);
}

// 任务完成后销毁精灵（先判断key存在，避免空引用错误）
if (tutorial === "complete" && this.key) {
    this.key.destroy();
    this.key = null; // 清空引用防止后续误操作
}

关键说明 #

• 把事件绑定放在精灵创建的if块内部，确保只有精灵存在时才绑定事件
• 使用pointerover触发文本显示，pointerout处理鼠标离开时的文本清空（按需选择）
• 销毁精灵时先判断this.key是否存在，避免空引用报错
• 必须提前初始化line1和line2文本对象，否则无法设置文本内容

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