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

目录

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

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

代码仓地址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.value
    await iframeWindow.pauseGame()  // 调用iframe中的方法
  },
  async resumeGame() {
    const iframeWindow = iframeWindowRef.value
    await 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年的缓存时间

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