关于截屏时实现游戏暂停以及本地和上线不同步问题

目录

需求：在点击截屏时需要自动暂停游戏运行，并在关闭弹窗后游戏自动恢复

问题：本地测试通过但是部署上线报错

---

代码仓地址https://github.com/ceilf6/Xbuilder

需求：在点击截屏时需要自动暂停游戏运行，并在关闭弹窗后游戏自动恢复

需要从游戏引擎角度实现，否则游戏都不会完全停止

// 在 spx-gui/public/spx_2.0.0-beta9/runner.html 中添加
window.pauseGame = async () => {// 使用时间缩放来暂停游戏if (typeof window.gdspx_platform_set_time_scale === 'function') {window.gdspx_platform_set_time_scale(0.0);  // 时间缩放为0，游戏完全停止console.log("游戏已通过时间缩放暂停 (time_scale = 0.0)")}
}window.resumeGame = async () => {// 使用时间缩放来恢复游戏if (typeof window.gdspx_platform_set_time_scale === 'function') {window.gdspx_platform_set_time_scale(1.0);  // 时间缩放为1，游戏正常速度console.log("游戏已通过时间缩放恢复 (time_scale = 1.0)")}
}

接着通过在引擎组件中通过 defineExpose 来暴露方法

defineExpose({async pauseGame() {const iframeWindow = iframeWindowRef.valueawait iframeWindow.pauseGame()  // 调用iframe中的方法},async resumeGame() {const iframeWindow = iframeWindowRef.valueawait iframeWindow.resumeGame()}
})

（且由于 XBuilder 上有两个引擎，需要在两个组件中构建完方法后还得去顶层组件中统一暴露）

然后就是去截屏组件中应用

const handleScreenshot = async () => {// 1. 暂停游戏await projectRunner.pauseGame()// 2. 截图const screenshot = await projectRunner.takeScreenshot()// 3. 显示截图弹窗isScreenshotModalVisible.value = true
}// 关闭截图弹窗时恢复游戏
const handleCloseScreenshotModal = async () => {await projectRunner.resumeGame()
}

录屏加上了观察者模式，因为录屏弹窗的调用是截屏的两倍

// 弹窗打开时暂停游戏
watch(() => props.visible, async (newVisible) => {if (newVisible) {await props.projectRunner.pauseGame()}
})// 开始录屏时恢复游戏
const startGameCanvasRecording = async () => {await props.projectRunner.resumeGame()  // 让录屏能录制到游戏画面
}// 停止录屏时暂停游戏
const handleStopRecording = async () => {await props.projectRunner.pauseGame()
}// 关闭弹窗时恢复游戏
const handleModalClose = async () => {await props.projectRunner.resumeGame()
}

问题：本地测试通过但是部署上线报错

通过 vercel 部署上去后报错 找不到新定义的方法

于是我去 vercel 上看了 public 中的 runner.html 文件，发现未和本地同步，于是我去看了 runner 的更新逻辑，发现 install-spx.sh 脚本在构建时会从 GitHub 下载 spx_web.zip 并解压，覆盖我们修改的 runner.html 且 Vite 配置中 spx_* 文件被设置了1年的缓存时间

于是我在脚本文件中重新应用更改