Phaser JS如何实现音量滑块 解决切换场景滑块值归零问题

匹配参考效果的滑块实现 #

你当前使用rexUI插件的滑块组件，只需要调整组件的样式参数、交互模式即可匹配参考图效果：

• 调整轨道（track）、进度指示条（indicator）、拖拽按钮（thumb）的尺寸、圆角、色值，做出轨道细、拖拽按钮突出的视觉效果
• 将输入模式从仅支持点击改为同时支持拖拽，符合常规滑块交互逻辑

滑块默认值设置方法 #

rexUI滑块组件原生支持value配置项，参数取值范围为0-1，分别对应滑块在最左侧（0%）、最右侧（100%）的位置，初始化滑块时直接传入该参数即可设置默认位置，常规默认音量设为0.5（即50%音量）即可。

切换场景后滑块值归零的解决方法 #

问题原因 #

你当前将音量值存储在场景内的局部变量print2中，Phaser切换场景时会默认销毁当前场景的所有局部变量、场景内对象，新场景重新初始化滑块时没有读取持久化存储的音量值，就会默认从0位置开始渲染。

修复方案 #

• 使用Phaser自带的全局注册表registry存储音量值，该存储全局共享，不会随场景切换销毁
• 滑块初始化时，优先从全局注册表读取已保存的音量值作为滑块的默认value
• 滑块值变动时，同步更新全局注册表存储的音量值，同时直接修改全局声音对象的音量参数

修正后完整代码 #

// 初始化前先读取全局存储的音量，无存储值时用0.5作为默认音量
const savedVolume = this.registry.get('gameVolume') ?? 0.5;
// 初始化时直接应用已保存的音量
this.sound.volume = savedVolume;

this.rexUI.add.slider({
    x: 400,
    y: 230,
    width: 200,
    height: 30,
    orientation: 'x',
    // 滑块默认值直接取全局存储的音量
    value: savedVolume,
    // 轨道样式：细圆角深色条
    track: this.rexUI.add.roundRectangle(0, 0, 0, 6, 3, 0x3d3d3d),
    // 已选进度样式：主色圆角条
    indicator: this.rexUI.add.roundRectangle(0, 0, 0, 6, 3, 0x5865F2),
    // 拖拽按钮样式：圆形主色按钮，突出于轨道
    thumb: this.rexUI.add.roundRectangle(0, 0, 22, 22, 11, 0x5865F2),
    // 支持拖拽+点击跳转
    input: 'drag',
    easeValue: { duration: 100 },
    valuechangeCallback: function(value) {
        // 过滤异常值，确保音量在0-1合法区间
        const safeVolume = Phaser.Math.Clamp(value, 0, 1);
        // 实时更新全局音量
        this.sound.volume = safeVolume;
        // 同步更新全局存储的音量值
        this.registry.set('gameVolume', safeVolume);
        // 如需展示百分比，可转换为0-100整数使用
        const volumePercent = Math.floor(safeVolume * 100);
        console.log(volumePercent);
    },
    // 修正回调内this指向，避免拿不到sound、registry对象
    callbackScope: this
})
.layout();

补充说明：如果需要页面刷新后也保留用户设置的音量，可以将registry的读写替换为localStorage，逻辑完全一致。不要将配置值存在单个场景的局部变量中，这类变量会随场景销毁被回收。

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